+++ WEB DESIGN UPDATE. - Volume 13, Issue 19, November 6, 2014. 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: HTML5. 05: INFORMATION ARCHITECTURE. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: STANDARDS, GUIDELINES & PATTERNS. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Re: A11y is Hard By Sina Bahram. "...Here is the accessibility email I sent @37signals, responding to '#a11y is hard'...it's important to realize that we should be realistic about the amount of effort required, and realize that the basics are just minutes to hours away. For your level of scale and size, this is a minimal cost so small as to be hard to even accurately measure. This is putting aside the fact that it's A.) the right thing to do, B.) the act of following proper coding practices per any standard you wish to measure against, and C.) has many emergent beneficial effects. I hope the level of accessibility of basecamp can improve soon, and I hope this message shows you that it's not a huge complex technical undertaking to get the basics right." http://twishort.com/KuNgc ARIA Quicktip - Labelledby vs. Describedby By Aaron Gustafson. "...at least in terms of form fields, they differ in when they are read. The aria-labelledby attribute replaces the associated label element (which is, of course, associated with the field via the label's for attribute). The aria-describedby attribute, on the other hand, is read after the field type is stated..." http://aaron-gustafson.com/notebook/2014/aria-quicktip-labelledby-vs-describedby/ Accessible Media Player Resources and Demos By Henny Swan. "Below are a few resources around media player accessibility. With so many of us embedding multimedia content in our sites and apps it's key that we think about not just the accessibility of the player but also alternative formats, the user journey to the player and onward journeys from the player." http://www.iheni.com/accessible-media-player-resources/ Blind Woman Gisele Mesnage Sues Coles Over Online Shopping Website By Rachel Browne. "Coles is facing a landmark claim following an allegation the supermarket giant's website does not provide adequately for visually impaired shoppers..." http://www.smh.com.au/digital-life/digital-life-news/blind-woman-gisele-mesnage-sues-coles-over-online-shopping-website-20141105-11h6zw.html @longdesc Moves Toward W3C Recommendation By Geoff Freed. "...This week the W3C resolved a formal objection to the HTML5 Image Description Extension (also known as the longdesc extension to HTML5), clearing the way for the document to continue moving toward a full W3C recommendation...The W3C's decision and, eventually, approval of the extension as a formal recommendation will give authors full support for using longdesc as one method among several to provide detailed image descriptions..." http://blog.diagramcenter.org/?p=1713 Perspectives on Accessibility Series - Instructional Designers in Higher Education (Video) By George Mason University. Kathleen Bastedo, Karla Kmetz, and Maureen Madden were presenters for this Webinar now archived on YouTube. https://www.youtube.com/watch?v=lfyhvvuGCQY PDF Slides: http://ati.gmu.edu/wp-content/uploads/@AccessibleMason-Webinar_102214_IDs-in-Higher-Ed.pdf +02: CASCADING STYLE SHEETS. Floated Labels Still Suck By Dennis Lembree. "...Please don't use 'floated labels' or 'labels as placeholders' technique; it can break the user experience for a large variety of reasons. Use the label element and placeholder attribute as intended. Use CSS to ensure placeholder text has adequate color contrast." http://www.webaxe.org/floated-labels-still-suck/ The Specificity Graph By Harry Roberts. "As we all (should) probably know by now, specificity is is one of CSS' most troublesome features, and is an area that soon becomes hard to manage on projects of any reasonable size. Specificity is a trait best avoided, which is why we don't use IDs in CSS, and we don't nest selectors unless absolutely necessary..." http://csswizardry.com/2014/10/the-specificity-graph/ Mastering the :nth-child By nthmaster. "Using :nth-child" http://nthmaster.com/ Linear Gradient Problems in Chrome By Adrian Roselli. "I'm going to tell you up front that I don't have a fix for the issue I am raising, though there are bugs filed against it..." http://blog.adrianroselli.com/2014/10/linear-gradient-problems-in-chrome.html Using Clearfix to Clear Floats in a Layout By Virginia DeBolt. "First, let's review some of the older methods of clearing floats in a layout. In a CSS layout with two or more columns, there is generally some use of float to create the column structure. For the layout to include a footer at the bottom of the page, those floats need to be cleared." http://www.webteacher.ws/2014/10/31/using-clearfix-clear-floats/ Notes on Draft CSS 'alt' Property By Bruce Lawson. "A while ago, there was discussion in CSS Working Group about an alt property to be added to CSS. Its purpose is to let assistive technology know the meaning of unicode characters inserted into a visual rendering of a document with CSS generated content. The problem is described by James Craig, Apple's nice accessibility chappie." http://www.brucelawson.co.uk/2014/notes-on-draft-css-alt-property/ Re: [css-pseudo] Please Make Sure Pseudo-Element "alt" Property Makes it into Next ED By Elika Etemad (fantasai). "...The first *major* problem with 'alt' is that it cascades poorly. The information you're trying to cascade there needs to be tied to the information specified for 'content'. Since it's a separate property, it will cascade independently, and likely the next style rule with 'content' will neglect to specify 'alt', leading to a mismatch between 'alt' and 'content'. The second problem is that we already have solutions to this problem that don't require an extra property..." http://lists.w3.org/Archives/Public/www-style/2014Nov/0046.html +03: EVALUATION & TESTING. How To Run User Tests at a Conference By Daniel Sauble. "User testing is hard. In the world of agile software development, there's a constant pressure to iterate, iterate, iterate. It's difficult enough to find time to design, let alone get regular feedback from real users..." http://www.smashingmagazine.com/2014/11/05/how-to-run-user-tests-at-a-conference/ 60 Ways to Understand User Needs That Aren't Focus Groups or Surveys By David Travis. "People new to user research often think of surveys and focus groups as the main ways to get insights into customer needs. Here are 60 alternative ideas you might want to try..." http://www.userfocus.co.uk/articles/60-ways-to-understand-user-needs.html +04: HTML5. HTML Modularisation By Sam Ruby and Robin Berjon. Sam and Robin's presentation slides to the W3C Advisory Committee on October 30, 2014. http://www.w3.org/2014/10/modularity-slides/ HTML5 and the W3C Recommendation Ruckus By Craig Buckler. "...Vendors always have ultimate control. Features are not guaranteed to be implemented, usable or consistent just because they appear in a W3C document. Fortunately, while Google, Apple, Microsoft, Mozilla, and Opera are competitors, the process encourages interoperability because it's impractical for developers to adopt an unstable HTML5 technology. If we don't use it, there was little point in the vendor creating the feature in the first place..." http://www.sitepoint.com/html5-w3c-recommendation-ruckus/ +05: INFORMATION ARCHITECTURE. What You Know About Information Architecture, Might Not Be True By Paul Boag. "We all think we understand information architecture. Yet, it is a specialist area and the things we think we know may not be correct." http://boagworld.com/usability/think-know-information-architecture-might-true/ +06: JAVASCRIPT. Just What is it That You Want To Do? By Jeremy Keith. "...progressive enhancement is not about offering all functionality; progressive enhancement is about making sure that your core functionality is available to everyone. Everything after that is, well, an enhancement (the clue is in the name)...." https://adactio.com/journal/7774 +07: MISCELLANEOUS. Responsive Images in Practice By Eric Portis. "When we design responsively, our content elegantly and efficiently flows into any device. All of our content, that is, except images. For years, we've catered to users with the highest-resolution screens by sending giant images to everyone. No longer. Eric Portis takes us through the new picture element and other attributes to let us mark up multiple, alternate sources. Find out how to use responsive images now: send the best image for each context, cut down on page weight, and speed up performance." http://alistapart.com/article/responsive-images-in-practice Why Responsive Images Matter By Mat Marquis. "For the first few years of my career I'd joke that I 'type for a living.' That was selling myself short, though, I know-making websites is a complicated gig. It's more accurate, I think, to say that I'm wrong for a living. I've been wrong about damn near everything about this job so far. I'm probably-no, definitely-wrong about plenty of things, as we speak..." http://alistapart.com/blog/post/why-responsive-images-matter Learn to Do It Yourself By Adrian Roselli. "Often when I identify a valid technical (typically accessibility) issue with a site, tool, or library and get a response of 'just make a pull request,' I am thrown into an apoplectic fit for which I have to apologize to my co-workers (or people at the random coffee shop or airport)..." http://blog.adrianroselli.com/2014/11/learn-to-do-it-yourself.html +08: STANDARDS, GUIDELINES & PATTERNS. Tim's Dream for the Web By Timothy Chien. "Even before I get myself this username (timdream) and polluted the search result, search result of that term will give you a link to on LogicError, appropriated titled 'Tim's Dream for the Web'. That 'Tim' was Sir Tim Berners-Lee, and he imagines the Web to be the powerful means for collaboration between not only people, but machines..." http://blog.timc.idv.tw/posts/tims-dream-for-the-web/ W3C TPAC 2014 - Notes and Souvenirs By Steve Faulkner. "Leonie Watson and I attended the W3C Technical Plenary (TPAC) last week. It was a big one; including W3C's 20th anniversary and HTML5 became a W3C Recommendation. I have collated some links and tweets capturing some of my memories of last week at W3C TPAC 2014..." http://www.paciellogroup.com/blog/2014/11/w3c-tpac-2014-notes-and-souvenirs/ +09: USABILITY. Customer Satisfaction is Not a Good Indicator of Customer Behavior By Gerry McGovern. "People are very bad at telling you what they do or why they do it..." http://www.gerrymcgovern.com/new-thinking/customer-satisfaction-not-good-indicator-customer-behavior Shopping Online for an iPhone Plan Is Painful By Katie Sherwin. "The experience of researching and purchasing a mobile plan online is marred by hard-to-access cost information, site-specific jargon, and disruptive pop-ups." http://www.nngroup.com/articles/phone-plan-ux/ Form Usability - Getting 'Address Line 2' Right By Christian Holst. "While 'Address Line 2' may seem like an insignificant aspect of an e-commerce design or overall form design, we have observed this form field to be the cause of bewilderment and uncertainty for users during both our checkout usability and mobile e-commerce research studies..." http://baymard.com/blog/address-line-2 Reward My Actions, Please? By Christian Heilmann. "You don't lose users because you don't tell them enough about other cool features you have. You lose them because you confuse them. Reward my actions and we can work together!.." http://christianheilmann.com/2014/11/03/reward-my-actions-please/ [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 Drupal Information. http://www.d.umn.edu/itss/training/online/webdesign/drupal.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 HTML Information. http://www.d.umn.edu/itss/training/online/webdesign/html.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.]