+++ WEB DESIGN UPDATE. - Volume 10, Issue 10, August 29, 2012. An email newsletter to distribute news and information about web design and development. ++ISSUE 10 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: EVALUATION & TESTING. 04: EVENTS. 05: INFORMATION ARCHITECTURE. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: USABILITY. 10: XML. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Putting Accessibility Into Infographics By Karen Mardahl. "...Just take the first step and the positive reception should have you eager to take your next step." http://www.stc-access.org/2012/08/16/putting-accessibility-into-infographics/ Journey to Universal Accessibility - Part 1 By Pathbrite. "At Pathbrite, we're absolutely committed to providing the best user experience possible. To ensure that we reach all users, we've recently released a number of accessibility improvements we feel bring us one step closer to accomplishing the goal. The following list of improvements is merely round one of our accessibility changes, with many more improvements on the horizon." http://www.pathbrite.com/2012/08/23/journey-to-accessibility-part-1/ Reponse to Journey to Universal Accessibility-Part 1 By Dennis E. Lembree. "I got an error when trying to comment, so here's my response to the recent article Journey to Universal Accessibility-Part 1 by @Pathbrite. In general, the article is pretty good, but several of the techniques given are outdated..." http://webaxe.blogspot.com/2012/08/reponse-to-journey-to-universal.html University of Wisconsin Gameday Football App Another Accessibility Disappointment By Kelly Ford. "...In just a few minutes of trying the app with Apple's VoiceOver-a built-in screen reader on the iOS platform-it is a disappointment to see that the University of Wisconsin has once again failed to pay attention to accessibility..." http://blog.kellyford.org/archives/2012/08/university_of_w_1.html Notes on HTML5 Accessibility Support in IE 10 By Steve Faulkner. "...Microsoft are doing things well in many respects, but there are gaps. I particularly like the audio and video implementations which make it much easier for keyboard users to operate the controls without having to remember keyboard shortcuts. It is unfortunate though that each browser that supports accessibility and supports the placeholder attribute has implemented its use in accessible name calculation differently, its a an interoperability nightmare for developers and users." http://www.paciellogroup.com/blog/2012/08/notes-on-html5-accessibility-support-in-ie-10/ +02: CASCADING STYLE SHEETS. CSS Background Images and High Contrast Mode By Adrian Roselli. Screen shot showing web page in both high-contrast and normal mode. I try to stay up on accessibility gotchas and weird browser implementations, but I just discovered one that I suspect I should have already known. http://blog.adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html Vertical Media Queries By Paul Boag. "...These days, concerns about the fold are behind us for the most part, as users are happy to scroll, but as our testing showed, in some cases the layout of the page can actually misguide users into thinking they've already reached the bottom of the page. In their browser, there's a definite point at which the visible area ends and if the content appears to end too, why would they scroll further? The challenge was to show them that there was more to see..." http://boagworld.com/tumblog/vertical-media-queries/ How Do You Use Responsive Images? By Scott Gilbertson. "No one wants to waste bandwidth sending large images over limited mobile pipes, but everyone wants their images to look good on the multitude of screens connecting to today's web. Finding the balance between the myriad factors - screen resolution, screen size, bandwidth, layout and design - is a tricky process..." http://www.webmonkey.com/2012/08/responsive-images/ Normalize.css "A modern, HTML5-ready alternative to CSS resets" http://necolas.github.com/normalize.css/ +03: EVALUATION & TESTING. 9 Biases in Usability Testing By Jeff Sauro. "... it's important to understand the subtle biases that creep into moderated and unmoderated usability tests..." http://www.measuringusability.com/blog/ut-bias.php +04: EVENTS. Accessibility Camp New York September 22, 2012. New York, New York, U.S.A. http://www.twitter.com/a11ycampnyc Usability Week 2012 Conference November 5-9, 2012 Seattle, Washington, U.S.A. http://www.nngroup.com/events/seattle/ Usability Week 2012 Conference December 2-7, 2012 Las Vegas, Nevada, U.S.A. http://www.nngroup.com/events/las_vegas/ +05: INFORMATION ARCHITECTURE. Wireframes - From Bar Napkins To Prototypes By Mike Hughes. "...In this article I will examine the different types of wireframes and discuss their benefits and limitations and where in the design and development life cycle they best fit..." http://blog.usabilla.com/wireframes-from-bar-napkins-to-prototypes/ +06: JAVASCRIPT. Javascript Scope Quiz By Eric Jeney and Jake Binstein. "This 'quiz' will ask a few questions along the way, and then try to explain what Javascript is doing to give the resultant output..." http://madebyknight.com/javascript-scope/ +07: MISCELLANEOUS. HTML Responsive Images Extension Mat Marquis and Adrian Bateman, editors "This proposal adds new elements and attribute to [HTML5] to enable different sources of images based on browser and display characteristics. The proposal addresses multiple use cases such as images used in responsive web designs and different images needed for high density displays..." http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html Responsive Images, the Picture Element and the W3C: This is How you Deal with Hixie and WHATWG By Marc Drummond. "First of all, huge congratulations to Mat Marquis, Jason Grigsby, Scott Jehl, Ethan Marcotte, Florian Rioval and all the other web geniuses who are working to make responsive images much, much easier for those working with responsive web design..." http://marcdrummond.com/responsive-web-design/2012/08/28/picture-element-proposal How Do You Pick Responsive Images Breakpoints? By Jason Grigsby. "For a few months now, I've been puzzling over the question of how to pick responsive images breakpoints. It has become a koan to me-no more answerable than the sound of one hand clapping. And as long as I'm haunted by the question, I thought I would share the joy..." http://blog.cloudfour.com/how-do-you-pick-responsive-images-breakpoints/ +08: NAVIGATION. Complex Navigation Patterns for Responsive Design By Brad Frost. "use mobile as an excuse to revisit your navigation. Look at your analytics. What are your experience's key sections? Where are people spending most of their time? Do you really need your privacy policy in your primary navigation? Focus..." http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/ +09: USABILITY. Tunnel Vision and Selective Attention By Jakob Nielsen. Users don't see stuff that's right on the screen. Selective attention makes people overlook things outside their focus of interest. http://www.useit.com/alertbox/tunnel-vision.html Web Design Guidelines for Low Bandwidth By aptivate.org. "'Don't worry about bandwidth! Soon we will all have infinite bandwidth for no cost.' Heard that before? In fact it is not true for the majority of the world's population. Many people in remote locations and the developing world do not have fast Internet connections and won't be getting them any time soon. This is why Aptivate has written a set of Web Design Guidelines for Low Bandwidth, at a time when web site optimisation seems to be going out of fashion." http://www.aptivate.org/webguidelines/Home.html +10: XML. SVG Accessibility Gap Analysis By Rich Schwerdtfeger. "Every major browser now supports Scalable Vector Graphics (SVG) making it an open supported retained mode, two-dimensional graphics technology capable of supporting clear rendering of graphics even when zoomed. Furthermore, the growth of big data on the Web and the limited number of mobile platforms on which Flash is supported make SVG and HTML5 Canvas the essential 2-D drawing engines for complex visualizations on the Web. The drawback is that it is not accessible, restricting the use of some rich visualization solutions that make use of it. The purpose of this document is to define a common strategy among the major browser manufacturers to fill accessibility gaps in SVG 2.0." http://lists.w3.org/Archives/Public/www-svg/2012Aug/0105.html [Section one ends.] ++ SECTION TWO: +11: 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.]