+++ WEB DESIGN UPDATE. - Volume 10, Issue 51, June 14, 2012. An email newsletter to distribute news and information about web design and development. ++ISSUE 51 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: BOOKS. 03: CASCADING STYLE SHEETS. 04: EVALUATION & TESTING. 05: EVENTS. 06: MISCELLANEOUS. 07: NAVIGATION. 08: TOOLS. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. A Little Deaf Education By Meryl Evans. "...I want to open the door to your questions about deafness. Ask anything. I know how hard it is to ask someone such questions - unless you know the person very well - because you don't know whether that person is sensitive or open. Ask away..." http://www.meryl.net/2012/06/07/a-little-deaf-education/ Closed-Captioned Video Examples By Meryl Evans. "...examples showing how the following types of videos differ: no captions, basic captions (built-in video), captions (turn on/off), transcripts, audio descriptions, ASL / sign-language... http://shelaza.com/links/closed-caption-video-examples/ About WebAIM Screen Reader Survey 4 By Dennis E. Lembree. "...WebAIM reports that problematic items have changed little over the last 2 years. The top ten are..." http://webaxe.blogspot.com/2012/06/about-webaim-screen-reader-survey-4.html My Take on the WebAIM Survey By Terrill Thompson. "The report includes a summary of key findings in the Conclusion, but I thought I'd take a moment to share my takeaways as well..." http://terrillthompson.com/blog/262 HTML5 Accessibility Chops: When to Use an ARIA Role By Steve Faulkner. "There has been discussion of late on whether authors should be allowed to include an ARIA role value on an HTML element that matches the default implicit ARIA role as defined in HTML5. The divergent opinions are mirrored in the differing author conformance requirements between the W3C HTML5 specification and the WHATWG living standard." http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-when-to-use-an-aria-role/ Image alt Exception Change Re-Re-Requested By Adrian Roselli. "Late last week the latest change request (Issue 31c Meta Generator Updated) was handed in for removing the meta name=generator exception. If you look at the table of contents you can see that it has been batted down twice before, though without addressing all the points raised. This of course left the meta name=generator exception open to be challenged again..." http://blog.adrianroselli.com/2012/06/image-alt-exception-change-re-re.html +02: BOOKS. Kline, Jeff. Strategic IT Accessibility: Enabling the Organization, Live Oak Book Company, 2011. Jehl, Scott et. al. Designing with Progressive Enhancement: Building the web that works for everyone, New Riders Press, 2011. +03: CASCADING STYLE SHEETS. Principles of Writing Consistent, Idiomatic CSS By Nicolas Gallagher. "The following document outlines a reasonable style guide for CSS development. It is not meant to be prescriptive and I do not wish to impose my style preferences on other people's code. However, these guidelines do strongly encourage the use of existing, common, sensible patterns." https://github.com/necolas/idiomatic-css#readme Setting Breakpoints in Responsive Design By Nick La. "Lately, I've been blogging a lot about Responsive Design. I've covered the technical side of media queries, basic implementation, full design tutorial, some CSS tricks, and a list of awesome responsive sites. Today, I want to talk about setting breakpoints in responsive design. How should you set the breakpoints?..." http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design Building Books with CSS3 By Nellie McKesson. "While historically, it's been difficult at best to create print-quality PDF books from markup alone, CSS3 now brings us the Paged Media Module, which targets print book formatting. 'Paged' media exists as finite pages, like books and magazines, rather than as long scrolling stretches of text, like most websites. With a single CSS stylesheet, publishers can take XHTML source content and turn it into a laid-out, print-ready PDF. You can take your XHTML source, bypass desktop page layout software like Adobe InDesign, and package it as an ePub file. It's a lightweight and adaptable workflow, which gets you beautiful books faster. Nellie McKesson, eBook Operations Manager at O'Reilly Media, explains how to build books with CSS3." http://www.alistapart.com/articles/building-books-with-css3/ A Case for Responsive Resumes By Andrew Hoffman. "Learn how to author a clean resume in HTML5/CSS3 that scales well to different viewport sizes, is easy to update and maintain, and will never grow obsolete." http://www.alistapart.com/articles/a-case-for-responsive-resumes/ 12 CSS3 Vendor Prefix Crisis Myths By Craig Buckler. "The issues are widely misunderstood - which is why we find ourselves in this mess. Hopefully, this article will shatter several vendor prefix crisis myths..." http://www.sitepoint.com/12-css3-vendor-prefix-crisis-myths/ +04: EVALUATION & TESTING. Report Usability Issues in a User by Problem Matrix By Jeff Sauro. "...usability issues should be described and usually accompanied by a screen shot or short video clip to illustrate their impact. But don't stop there. Usability issues should be converted into a user by problem matrix..." http://www.measuringusability.com/blog/problem-matrix.php +05: EVENTS. Mobile Accessibility June 25, 2012. Online Symposium http://www.w3.org/WAI/RD/2012/mobile/ +06: MISCELLANEOUS. Responsive Images: What's the Problem, and How Do We Fix It? By Matt Wilcox. "...This article aims to give an overview of the problem itself, and show the different proposals in the works to address it..." http://dev.opera.com/articles/view/responsive-images-problem/ +07: NAVIGATION. An Alternative to Select Elements as Navigation in Narrow Viewports By Roger Johansson. "A recurring problem when making sites fit in a narrow viewport is navigation. The most common approach on larger screens is to use a horisontal navigation for the top level items. Sometimes such menus are complicated/complemented by drop-downs listing sub-items, but I'll leave that out of this post and focus on how to handle just the horisontal navigation bar..." http://www.456bereastreet.com/archive/201206/an_alternative_to_select_elements_as_navigation_in_narrow_viewports/ Build a Smart Mobile Navigation Without Hacks By Aaron Gustafson. "Aaron Gustafson explains how to build a progressively-enhanced, CSS-based dropdown that works as part of a responsive design..." http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks +08: TOOLS. Nu Markup Validation Service Bookmarklets By Steve Faulkner. "I noticed that the W3C Nu Markup Validation Service did not have any bookmarklets to provide quick validation of a page currently being viewed. So I made some using the existing W3C validator bookmarklets as the basis..." http://www.paciellogroup.com/blog/2012/06/nu-markup-validation-service-bookmarklets/ +09: USABILITY. Flow, Mastery and Ease-of-Use By Christina Wodtke. "Because this state is so desirable, both for productivity and for pleasure, many application (web and mobile) designers are starting to try to design for it as well. This is a daunting task. First, all humans are different. This means in identical situations I hit flow at a very different moment in the ease-to-difficulty continuum than you do. Secondly, flow is extremely easily to disrupt." http://www.boxesandarrows.com/view/flow-mastery-and Does Your Home Page Answer These 5 Questions ASAP? By Joanna Wiebe. "Unless you've been living under a rock - which is not a very comfy existence, so I doubt you have - you probably already know that you have, like, no time to get your first-time visitors' attention once they land on your home page or other entry page (e.g., PPC, email)..." http://www.webdesignfromscratch.com/copywriting/does-your-home-page-answer-these-5-questions-asap/ Women On Top - Inappropriate Dropdowns By Kate Roberts. "...Alphabetical order wouldn't be very helpful in a list of items that all begin with the same letter. And I donŐt accept that there is any 'natural order' to the categories of men, married women, unmarried women, and women-who-don't-think-it's-any-of-your-business-thank-you-very-much. So on what other basis might one order the list?..." http://www.uxbooth.com/blog/women-on-top-inappropriate-dropdowns/ Designing For the Obvious, the Boring, the "Of Course" By Gerry McGovern. "Making things that are simple and useful is often the result of a lot of boring and tedious work." http://www.gerrymcgovern.com/nt/2012/nt-2012-06-10-Obvious-boring.htm [Section one ends.] ++ SECTION TWO: +10: 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.]