+++ WEB DESIGN UPDATE. - Volume 10, Issue 45, May 4, 2012. An email newsletter to distribute news and information about web design and development. ++ISSUE 45 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: JAVASCRIPT. 06: MISCELLANEOUS. 07: STANDARDS, GUIDELINES & PATTERNS. 08: TYPOGRAPHY. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Mobile Accessibility Tip - Don't Suppress Pinch Zoom By Henny Swan. "A key feature of mobile browsing is being able to zoom in to read content and out to locate content within a page. It's an invaluable tool however I keep stumbling across sites that suppress zoom and with it one of the main things that make mobile browsing viable for everybody..." http://www.iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom/ Make Sure Your HTML5 Document Outline is Backwards Compatible By Roger Johansson. "This is just a short reminder of something I wrote about in On using h1 for all heading levels in HTML5: make sure your HTML5 document outline is backwards compatible..." http://www.456bereastreet.com/archive/201205/make_sure_your_html5_document_outline_is_backwards_compatible/ Good Examples of Accessible Web Sites By Terrill Thompson. "...It's great that at least 130 of the top pages are using ARIA landmark roles. However, of all these pages, only eleven passed my 10-second accessibility assessment, and of those only seven survived the cut to be featured in this blog post. With that, here are seven pretty good examples of accessible websites..." http://terrillthompson.com/blog/229 Efficiency in Accessibility Testing or, Why Usability Testing Should be Last By Karl Groves. "...that compared to the other types of testing for accessibility, usability testing is an inefficient means of reaching our end goal. Our end goal is not the results of the test but rather an accessible system. Because of the importance of accessibility we should seek to find data accurately and efficiently. For that reason alone, usability testing should be done later in the lifecycle - after automated, manual, and even use case testing." http://www.karlgroves.com/2012/04/27/efficiency-in-accessibility-testing-or-why-usability-testing-should-be-last/ Google's Accessibility Message Comes Through Loud and Clear By PF Anderson. "The problem here is much, much, MUCH larger than simply a service that isn't web-accessible right out of the box. The problem here is that Google has REMOVED accessible options for products that WERE accessible beforehand...Alright, Google, I hear you. The message is that people with disabilities should just STAY HOME. But you know what? I don't think that answer is going to work out very well, for anyone. " http://etechlib.wordpress.com/2012/04/26/googles-accessibility-message-comes-through-loud-and-clear/ Updated (HTML5) Re-Open Request and Change Proposal on Meta Generator By Judy Brewer, et al. "...This CP also re-analyzes the Co-Chairs' previous decisions in favor of the exception and against the requirement for alternative text, identifying factual and logical inaccuracies. It describes the harm that is done by the generator exception, and proposes removing the generator conformance exception in order to address these problems..." http://www.w3.org/html/wg/wiki/ChangeProposals/Issue31cMetaGenerator Charles Schwab Web Accessibility Agreement By Law Office of Lainey Feingold. "Posted here is the settlement agreement between Charles Schwab and one of its blind customers about website accessibility. Schwab engaged in the Structured Negotiations process with the Law Office of Lainey Feingold and has made a significant commitment to ensuring that its website is inclusive for all customers..." http://lflegal.com/2012/05/schwab-agreement/ NYU ITP Student Builds a Camera That Prints Descriptions Instead of Photos By Jessica Roy. "The Descriptive Camera hit the front page of Reddit's r/technology subreddit today, and for good reason. The project, built by NYU ITP student Matt Richardson, uses the Amazon Mechanical Turk Service to turn a photo into a textual description of the captured scene..." http://www.betabeat.com/2012/04/25/nyu-itp-student-builds-a-camera-that-prints-descriptions-instead-of-photos/ +02: CASCADING STYLE SHEETS. Responsive Design - Harnessing the Power of Media Queries By Google. "...It's worth bearing in mind that there's no simple solution to making sites accessible on mobile devices and narrow viewports. Liquid layouts are a great starting point, but some design compromises may need to be made. Media queries are a useful way of adding polish for many devices, but remember that 25% of visits are made from those desktop browsers that do not currently support the technique and there are some performance implications. And if you have a fancy widget on your site, it might work beautifully with a mouse, but not so great on a touch device where fine control is more difficult..."Õ http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html Build a Responsive Site in a Week - Going Further, Part 5 By Paul Robert Lloyd. "In the final part of our responsive web design tutorial, Clearleft's Paul Robert Lloyd explains how there is more to a responsive design than just flexible layouts, images and media queries." http://www.netmagazine.com/tutorials/build-responsive-site-week-going-further-part-5 Five Responsive Web Design Pitfalls to Avoid By Brad Frost. "There are number of nasty traps to avoid when making your site responsive. Brad Frost of R/GA reveals five of the biggest ones and how to sidestep them." http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid Are Hover Events Extinct? By Joshua Johnson. "...My question today could change the way you think about hover forever: 'Does the ubiquity of touchscreens render hover events obsolete?' Put another way, did the iPhone kill :hover? Read on to see how iOS handles a CSS hover event, what that means for you as a developer, and how you should or shouldn't be using hover events in your designs..." http://designshack.net/articles/css/are-hover-events-extinct/ What's the Deal With Display: Inline-Block? By Joshua Johnson. "We've been using floats for layout pretty much since we left tables behind. It's a quirky solution that can often cause troubles, but if you know what you're doing, it works. One interesting alternative to floats that people are turning to more and more lately is to set the display value of an element to inline-block. What does this do exactly? How is it like a float? How is it different? Let's dive in and see what we can discover. " http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ HTML5 Offers 'Scoped' CSS for Precision Styling By Scott Gilbertson. "HTML5's controversial 'scoped' style attribute is now supported in the latest Canary builds of Google's Chrome web browser and Mozilla may eventually add support to Firefox as well..." http://www.webmonkey.com/2012/04/html5-offers-scoped-css-for-precision-styling/ Don't Blame Opera, Blame Devs By Adrian Roselli. "On Wednesday news broke that Opera was going to support some Webkit CSS vendor prefixes. On its surface I thought this wasn't exactly big news. There was a good deal of hubbub about this back in February (Browser Makers Caving to Vendor Prefix Misuse) when word got out that Mozilla, Opera and Microsoft were all considering supporting the -webkit prefix..." http://blog.adrianroselli.com/2012/04/dont-blame-opera-blame-devs.html Conditional CSS By Jeremy Keith. "I got some great comments on my post about conditionally loading content. Just to recap, I was looking for a way of detecting from JavaScript whether media queries have been executed in CSS without duplicating my breakpoints. That bit is important: I'm not looking for MatchMedia, which involves making media queries in JavaScript. Instead I'm looking for some otherwise-useless CSS property that I can use to pass information to JavaScript..." http://adactio.com/journal/5429/ +03: EVALUATION & TESTING. Measuring Usability Quantitatively By Enric Quintero. "The usability concept is understood as the measurement of the difference between the ideal interaction and the real one taken by our target audience..." http://blog.clicktale.com/2012/04/30/measuring-usability-quantitatively/ Do Personas Always Have to be 'Good'? By Apala Lahiri Chavan. "HFI Writer Apala Lahiri Chavan, MA, MSc, CUA, CXA shows how all personas are not equal. She discusses designing for rounded users and extreme characters." http://www.humanfactors.com/downloads/apr12.asp#research The Wizard of Oz Guide to Usability Testing Mobile Prototypes By Ritch Macefield. "It's easy to create a mobile prototype on a desktop computer. What's not quite so easy is to usability test the prototype and still allow the participant to use mobile interaction gestures like long presses and two finger pinches. We can overcome this obstacle by combining Axure's mutually exclusive non-conditional cases with Wizard of Oz usability testing." http://www.userfocus.co.uk/articles/testing_mobile_prototypes.html +04: EVENTS. Reasons to be Appy May 29, 2012. London, England, United Kingdom http://www.reasonstobeappy.com/ From the Front: The Treasure of FrontEnd Island September 21, 2012. Bologna, Italy http://2012.fromthefront.it/ HighEdWeb October 7-10, 2012. Milwaukeee, Wisconsin, U.S.A. http://2012.highedweb.org/ CSS Dev Conference December 5, 2012. Honolulu, Hawaii, U.S.A. http://cssdevconf.com/ +05: JAVASCRIPT. Nested Inheritance in Javascript By Marcos Caceres. "Most examples of javascript inheritance only go one level deep (for example, Student inherits (→) from Person). That's all well and good, but what if you have a long chain for things you want to inherit from?.." http://marcosc.com/2012/04/nested-inheritance-in-javascript/ Conditional Content Based on CSS Media Queries By Chris Coyier. "The content below (loaded via Ajax) is conditional based on the screen width. The media queries are maintained only in the CSS. For the sake of demo, window resizing to certain breakpoints will trigger the conditions again and load new content as appropriate..." http://css-tricks.com/examples/ConditionalCSS/ +06: MISCELLANEOUS. Scott Jehl on the Responsive Boston Globe Site By Bruce Lawson. "Opera's Bruce Lawson talks to Scott Jehl of The Filament Group about developing the highly-regarded and responsive website for The Boston Globe " http://www.netmagazine.com/interviews/scott-jehl-responsive-boston-globe-site Stop the Slippery Slope of Scope Creep By John Tabita. "...Scope creep often starts out as small and seemingly insignificant changes or additions to an already approved design or feature. Sometimes, the changes become so numerous that the project becomes a former shadow of what it was originally intended to be. If you've never read Matthew Inman's comic, How A Web Design Goes Straight To Hell, take a few moments to have a good laugh (or cry), and we'll continue..." http://www.sitepoint.com/stop-the-slippery-slope-of-scope-creep/ Yahoos Doug Crockford On JavaScript By Jacob Cook. "Welcome to the first in a new series of interviews called 'How I Work'. These interviews revolve around how thinkers and creators in the Web world design, code, and create. The goal is not to get into the specific nuances of their craft (as that information already exists online), but rather step back and learn a bit about their habits, philosophies, and workflow for producing great work..." http://coding.smashingmagazine.com/2012/04/27/yahoos-doug-crockford-on-javascript/ Opera - Over Half of Mobile Users Are Mobile-only By Scott Gilbertson. "...There are two lessons for web developers in this report. First, globally, mobile is not the future of the web - it's the now of the web. And second, hiding content on the mobile version of a website means a significant number of users will never see that content at all since they only access sites via a mobile device. Consider your hidden-from-mobile content non-existant content...Naturally every website's audience and needs are different. If your site is U.S.-centric then Opera's report may have very little bearing on your users, but for those who'd like to expand to, or are already serving a global market, clearly making sure your site works well on mobile devices is key..." http://www.webmonkey.com/2012/04/opera-over-half-of-mobile-users-are-mobile-only/ Resizable Displays http://fluid.media.mit.edu/people/juergen/current/flexdisplays.html +07: STANDARDS, GUIDELINES & PATTERNS. HTML5 Accessibility Chops - hidden and aria-hidden By Steve Faulkner. "As a developer and also a consultant advising developers on how to develop accessible content, it is important to have and provide up to date and practical knowledge about robust development techniques. A recent question on Stack Overflow got me thinking: What is the best method for hiding content for all users? For hiding content for some users?.." http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ Learning and Grammatical Forgiveness By Atul Varma. "HTML is a very interesting machine language because, like human languages, most things that interpret it are very forgiving..." http://www.toolness.com/wp/2012/04/learning-and-grammatical-forgiveness/ WHATWG as W3C Community Group in Name Only By Adrian A. Roselli. "As of Monday, April 23, The W3C has announced that it is looking for a new editor for the HTML Working Group specifically tasked with shepherding HTML5 through the process until it reaches a formal recommendation. Ian Hickson (Hixie) made the request for a call for his replacement so he could focus on ongoing HTML development, such as HTML.Next. With that announcement the W3C is also making the following changes..." http://blog.adrianroselli.com/2012/04/whatwg-as-w3c-community-group-in-name.html +08: TYPOGRAPHY. Fighting Bad Typography Research By Alex Poole. "When you hear claims which are radically different from the established body of research, you should rightly be sceptical, especially when they haven't been published in a peer-reviewed scholarly journal. Nevertheless, being sceptical means examining the merits of any research even if it goes against the consensus view..." http://alexpoole.info/fighting-bad-typography-research/ +09: USABILITY. Your edu Website is Too Complicated By Matt Klawitter. "...Success means keeping the choices on a homepage few and strategic, educating and informing the user as they choose, and resisting the temptation to over-build a page. The creative opportunity is to follow these fundamentals while also presenting a beautiful, engaging, and realistic design that enhances the experience - not overpowers it with choice. Quick access to content is obviously important but worthless if the experience does not simultaneously satisfy the user's expectations..." http://mattklawitter.com/2012/04/13/your-edu-website-is-too-complicated/ Fanfare for the Common Breakpoint By Jeremy Keith. "'If we're truly taking a Content First approach then we need to 'Start designing from the content out, rather than the canvas in.' If we begin with some specific canvases (devices), they're always going to be arbitrary. There are so many different screen sizes and ratios out there that it doesn't make sense to favour a handful of them out of tradition. 320, 480, 640...those numbers aren't any more special than any other screen widths." http://adactio.com/journal/5425/ Moore's Law and Responsive Design Breakpoints By Virginia DeBolt. I'm really excited about responsive design. I think it's brilliant and necessary in the current state of web education and web design. But it isn't the last thing that designers need to learn or think about when looking to the future size of web accessible devices. http://www.webteacher.ws/2012/04/27/moores-law-and-responsive-design-breakpoints/ How Useful is Your Website? By Gerry McGovern. "Great websites have a clear function, purpose and use. What does your website help your customers to do?" http://www.gerrymcgovern.com/nt/2012/nt-2012-04-30-Useful-website.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.]