+++ WEB DESIGN UPDATE. - Volume 13, Issue 37, March 4, 2015. An email newsletter to distribute news and information about web design and development. ++ISSUE 37 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: BOOKS. 03: CASCADING STYLE SHEETS. 04: COLOR. 05: EVALUATION & TESTING. 06: EVENTS. 07: HTML5. 08: JAVASCRIPT. 09: NAVIGATION. 10: STANDARDS, GUIDELINES & PATTERNS. 11: TOOLS. 12: TYPOGRAPHY. 13: USABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. HTML Image Description Extension (longdesc) is a W3C Recommendation By Shawn Henry. "The HTML5 Image Description Extension (longdesc) has been published as a W3C Recommendation at: http://www.w3.org/TR/html-longdesc This specification ("HTML5-longdesc") enables web authors to provide longer textual descriptions for complex images. HTML5-longdesc is an extension specification that is part of the HTML5 family of specifications. HTML5-longdesc is part of W3C's work to ensure that the Open Web Platform is accessible to people with disabilities..." https://lists.w3.org/Archives/Public/w3c-wai-ig/2015JanMar/0162.html Call for Review: Mobile Accessibility - How WCAG 2.0 and Other W3C/WAI Guidelines Apply By Shawn Henry. "WAI invites you to comment on the First Public Working Draft of "Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile" at: http://www.w3.org/TR/mobile-accessibility-mapping" https://lists.w3.org/Archives/Public/w3c-wai-ig/2015JanMar/0163.html 10 Takeaways from Building Accessible Forms By Deborah Edwards-Onoro. "...Here are my top lessons learned from the webinar..." http://www.lireo.com/10-takeaways-from-building-accessible-forms/ Could Your Company's Videos Get You Sued for ADA Noncompliance? By Deque Systems. "...it means that everyone should be able to understand the videos you produce and make public. Uncaptioned or poorly captioned videos can legitimately put you at risk for legal action...." http://www.deque.com/blog/companys-videos-sued-ada-noncompliance/ 3.1.2 Language of Parts By Rakesh Paladugula. "The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. (Level AA)..." http://www.maxability.co.in/2015/02/3-1-2-language-parts/ Placeholders are not Substitutes for Labels By Pardot. "Labels are captions which inform visitors what information a particular form field is asking for. Placeholders are bits of example content or hints which provide visitors with visual cues to aid in form completion. Labels appear outside of their respective form field, while placeholders appear inside of their respective form field and disappear when visitors click or tab into the field..." https://www.pardot.com/faqs/forms/placeholders-and-labels/ WordPress and Accessibility: Just Where is the Problem? By Joe Dolson. "This morning, I had a conversation that highlighted for me one of the challenges WordPress faces in shaking off the label 'not accessible'. It was a conversation with a large university system that was considering deploying WordPress as a resource for faculty blogs, within the institutional requirements that the site had to comply with WCAG 2.0 at level AA..." https://www.joedolson.com/2015/02/wordpress-accessibility-just-where-is-the-problem/ The Web Accessibility in Higher Education Project By Robert Carr. "The complex problem of ensuring that technology is accessible to people with disabilities touches nearly every aspect of a campus, from course material to enterprise systems for registration and financial aid to public web pages. Solutions to creating an accessible IT environment require a full campus effort. The Web Accessibility in Higher Education Project (WAHEP) works across 25 Oklahoma institutions of higher education to provide resources and help campuses meet these goals. In this process we have learned valuable lessons regarding campus leadership, collaboration, and expectations. These lessons can aid any higher education institution seeking to establish or grow a technology accessibility initiative..." http://www.educause.edu/ero/article/web-accessibility-higher-education-project 4 Hot Issues from 1999, Still Issues on 2015 By David MacDonald. "For over 16 years, web accessibility professionals have had passionate opinions on the best approach to these 4 web accessibility issues..." http://davidmacd.com/blog/csun/accessibility-4-hot-issues.html +02: BOOKS. Cederholm, Dan. CSS3 For Web Designers, A Book Apart, 2015. +03: CASCADING STYLE SHEETS. Quantity Queries for CSS By Heydon Pickering. "...This is your guide to creating style breakpoints for quantities of HTML elements, much as you already do with @media queries for viewport dimensions. I'm not pointing at some blurry specification in the distance or a twinkle in an implementer's eye. We're going to do this today, with CSS that's already available..." http://alistapart.com/article/quantity-queries-for-css Understanding Sass Units By Hugo Giraudel. "I have written about units in Sass in the past for my own blog, and not so long ago as a CSS-Tricks Sass snippet, but given how often I notice confusion and misconception about the way units work in our beloved preprocessor, I thought a full length article would not be such a bad idea after all..." http://www.sitepoint.com/understanding-sass-units/ Sass Basics: Operators By George Martsoukos. "In this article, we'll continue exploring Sass by diving into its operations..." http://www.sitepoint.com/sass-basics-operators/ +04: COLOR. Accessible Interface Design By Adrian Rapp. "On designing with accessible color contrast ratios..." https://medium.com/salesforce-ux/accessible-interface-design-d80e95cbb2c1 +05: EVALUATION & TESTING. Five, Ten, or Twenty-Five, How Many Test Participants? By Ellen Francik. "...The 'magic' number 5 is not magic at all. It depends on assumptions about problem discoverability and has implications for design process and business risk..." http://www.humanfactors.com/newsletters/how_many_test_participants.asp Evangelizing User Research By David Travis. "User experience professionals often complain that design teams fail to take action on the findings from user research. But researchers need to shoulder some of the blame: research reports are often too wordy, arrive too late and fail to engage teams with the data. Dressed-down personas, customer journey maps, photo-ethnographies, affinity diagramming, screenshot forensics and hallway evangelism provide 6 alternatives..." http://www.userfocus.co.uk/articles/evangelising-user-research.html +06: EVENTS. WebAIM Web Accessibility Training May 19-20, 2015. Logan, Utah, U.S.A. http://webaim.org/training +07: HTML5. HTML5 Structural Elements-Non-Sectioning Elements By Steven Bradley. "When should you use an HTML5 header element? How aboout a footer element? Do you use one of each per page or do you add them to sections throughout your content as the spec recommends?" http://www.vanseodesign.com/web-design/html5-non-sectioning-elements/ +08: JAVASCRIPT. Iterables and Iterators in ECMAScript 6 By Axel Rauschmayer. "ECMAScript 6 introduces a new interface for iteration, Iterable. This blog post explains how it works, which language constructs consume data via it (e.g., the new for-of loop) and which sources provide data via it (e.g., arrays)..." http://www.2ality.com/2015/02/es6-iteration.html Single Page Applications, Angular.js and Accessibility By Gavin Ogston. "Developers face pretty specific challenges when creating a highly accessible single page application (SPA) user experience. This in-depth tutorial outlines some best practices and accessibility challenges common to SPAs (and specifically Angular apps) so you can build an SPA that works for everyone..." http://simplyaccessible.com/article/spangular-accessibility/ No Promises - Asynchronous JavaScript with Only Generators By Axel Rauschmayer. "Two ECMAScript 6 features enable an intriguing new style of asynchronous JavaScript code: promises and generators. This blog post explains this new style and presents a way of using it without promises..." http://www.2ality.com/2015/03/no-promises.html +09: NAVIGATION. A Skip Link Primer By Jeremy Fields. "Of all the accessibility enhancements that can be made to a page, adding a "skip to content" link is one of the easier wins. These links allow keyboard-only (non-mouse) users to quickly jump to the page's main content or other important sections..." http://viget.com/inspire/skip-link-primer Kill The Hamburger Button By Josh Constine. "That little three-lined button is the devil. Whether you call it a side menu, navigation drawer, or a hamburger, hiding your features off-screen behind a nondescript icon in the corner is usually a poor mobile design choice. Interaction theory, A/B tests, and the evolution of some of the top apps in the world all support the same thesis: The hamburger button is bad for engagement, and you should probably replace it with a tab bar or other navigation scheme..." http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/ +10: STANDARDS, GUIDELINES & PATTERNS. Stopping the Infighting About Digital Standards By Lisa Welchman. "Organizations that struggle with their digital presence often do so because they haven’t established proper governance. But good governance is worth pursuing: clear policies and processes can answer questions, empower teams, and enable web strategies to shine. In this excerpt from Chapter 5 of Managing Chaos, Lisa Welchman explains the importance of digital standards-what they are, why they matter for governance, and how to start documenting them for your stakeholders..." http://alistapart.com/article/stopping-the-infighting-about-digital-standards +11: TOOLS. Color Safe By Donielle Berg and Adrian Rapp. "Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios..." http://colorsafe.co/ +12: TYPOGRAPHY. The State of Web Type By Bram Stein. "Typography has a long and rich history, but much has been lost in the transition to the web. While browser support for typography has never been better, we still have a long way to go. Features many print designers take for granted are either nonexistent on the web or have insufficient browser support in order to be useful. Some of the features that are unique to web browsers such as responsive design and web fonts could use some improvement as well. Let's take a look at some of the features we need for an optimal (and beautiful) reading experience..." https://dev.opera.com/articles/state-of-web-type/ +13: USABILITY. 3 Rules Of App Design, According To Yahoo's Marissa Mayer By Marissa May. "The ex-Googler and current Yahoo CEO spells out three rules anyone can use to make an app better..." http://www.fastcodesign.com/3041374/3-rules-of-app-design-according-to-yahoos-marissa-mayer The Paradox of Empathy By Scott Jenson. "If I'm ever asked what's most important in UX design, I always reply 'empathy'. It's the core meta attribute, the driver that motivates everything else. Empathy encourages you to understand who uses your product, forces you ask deeper questions and motivates the many redesigns you go through to get a product right..." http://jenson.org/paradox/ Multitasking on Mobile Devices By Raluca Budiu. "Multitasking involves being able to rapidly switch between different apps and to combine multiple sources of information. Small mobile screens limit users' ability to see content from different apps at the same time, so current operating-system support for multitasking focuses mostly on switching between different apps. This increases users' memory load, so mobile designers must help users compare and rapidly retrieve recent items." http://www.nngroup.com/articles/multitasking-mobile/ Future Proofing Tomorrow's Technology: UX for an Aging Population By Christopher Wilkinson and Dhaval Gandhi. "...We conducted a systematic review of the research literature, and based on what we learned, we created a framework to organize the issues that directly affect the use and adoption of technology by older users. It is a concise and simple tool, easy to apply across numerous products to aid design thinking and evaluation from an older person's perspective..." http://uxpamagazine.org/future-proofing-tomorrows-technology/ [Section one ends.] ++ SECTION TWO: +14: 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.]