+++ WEB DESIGN UPDATE. - Volume 9, Issue 40, April 2, 2011. An email newsletter to distribute news and information about web design and development. ++ISSUE 40 CONTENTS. SECTION ONE: New references. What's new at the Web Design Reference site? http://www.d.umn.edu/itss/training/online/webdesign/ New links in these categories: 01: ACCESSIBILITY. 02: CASCADING STYLE SHEETS. 03: COLOR. 04: EVALUATION & TESTING. 05: JAVASCRIPT. 06: NAVIGATION. 07: PHP. 08: STANDARDS, GUIDELINES & PATTERNS. 09: TOOLS. 10: TYPOGRAPHY. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Accessibility For Web Writers, Part 4 By Dey Alexander. "...Don't assume all users have all sensory perceptions..." http://www.4syllables.com.au/2011/03/accessibility-for-web-writers-part-4/ Yes I'm Recommending WCAG2 Now By Gian Wild. "had a client ring me yesterday, wanting to know if they should be trying to comply with WCAG1 or WCAG2..." http://www.gianwild.com/2011/04/01/yes-im-recommending-wcag2-now/ PDF Techniques for WCAG 2.0 By W3C. "This Web page lists PDF Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. For information about the techniques, see Introduction to Techniques for WCAG 2.0..." http://www.w3.org/WAI/GL/WCAG20-TECHS/pdf.html Fix the Web Project Makes Early Impact By Access Bulletin. A three-month-old project using 'crowdsourcing' to improve the accessibility of websites for disabled people has already helped to solve problems with 26 sites, including those of the BBC and a large UK building society, E-Access Bulletin has learned." http://www.headstar.com/eablive/?p=549 Amp Up Accessibility of Your Videos: Add Transcripts By Glenda Watson Hyatt. "Providing a transcript - a textual version of the video - further increases accessibility of the content. People who are deaf-blind can access the content by using a refreshable (dynamic) Braille display, which converts text into Braille. Like captions, providing transcripts also has auxiliary benefits..." http://blogaccessibility.com/amp-up-accessibility-of-your-videos-add-transcripts/ Redesigning University Website for People with Learning Disabilities: Feedback By John Rochford. "I am working on a project to make the website, of a university program for people with learning disabilities, more usable by prospective students. Small groups of faculty and students were shown the first mockup last week. Listed below is their feedback and brief descriptions of a few possible remediation efforts..." http://clearhelper.wordpress.com/2011/03/28/redesigning-university-website-for-people-with-learning-disabilities-feedback/ Configuring Internet Explorer to Handle Longdesc By Sean Hayes. "Users with visual impairments are often not able to access images on web sites, now this is probably not news to anyone reading this blog; and you are also probably aware of the technique of using an alt attribute in the html markup on images to provide a pithy summary of the content of the image. However it is often the case that an image is too complicated to be described completely in a single short sentence, but adding any more than that to the alt attribute results in a far too verbose experience for users that rely on screen readers or other assistive technologies..." http://blogs.msdn.com/b/accessibility/archive/2011/03/25/configuring-internet-explorer-to-handle-longdesc.aspx Longdesc Misuse: How Prevalent? By Karl Groves. "...As my data show, the vast majority of longdesc values are conforming..." http://www.karlgroves.com/2011/03/27/longdesc-misuse-how-prevalent/ Accessibility Testing, Research and Development By Suzanne Taylor. "This an informal test area used by the Accessibility Initiative at Pearson. Recommendations here are designed for environments where schedules and resources don't allow for quick changes to products. This is open access in case our investigations can help others in making sites accessible. These pages make use of materials that others have made available including the WAI-ARIA Spec from the W3C and Jim Thatcher's testing tools." http://wps.pearsoned.com/WAI_ARIA_Testing/139/35621/9119211.cw/index.html Keyboard Accessibility for Web Applications By Jonathan Snook. "One of the things I really enjoyed working on (and continue to enjoy working on) is keyboard access in the new Yahoo! Mail. As a fan of using the keyboard, I wanted to make sure that using Mail felt natural and was easy to move around the application. This is much harder than it looks because we have to establish a balance between a web page model and an application model." http://snook.ca/archives/accessibility_and_usability/keyboard-accessibility-for-web-apps +02: CASCADING STYLE SHEETS. Targeting HTML5's Semantic Elements with CSS By Louis Lazaris. "It would seem that with the introduction of HTML5's semantic elements, styling those new elements should be an easier task. But as I've started to use HTML5 more, I've realized that it takes quite a bit of forethought to create maintainable CSS that targets the new semantic elements in a future-proof way. In some cases, it could be fairly straightforward, but in others it's a little disheartening because targeting the new elements actually creates more verbose markup." http://www.impressivewebs.com/targeting-html5-css/ Fancy Form Design Using CSS Article By Cameron Adams. "Positioning labels at the top of their form elements is probably the easiest layout to achieve, as we only need to tell the label to take up the entire width of its parent element." http://blogs.sitepoint.com/fancy-form-design-css-3/ Inconsistent Transitions By Eric A. Meyer. "Here's an interesting little test case for transitions. Obviously you'll need to visit it in a browser that supports CSS transitions, and additionally also CSS 2D transforms..." http://meyerweb.com/eric/thoughts/2011/03/24/inconsistent-transitions/ How To Use CSS3 Pseudo-Classes By Richard Shepherd. "CSS3 is a wonderful thing, but it's easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria..." http://www.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/ Media Queries Curated by Eivind Uggedal. A collection of responsive designs. http://mediaqueri.es/ Absolutely Positioned Textareas By Jonathan Snook. "One method that I've been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can-especially when widths need to be percentage-based..." http://snook.ca/archives/html_and_css/absolute-position-textarea +03: COLOR. Color Theory 101 By Jason Beaird. "Continuing on from the previous article in this series on color, The Psychology of Color, let's take a closer look at color temperature, chromatic values, saturation, and the basic theory behind how colors are produced, both in print and on the web..." http://designfestival.com/color-theory-101/ +04: EVALUATION & TESTING. Usability Testing. Oh, The Things You Can Learn. By Jared M. Spool. "I can't say exactly when it happened. Somewhere along the way, the simple technique of usability testing became a validation process. Users were put in front of the screen, asked to perform tasks, and measured, like rats locating cheese in a maze. The results of such studies were statistics, such as 5 out of 13 subjects completed 75% of the tasks successfully and the average task time was 4 minutes, 22 seconds.,," http://www.uie.com/articles/usability_tests_learn/ Usability Testing: When To Use Remote Usability Testing By Tim Fidgeon. "Remote usability testing offers greater audience diversity and higher fidelity to real-world user motivations than in-person methods (but should not entirely replace them). We recommend using 'Moderated' testing for understanding an issue and "Unmoderated" to get large volumes of data..." http://www.spotlessinteractive.com/articles/usability-research/usability-testing/remote-usability-testing-when-to-use.php +05: JAVASCRIPT. Why We Should Support Users with No Javascript By Emma Sax. "...Relying on Javascript is dangerous. Errors can be introduced in a couple of unexpected ways. The first is the failure of external advert code, over which you have no control and secondly is friendly-fire in the form of console.log() left in by your developers (this causes scripts to fail if Firebug, or similar, is not enabled in the browser)." http://www.punkchip.com/2011/03/why-support-javascript-disabled/ +06: NAVIGATION. Accessibility - Handling Repeated Adjacent Links By Henny Swan. "At it's heart accessibility is about people. Technology, code, guidelines and even access technology are the supporting cast so when making pages accessible to multiple users with diverse needs ask yourself not just if content is accessible but if it's usable. Always aim to reduce duplication of links but keeping in mind those users who benefit from larger click-able areas. Emerging techniques such as HTML5 and WAI ARIA aim to help by plugging the gaps in HTML4." http://www.spotlessinteractive.com/articles/accessibility/handling-repeated-adjacent-links.php +07: PHP. Quick PHP Tip: Uploading Multiple Files in HTML5 By Tiffany B. Brown. "One of the neat things about HTML5 is that it allows for multiple file uploads in one file upload field. Of course, you have to use a browser that supports such a feature. Currently Opera 11.10 does. So do Firefox 4, the latest version of Chrome, and Safari 5.0.4. (Internet Explorer 9 does not.)..." http://tiffanybbrown.com/2011/03/29/quick-php-tip-uploading-multiple-files-in-html5/ +08: STANDARDS, GUIDELINES & PATTERNS. HTML5 Canvas Accessibility WebAIM Thread. "I am researching about html5 canvas accessibility ,I want to know more information about it. Any body knows what's the status of canvas accessibility?" http://webaim.org/discussion/mail_thread?thread=4624 WebVTT Explained By Silvia Pfeiffer. "On Wednesday, I gave a talk at Google about WebVTT, the Web Video Text Track file format that is under development at the WHATWG for solving time-aligned text challenges for video..." http://blog.gingertech.net/2011/03/29/webvtt-explained/ HTML5, ARIA Roles, and Screen Readers in March 2011 By Jason Kiss. "Last year, in HTML5, ARIA Roles, and Screen Readers in March 2010, I took a look at how then current screen readers behaved with some of the HTML5 section elements and related WAI-ARIA document and landmark roles. Now that the major screen readers have all seen some significant updates, and both Firefox 4 and Internet Explorer 9 have officially been released, I figure it's time to perform the review again and see what, if anything, has changed..." http://www.accessibleculture.org/research/html5-aria-2011/ longdesc in HTML5 By Bruce Lawson. "Generally, I'm not in favour of hidden metadata that is meant only for one sector of the audience. Hidden metadata, because it's hidden, easily falls out of step with the rest of the information. On the other hand, I'm not generally in favour of chopping things out of the language because it makes it harder for people to migrate from HTML4 to HTML5 and because I've seen the light after the debacle. And, although it's hardly used anywhere, people claim to love it; I'm against removing something that makes their lives easier, particularly when there are enough impediments out there to their full and equal access to the Web...." http://www.brucelawson.co.uk/2011/longdesc-in-html5/ HTML5 Hurdles - What is Missing and Web Browser Update Rate Problems By Robert Nyman. "...To summarize, a lot of exciting things are, and have been, happening with HTML5, and for the future I think one of the most interesting things is to see how the Device API will turn out and truly empower developers building open web-based things for mobile devices. Internet Explorer 9 is a great leap forward for Microsoft compared to previous versions, but it still lacks some of the things available in the other major web browsers. Some worry was also expressed about IE release cycle time and that if it's behind now, imagine how long time until we will get the next version..." http://robertnyman.com/2011/03/31/html5-hurdles-what-is-missing-and-web-browser-update-rate-problems/ +09: TOOLS. CSSPrefixer "Prefixer is a Python-based CSS processor that takes single CSS 3 declarations and adds all the necessary browser prefixes to your stylesheet. You just write the actual CSS 3 rule and CSSPrefixer does the rest. As an added bonus CSSPrefixer can also compress your stylesheets to save on bandwidth." http://cssprefixer.appspot.com/ http://www.webmonkey.com/2011/03/simplify-your-stylesheets-with-cssprefixer/ +10: TYPOGRAPHY. Size Matters When It Comes To Fonts By Susan Weinschenk. "When it comes to fonts, size matters a lot. The font size needs to be big enough so that people can read it without strain..." http://www.whatmakesthemclick.net/2011/03/26/100-things-you-should-know-about-people-91-size-matters-when-it-comes-to-fonts/ +11: USABILITY. The Format is Not the Task By Gerry McGovern. "Nobody is interested in documentation, tools, videos, blogs or Twitter for their own sake. Their interest in these things is only in the context of the task they need to complete." http://www.gerrymcgovern.com/nt/2011/nt-2011-03-28-Format-task.htm Optimizing a Screen for Mobile Use By Jakob Nielsen. "A single mobile screen with almost no features still required 10 design changes to meet usability guidelines for mobile websites." http://www.useit.com/alertbox/mobile-redesign.html Enriching and Not-So-Enriching Complexity By Gerd Waloszek. "...All in all, the complexity that surrounds us is not always perceived as enriching. Poor or, at least, suboptimal design choices are made for a number of reasons, and, last but not least, it is we who increase the complexity in our lives by making poor buying decisions and by preferring and economically supporting mediocre or even inferior solutions. Thus, if Norman concludes that design [comes] to the rescue, I would like to add that this is an incomplete view of the whole story: Human preferences and weaknesses, technical and lifestyle trends, and economic considerations are further players in the "complexity" game. Hopefully, we can muddle our way through successfully and achieve an optimal "medium" level of complexity in our lives..." http://www.sapdesignguild.org/community/blinks/ui_blinks_gw_02.asp#complex1 Context By Jeremy Keith. "...web design is filled with quite a few known unknowns. Here are three of them: Viewport...Bandwidth...Context..." http://adactio.com/journal/4443/ Web Forms That Don't Make People Angry By Emily Smith. "There's no better place to take care of your site visitors than an online form. This is the one place where they're voluntarily sending you information, and maybe even payment. Decrease form abandonment and make somebody's day by considering these three execution guidelines..." http://designfestival.com/web-forms-that-dont-make-people-angry/ Six Controversial Topics in Usability By Jeff Sauro. "Every field has its set of hot-button issues and usability is no exception. Here are six topics that tend to generate some passionate discussions. " http://www.measuringusability.com/blog/usability-controversy.php [Section one ends.] ++ SECTION TWO: +12: What Can You Find at the Web Design Reference Site? Accessibility Information. http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Association Information. http://www.d.umn.edu/itss/training/online/webdesign/associations.html Book Listings. http://www.d.umn.edu/itss/training/online/webdesign/books.html Cascading Style Sheets Information. http://www.d.umn.edu/itss/training/online/webdesign/css.html Color Information. http://www.d.umn.edu/itss/training/online/webdesign/color.html Dreamweaver Information. http://www.d.umn.edu/itss/training/online/webdesign/dreamweaver.html Evaluation & Testing Information. http://www.d.umn.edu/itss/training/online/webdesign/testing.html Event Information. http://www.d.umn.edu/itss/training/online/webdesign/events.html Flash Information. http://www.d.umn.edu/itss/training/online/webdesign/flash.html Information Architecture Information. http://www.d.umn.edu/itss/training/online/webdesign/architecture.html JavaScript Information. http://www.d.umn.edu/itss/training/online/webdesign/javascript.html Miscellaneous Web Information. http://www.d.umn.edu/itss/training/online/webdesign/misc.html Navigation Information. http://www.d.umn.edu/itss/training/online/webdesign/navigation.html PHP Information. http://www.d.umn.edu/itss/training/online/webdesign/php.html Sites & Blogs Listing. http://www.d.umn.edu/itss/training/online/webdesign/sites.html Standards, Guidelines & Pattern Information. http://www.d.umn.edu/itss/training/online/webdesign/standards.html Tool Information. http://www.d.umn.edu/itss/training/online/webdesign/tools.html Typography Information. http://www.d.umn.edu/itss/training/online/webdesign/type.html Usability Information. http://www.d.umn.edu/itss/training/online/webdesign/usability.html XML Information. http://www.d.umn.edu/itss/training/online/webdesign/xml.html [Section two ends.] ++END NOTES. + SUBSCRIPTION INFO. WEB DESIGN UPDATE is available by subscription. For information on how to subscribe and unsubscribe please visit: http://www.d.umn.edu/itss/training/online/webdesign/webdev_listserv.html The Web Design Reference Site also has a RSS 2.0 feed for site updates. + TEXT EMAIL NEWSLETTER (TEN). As a navigation aid for screen readers we do our best to conform to the accessible Text Email Newsletter (TEN) guidelines. Please let me know if there is anything else we can do to make navigation easier. For TEN guideline information please visit: http://www.headstar.com/ten + SIGN OFF. Until next time, Laura L. Carlson Information Technology Systems and Services University of Minnesota Duluth Duluth, MN U.S.A. 55812-3009 mailto:lcarlson@d.umn.edu [Issue ends.]