+++ WEB DESIGN UPDATE. - Volume 12, Issue 26, December 19, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 26 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: ASSOCIATIONS. 03: CASCADING STYLE SHEETS. 04: DRUPAL. 05: EVALUATION & TESTING. 06: EVENTS. 07: HTML5. 08: INFORMATION ARCHITECTURE. 09: JAVASCRIPT. 10: MISCELLANEOUS. 11: NAVIGATION. 12: STANDARDS, GUIDELINES & PATTERNS. 13: USABILITY. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Accessible E-Learning By W3C Web Accessibility Initiative. Proceedings from the December 16, 2013 Accessible E-Learning Symposium. http://www.w3.org/WAI/RD/2013/e-learning/#proceedings Text Alternatives for Decorative Images By Julie Grundy. "By default, all images on a web page are announced by screenreader software. As we talked about in our Best Practices post on text alternatives, alt attributes on image elements give you the opportunity to explain their content and purpose to people who can't see them..." http://simplyaccessible.com/bpow/decorative-images/ Create Section 508-Compliant Videos on Your Government Websites By howto.gov. "This guidance was created by an interagency group of 508 experts based upon currently available research..." http://www.howto.gov/social-media/video/508-compliant-video-guide YouTube - Captioning Someone Else's YouTube Videos Using JWPlayer By Art Morgan. "We've had articles about this topic in our CaptionSync Support Center knowledge base for quite awhile, but recently we had a request from our friends at WebAIM to make a publicly available post about the process that could be shared with people who don't have a CaptionSync account..." http://blog.captionsync.com/youtube-captioning-someone-elses-youtube-videos-using-jwplayer/ Accessibility Isn't a Buzzword, It's Personal By Scott Kellum. "Accessibility isn't about screen readers, contrast, or big fonts. Accessibility is about people..." http://scottkellum.com/2013/12/12/accessibility-isnt-a-buzzword.html DOJ Joins Suit Against H&R Block, Saying Website Violates ADA By Andrea Billups. "The Justice Department has announced that it will intervene in a private lawsuit filed against national tax preparation firm H&R Block, saying its website does not allow sufficient access for people with disabilities..." http://www.newsmax.com/US/justice-H-R-Block-ADA-blind/2013/12/11/id/541274 Safeway Web Accessibility Settlement Agreement By Law Office of Lainey Feingold. "This is the settlement agreement about the accessibility of Safeway's online grocery delivery website. The company worked on this initiative in Structured Negotiations with individual customers with visual impairments in California and Washington State. The Safeway shoppers were represented by the Law Office of Lainey Feingold and Linda Dardarian of the Oakland, California civil rights firm Goldstein, Borgen, Dardarian & Ho..." http://lflegal.com/2013/12/safeway-web/ +02: ASSOCIATIONS. International Association of Accessibility Professionals "The mission of the International Association of Accessibility Professionals (IAAP) is to define, promote and improve the accessibility profession globally through networking, education and certification in order to enable the creation of accessible products, content and services." http://accessibilityassociation.org/ +03: CASCADING STYLE SHEETS. Tracking Printed Pages (or How to Validate Assumptions) By Adrian Roselli. " I set about creating a dead-simple technique to track when print styles are called using Google Analytics. I already used Google Analytics' event tracking feature to track what links on my home page are clicked, whether in my footer, in different content areas or in the carousel that graces the bulk of the home page. All I needed was to extend this same process to track print styles..." http://webstandardssherpa.com/reviews/tracking-printed-pages/ Quick Tip - Text Characters as Visual Separators By Karl Groves. "I've been running into these pretty frequently lately so I figured I'd throw something together about it: text characters as visual separators..." http://www.karlgroves.com/2013/12/17/quick-tip-text-characters-as-visual-separators/ What You May Not Know About the Z-Index Property By Steven Bradley. "The z-index property in CSS seems simple enough, but there's a lot to discover beneath the surface if you really want to understand how it works. In this tutorial we'll clarify the inner workings of z-index, by looking at stacking contexts and a few practical examples." http://dev.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892 About Variables in CSS and Abstractions in Web Languages By Chris Coyier. "Variables are coming to CSS. They already have implementations, so there is no stopping it now..." http://css-tricks.com/abstraction-in-web-languages-and-variables-and-stuff/ Learn CSS, Not the Framework By Scott Kellum. "I constantly see people in this industry just dumping styles into their sites with no regard for what those styles are doing and how they actually work. You, the person making the website, need to think critically about what UI pattern is appropriate for your content, what styles reflect the voice of that content, and how that CSS might bloat your stylesheet. You should never have to bend or break the needs of your content to satisfy a framework." http://scottkellum.com/2013/12/11/ui-kit-is-dead.html#learn-css-not-the-framework Happy 17th Birthday CSS By John Allsopp. "CSS1 became a W3C Recommendation (one of the very earliest) on this day (if you're on the appropriate side of the international dateline) back in 1996. 17 years, which is quite a long time in the technology world (it actually predates the W3C's first HTML specification, HTML 3.2 by about 4 weeks). And what a long way it has come..." http://www.webdirections.org/blog/happy-17th-birthday-css/ +04: DRUPAL. Understanding Forms in Drupal By Abbas Suterwala. "Drupal helps you create and process forms right inside your module. The APIs Drupal offers make it very simple to make an addition or modification of your form as the forms are arrays and even the validation and submission happens in a different function. This modular approach keeps the form code in your module clean and easy to maintain. You also do not need to bother with the HTML details of the form if you use the Drupal form API - all the HTML is auto-generated. Have fun creating your next form in your Drupal module" http://www.sitepoint.com/understanding-forms-drupal/ +05: EVALUATION & TESTING. Competitive Usability Evaluations - Learning from Your Competition By Amy Schade. "Data on what works well or poorly on other sites saves you from implementing useless features and guides UX investments to features that your users need." http://www.nngroup.com/articles/competitive-usability-evaluations/ +06: EVENTS. WebVisions New York April 3-4, 2014. New York, New York, U.S.A. http://www.webvisionsevent.com/new-york/ WebVisions Barcelona April 3-4, 2014. Barcelona, Spain http://www.webvisionsevent.com/barcelona/ Accessibility Summit April 4-5, 2014. Washington, D.C., U.S.A. http://accessibilitysummit.org/ The Future Of Web Design April 7-9 2014. London, England, United Kingdom http://futureofwebdesign.com/london-2014/ Web for All Conference April 7-9, 2014. Seoul, South Korea. http://www.w4a.info/2014/ +07: HTML5. HTML5 Form Validation By Ian Oxley. "...In this article we've walked through applying HTML5 form validation to a booking form client-side without using any JavaScript, and pointed out some accessibility issues to be wary of. We then looked at how new CSS3 pseudo-classes can be used to give visual cues to the user as to which fields are required and options, and which contain valid or invalid data. Finally we covered how to disable HTML form validation, and detect whether form validation was available or not in case we have to support browsers that are yet to support this feature..." http://www.sitepoint.com/html5-form-validation/ Subtitles and Captions With WebVTT By Tiffany B. Brown. "One drawback of HTML5 multimedia is accessibility. For hearing impaired users, audio and video content is nearly-useless without an alternative. This is where the track element and WebVTT come in handy..." http://tiffanybbrown.com/2013/12/14/subtitles-and-captions-with-webvtt/ WebVTT Discussions at FOMS By Silvia Pfeiffer. "At the recent FOMS (Foundations of Open Media Software and Standards) Developer Workshop, we had a massive focus on WebVTT and the state of its feature set. You will find links to summaries of the individual discussions in the FOMS Schedule page. Here are some of the key results I went away with..." http://blog.gingertech.net/2013/12/18/webvtt-discussions-at-foms/ +08: INFORMATION ARCHITECTURE. Avoid Category Names That Suck By Hoa Loranger. Categories and hypertext act as signs and should give people a strong indication of what will happen even before they click on the link. People avoid clicking on unknown items or, even worse, ignore them all together. http://www.nngroup.com/articles/category-names-suck/ The Power of Personas By Brad Colbow and Indi Young. "...Personas are a product of a larger process of building something called a Mental Model." http://uxmas.com/2013/the-power-of-personas +09: JAVASCRIPT. Demystifying this in JavaScript By Nicolas Bevacqua. "In this post I want to shed some light on this in JavaScript hopefully bring some clarity to how this works. It's not all dark magic, learning about this can be tremendously helpful to your development as a JavaScript programmer. The inspiration for this post comes from my recent work on the latest chapter for my upcoming book on JavaScript Application Design (note: you can purchase the early access edition now) in which I'm writing about how scoping works..." http://flippinawesome.org/2013/12/09/demystifying-this-in-javascript/ Promises, Promises By Stuart Langridge. "I am not going to explain exactly what promises are, other than to say: they're a way of making your asynchronous code look like it's synchronous, because async code is hard to write, hard to understand, and hard to debug 3. The important point to take away is: you can start using promises now, and hardly anything will change in your code. So you should do that..." http://kryogenix.org/days/2013/12/12/promises-promises ARIA Examples By Heydon Pickering. "Some practical ARIA examples to enhance your application accessibility..." http://heydonworks.com/practical_aria_examples/ ARIA-autocomplete By Rakesh Paladugula. "An aria-autocomplete property is used when the suggestions of user input items are known. The values of the aria-autocomplete can be none, inline, list or both..." http://www.maxability.co.in/2013/12/aria-autocomplete/ +10: MISCELLANEOUS. Responsive Images - The Issues We Want To Solve By Steven Bradley. "...The most significant of the issues revolve around performance. How do we deliver only the most appropriate image without requiring all images be downloaded? Is it ok to deliver multiple images as long we don't leave visitors waiting for content? Are there solutions where the image itself adapts so only a single image is needed..." http://www.vanseodesign.com/web-design/responsive-image-issues/ The Responsive Hover Paradigm By Jenn Lukas. "...There is no one-size-fits-all solution when it comes to hover patterns. Design for your content. If you are providing important information about driving directions or healthcare, you might want to err on the side of designing for touch only. If you are behind an educational site and trying to entice more traffic and sign-ups, or a more immersive e-commerce site selling pies, then hover activity can help support your content and engage your visitors without being a detriment. While content can be our top priority, let's not forget that our designs and interactions, hovers included, can have a great positive impact on how visitors experience our site. Hover wisely, friends." http://24ways.org/2013/the-responsive-hover-paradigm/ +11: NAVIGATION. Web Accessibility - Skip Navigation Links By Andrew Jones. "...One of the most common techniques in web accessibility is the 'Skip Navigation' link, sometimes referred to as 'Skip to Content.' There are a couple of reasons why this feature is used on most accessible websites..." http://blog.bignerdranch.com/4455-web-accessibility-skip-navigation-links/ +12: STANDARDS, GUIDELINES & PATTERNS. Web Standards for Writers By Georgina Laidlaw. "Remember the bad old days of all those 'writing for the web' articles? Now, people writing for the web don't just have other writers to rely on for advice-they have real, live standards to follow! Hooray! Here, I've pulled together some of those standards, and explained why they're useful, and for what kinds of web writing. If you have others to add, we'd love to hear about them too..." http://www.sitepoint.com/web-standards-writers/ +13: USABILITY. The Interface That Gives By Matt Morphett. "...By designing systems that give first and then ask for input subsequently, perhaps we can build the kind of relationship with our users that we hope for with our kids around Christmas time." http://uxmas.com/2013/the-interface-that-gives Collapsible Header Sections - More Problematic Than Helpful By Tom Johnson. "I'm a flip-flopper when it comes to collapsible sections. Sometimes I think they're great, and other times I think they're problematic..." http://idratherbewriting.com/2013/12/11/collapsible-header-sections-more-problematic-than-helpful/ How Not to Throw Out 125 Million Dollars When Creating Applications By W Craig Tomlin. "...By incorporating usability testing and conducting user-centered design as part of your application development process you will ensure your design is user-friendly and successful. Failure to do so risks the potential of your application not being used, which can waste 125 Million Dollars and four years of work. As has been said before, Failure is Not an Option!" http://www.usefulusability.com/how-not-to-throw-out-125-million-dollars/ The Web Content and Web Marketing Dilemma By Gerry McGovern. "Marketing needs to change its obsession with short term thinking about new customers and instead focus on building long term relationships with existing ones. Content professionals need to change their obsession with content and instead become obsessed with the people who need their content." http://www.gerrymcgovern.com/new-thinking/web-content-and-web-marketing-dilemma [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 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.]