+++ WEB DESIGN UPDATE. - Volume 10, Issue 19, November 4, 2011. An email newsletter to distribute news and information about web design and development. ++ISSUE 19 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: PHP. 07: STANDARDS, GUIDELINES & PATTERNS. 08: TOOLS. 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. The Hidden Nuggets of WCAG2 - Information Relationships By Gian Wild. "The Information and Relationships Success Criterion is a very complex requirement. Unlike other success criterion, it is not sufficient to comply with only one or two of the listed techniques Ð it is important to comply with all the relevant techniques. This means that this success criterion covers a wide range of requirements Ð in fact it covers many WCAG1 checkpoints, such as table headers, headings, coding lists etc." http://www.sitepoint.com/the-hidden-nuggets-of-wcag2-information-relationships/ Measuring Accessibility By Roger Hudson. There has been much discussion, and some arguments, about how to determine the accessibility of websites. Unfortunately, this is often polarised around two simplistic choices: A compliance/conformance based approach that usually involves a checklist of criteria; or, some form of user testing by people who have different disabilities and/or who rely on different assistive technologies. Both approaches have their strength and limitations, and neither can provide a reliable declaration about the accessibility of a site on its own. http://www.dingoaccess.com/accessibility/measuring-accessibility/ Design with Accessibility in Mind By Glenda Sims. "I'm often asked to create the business case for building accessibility in to your web process. Most organizations are very responsive when I explain the benefits of universal design, the crossover between accessibility and usability, as well as accessibility and mobile design. By the time I explain the search engine optimization benefits, they are often salivating and ready to commit to accessibility. But, what happens when I'm working with a company that is inaccessible but already has decent SEO? I remind them that the litigation risks are real and the cost of retrofitting for accessibility is significantly higher than designing with accessibility in mind from the beginning. The thoughts I want etched into their minds are..." http://www.glendathegood.com/blog/?p=623 Assistive Technology Experiment: Dragon NaturallySpeaking By Jon Whiting. "This is a continuation of a series of posts about my personal quest to learn more about some common assistive technologies. In my first post, I outlined my experiences with ZoomText. Since then, I have become more familiar with the speech recognition software Dragon NaturallySpeaking (Premium) by Nuance..." http://webaim.org/blog/at-experiment-dragon/ +02: CASCADING STYLE SHEETS. CSS Media Queries on @import Rules By Phil Archer. "This page applies CSS Media Queries to an @import rule. It's designed to show how you can conditionally import a stylesheet based, in this case, on viewport width. Desktop browsers ignore any viewport declaration so that the viewport is whatever the actual width of the browser window is - and that's something you can easily change to see how this works..." http://philarcher.org/diary/2011/importrules/ A Case Study in Responsive Design By Dan Sheerman. "Over the last couple of days, I've had the task of taking the Boagworld site and implementing all its responsive goodness. We went live quietly, so you will now be able to resize this very post as you're reading it..." http://boagworld.com/dev/a-case-study-in-responsive-design/ CSS Borders: The Basics And Rounded Corners By Steven Bradley. "Last week I walked through the css background property. The other half of the same W3C spec covers borders and so today I want to begin a walk though of css borders..." http://www.vanseodesign.com/css/borders-rounded-corners/ Demystifing Nth-Child in CSS By Neal Grosskopf. "I'm not going to lie, using nth-child has always made my brain hurt when using it in CSS. Maybe it's the fact that math is involved and for the most part, I can avoid math in most other areas of CSS except this. I'm certainly not the first person to take a crack at explaining it but I thought I'd give it a try..." http://www.nealgrosskopf.com/tech/thread.php?pid=80 A Call for ::nth-everything By Chris Coyier. "With CSS3, we have positional pseudo class selectors to help us select specific elements when there are no other distinguishing characteristics other than where it is in the DOM in relation to it's siblings.." http://css-tricks.com/14771-a-call-for-nth-everything/ +03: EVALUATION & TESTING. Measuring Usefulness By Jeff Sauro. "...it doesn't matter how easy to use a product is if people don't find it useful. Usefulness is the holy-grail of product design, it's often even more important than revenue (think YouTube). How can we predict what people will use?..." http://www.measuringusability.com/blog/usefulness.php +04: EVENTS. Accessible Forms November 14 - December 6, 2011. Online Course http://courses.cita.uiuc.edu/formsonline/ WebAIM Training March 28-29, 2012. Logan, Utah, U.S.A. http://webaim.org/training/ +05: JAVASCRIPT. Get Started with JavaScript By IBM. "Get a foundational understanding of the JavaScript language. Learn the basics of working with JavaScript, and understand the libraries you can use in development. Then use the practice exercise to explore basic JavaScript concepts such as creating variables, using operators, defining and accessing arrays, writing conditional statements, structuring functions, and using loops..." http://www.ibm.com/developerworks/training/kp/wa-kp-getstartedjs/index.html Expanding Text Areas Made Elegant By Tim Murtaugh. An expanding text area is a mutli-line text input field that expands in height to fit its contents. Commonly found in both desktop and mobile applications, such as the SMS composition field on the iPhone, it's a good choice when you don't know how much text the user will write and you want to keep the layout compact; as such, it's especially useful on interfaces targeted at smartphones. Yet despite the ubiquity of this control, there's no way to create it using only HTML and CSS, and most JavaScript solutions have suffered from guesswork, inaccuracy, or a lack of elegance...until now..." http://www.alistapart.com/articles/expanding-text-areas-made-elegant/ Why a WAI-ARIA Developer Portal is Important By Aaron Leventhal. "Making dynamic web content accessible is a huge challenge. WAI-ARIA is the best available solution today. It's supported in all major browsers and enables almost any dynamic content to be made accessible - that's great. Accessibility is really important. But man oh man, understanding WAI-ARIA is not easy for developers, who aren't always born as accessibility experts..." http://accessgarage.wordpress.com/2011/11/01/324/ +06: PHP. Using the Ternary Operator By Amanda Steigerwalt. "You're probably already familiar with PHP's if statement. It's very similar to its counterparts in many other programming languages and represents one of the most fundamental concepts in programming. The if statement is easy to understand and easy to master...But there's a way to build on this concept.." http://phpmaster.com/using-the-ternary-operator/ +07: STANDARDS, GUIDELINES & PATTERNS. HTML5 or XHTML? Polyglot Documents Mean You Don't Have To Choose By Phil Archer. "...Converting an XHTML document into a polyglot document is easy. By following a few relatively simple rules - some of which actively encourage good practice - your markup can be parsed as either XML or HTML5. Add in an HTML5 shiv (I use the one created by Remy Sharp) and you're good to go with a document that is very likely to work as you'd expect in just about any browser." http://philarcher.org/diary/2011/polyglot/ Working With HTML5 Multimedia Components - Part 1, Video By Ian Devlin. "This tutorial introduces you to the video element, its attributes, and the different types of video that can be used with it. It is the first tutorial in a three-part series that covers the video element, the audio element, and custom controls for working with both elements..." http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt1.html Working with HTML5 Multimedia Components - Part 2, Audio By Ian Devlin. "In Part 1 of this three-part series on working with HTML5 multimedia components, I focused on embedding video in web pages using HTML5. Of course, most videos include audio, and if you want to embed audio files into your web pages you can achieve this with HTML5 just as easily." http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt2.html HTML5 Kills