+++ WEB DESIGN UPDATE. - Volume 10, Issue 32, February 2, 2012. An email newsletter to distribute news and information about web design and development. ++ISSUE 32 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: EVENTS. 04: INFORMATION ARCHITECTURE. 05: JAVASCRIPT. 06: MISCELLANEOUS. 07: NAVIGATION. 08: STANDARDS, GUIDELINES & PATTERNS. 09: TOOLS. 10: USABILITY. 11: XML. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Before and After Demonstration (BAD) By W3C WAI Education and Outreach Working Group (EOWG). "The Before and After Demonstration is a multi-page resource that shows an inaccessible website and a retrofitted version of this same website. Each web page includes inline annotations that can be activated to highlight some of the key accessibility barriers or repairs. Each web page is also accompanied by an evaluation report to inform the developers on the level of conformance to the Web Content Accessibility Guidelines (WCAG)..." http://www.w3.org/WAI/demos/bad/ Did We Lose Track of the Big Picture? By Thierry Koblentz. "It seems to me that we are slowly switching from publishing content for the Web, to making content accessible to Screen-Readers (SR) - from targeting users, to focusing on devices and modern browsers. We write about new techniques without considering fall back mechanisms, we use ARIA 'hacks' that look like anti-patterns and we use frameworks that have chosen to ignore old IE..." http://www.css-101.org/articles/the_power_of_the_web_is_in_its_universality/strive_to_make_content_accessible_to_all.php Chasing the Accessibility Business Case - Conclusion By Karl Groves. "...Despite all I've said in all of these posts, the only thing I think has real, true data regarding actual money having been saved/ lost is legal risk in the United States. Yeah, the support-for-low-bandwidth-users thing is compelling, but finding hard data showing that accessibility plays a large role in solving that problem is impossible. Furthermore, if pushed, I could demonstrate that accessibility causes more bandwidth usage. But I have a question for all those who continually want to go down the business case path to prove a value to accessibility: What's wrong with just doing a good job?..." http://www.karlgroves.com/2012/01/27/chasing-the-accessibility-business-case-conclusion/ WCAG Next By Jared Smith. "...we present here some possible changes and improvements to WCAG 2.0, and items that we hope might help you better understand and implement optimal accessibility..." http://webaim.org/blog/wcag-next/ RNIB Serves Legal Proceedings on bmibaby By Royal National Institute of Blind People. "Leading sight loss charity the Royal National Institute of Blind People (RNIB) is taking legal action over low cost airline bmibaby's failure to ensure web access for blind and partially sighted customers..." http://www.rnib.org.uk/aboutus/mediacentre/mediareleases/mediareleases2012/Pages/pressrelease27Jan2012.aspx +02: CASCADING STYLE SHEETS. New CSS3 Properties to Handle Text and Word Wrapping By Louis Lazaris. "...The word-wrap property has been removed from the CSS3 spec and other related properties have been added..." http://www.impressivewebs.com/new-css3-text-wrap/ Bulletproof Web Design: Creative Floating By Dan Cederholm. "The creative use of the float property can give grid-like results, with a fraction of the code we'd need with the nested-tables approach. By paring down the markup to its barest essentials, you make it easier for browsers, software, and all devices to read your content, at the same time making it easier for other designers and developers to modify and edit these components." http://www.peachpit.com/articles/article.aspx?p=1815998 How to Put Your CSS3 on :target By Craig Buckler. "...CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in interactive widgets. Consider a page URL such as http://mysite.com/page#mytarget; an element with the id 'mytarget' can have matching :target styles applied..." http://www.sitepoint.com/css3-target-selector/ * { box-sizing: border-box } FTW By Paul Irish. "One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand..." http://paulirish.com/2012/box-sizing-border-box-ftw/ +03: EVENTS. SMPTE Timed Text (Webcast) February 23, 2012 at 1:00 PM (ET). Online. http://smptepda16feb2012-estw.eventbrite.com/ Fluent 2012 - JavaScript and Beyond May 29-31, 2012. San Francisco, California, U.S.A. http://fluentconf.com/fluent2012 An Event Apart Chicago August 27-29, 2012. Chicago, Illinois, U.S.A. http://aneventapart.com/2012/chicago/ +04: INFORMATION ARCHITECTURE. Wireframing for Responsive Design By Leigh Howells. "I'm conscious that some people in the web industry, including myself(!) may be getting tired of hearing the word 'responsive' in everything they read. We shouldn't be, because I don't think it's going to change any time soon (not until the next big web paradigm shift at least) and mobile will only become more important as time goes on and the device numbers grow and they technology evolves. Get used to it. We, the content designers, have to be just as responsive as the interfaces we create, adapting to change as it happens. To do this we need to learn to think differently. http://boagworld.com/design/wireframing-for-responsive-design/ +05: JAVASCRIPT. Nesting ARIA Roles By Bruce Lawson. "A couple of people have asked me recently if it's possible to nest ARIA roles. The answer: yes..." http://www.brucelawson.co.uk/2012/nesting-aria-roles/ +06: MISCELLANEOUS. Responsive Web Design By Katrien De Graeve. "...Instead of responding to today's needs for a desktop web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen..." http://www.sitepoint.com/responsive-web-design/ Responsive Images: How they Almost Worked and What We Need By Mat Marquis. "With a mobile-first responsive design approach, if any part of the process breaks down, your user can still receive a representative image and avoid an unnecessarily large request on a device that may have limited bandwidth. But with several newer browsers implementing an 'image prefetching' feature that allows images to be fetched before parsing the document's body, some of the web's brightest developers are abandoning responsive images in favor of user agent detection, at least as a temporary solution. For us standardistas, UA detection leaves a bad taste in the mouth. More importantly, as the number and kinds of devices continue to grow, UA detection will quickly become untenable-just as browser detection did back in the bad old days before web standards. What's really needed, argues Mat Marquis, is a new markup element that works the way the HTML5 video element works. Sound crazy? So crazy it just might work." http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/ Adaptive Images in Responsive Web Design By Christopher Schmitt. "...wherein lies the problem: knowing the value of one item, like screen resolution, doesn't mean you get the full picture of the user's browser experience..." http://www.christopherschmitt.com/2012/01/31/adaptive-images-in-responsive-web-design/ +07: NAVIGATION. Why Audience Navigation Usually Doesn't Work By Gerry McGovern. "Links cause most problems when they overlap and audience based links are particularly problematic." http://www.gerrymcgovern.com/nt/2012/nt-2012-01-30-Why-doesn%27t.htm +08: STANDARDS, GUIDELINES & PATTERNS. Browser Support for New HTML5 Structural Elements By Virginia DeBolt. "The new structural elements in HTML5 include section, article, aside, hgroup, header, footer, nav, figure, figcaption, time, and mark..." http://www.webteacher.ws/2012/01/27/browser-support-for-new-html5-structural-elements/ The State Of HTML5 Video By Long Tail Video. "HTML5 has entered the online video market, which is both exciting and challenging for developers in the industry. With both the HTML5 specification and the various browser implementations in constant flux, we at LongTail Video spend a signficant amount of time understanding the limitations of the technology, testing playback across various browsers and devices, and optimizing our own products for HTML5 playback..." http://www.longtailvideo.com/html5/ The Best of