+++ WEB DESIGN UPDATE. - Volume 13, Issue 13, September 25, 2014. An email newsletter to distribute news and information about web design and development. ++ISSUE 13 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: HTML5. 05: INFORMATION ARCHITECTURE. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 09: TYPOGRAPHY. 10: USABILITY. SECTION TWO: 11: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Introducing an Accessible HTML5 Video Player By Dennis Lembree. "It's time we make video on the web quick and easy to implement with accessibility in mind, not plugins. The Accessible HTML5 Video Player project helps make this happen. HTML5 video is well on it's way to being the global solution for web-based video, but at least for now, not without several browser support and rendering issues remaining." https://www.paypal-engineering.com/2014/09/05/introducing-an-accessible-html5-video-player/ The Form Field Validation Trick They Don't Want You to Know By Karl Groves. "Because so many things require string manipulation most, if not all, programming languages have some mechanism of finding, substituting, or removing sub-strings, often through the use of Regular Expressions. Here are some examples, shamelessly stolen from Code Codex.." http://www.karlgroves.com/2014/09/17/the-form-field-validation-trick-they-dont-want-you-to-know/ Carousel Concepts By W3C WAI Education and Outreach Working Group. A first draft of the Carousels tutorial. https://w3c.github.io/wai-tutorials/carousels/ Twitter Writes a Post About role=presentation By Virginia DeBolt. "There is an ARIA role called 'presentation' in the WAI ARIA spec. With Twitter's help, Denis Boudreau wrote this post about it..." http://www.webteacher.ws/2014/09/22/twitter-writes-post-rolepresentation Understanding Screen Reader Interaction Modes By Leonie Watson. "Windows screen readers have multiple modes of interaction, and depending on the task being carried out they'll automatically switch to the most appropriate mode. This post explains why Windows screen readers behave the way they do, and how your code can influence that behaviour...." http://tink.co.uk/2014/09/understanding-screen-reader-interaction-modes/ HTML Lists and Accessibility By Rakesh Paladugula. "A list is used for presenting one or more similar items. HTML markup have 3 different types of lists used by authors depending on the type of items they hold. The three different types of HTML lists are explained in detailed later in this article..." http://www.maxability.co.in/2014/09/html-lists-accessibility/ PDF Accessibility Starts with the Author By Matt May. "...for authors, the rules don't change. We have lots of tools and tips on how to create accessible PDF documents that can be used by people of all kinds of abilities and preferences, and it's still our responsibility to use them." http://blogs.adobe.com/accessibility/2014/09/pdf-accessibility-starts-with-the-author.html Fight Over Digital Accessibility By Michael Stratford. "Advocates for students with disabilities and groups representing colleges and universities are sparring over federal legislation that would set new standards for accessible technology on campuses..." https://www.insidehighered.com/news/2014/09/19/higher-ed-associations-disability-rights-groups-clash-over-campus-technology The TEACH Act - A Need for Clarification By AHEAD. "Regarding the Opposition to the proposed TEACH Act Legislation..." http://ahead.org/teach_act_clarification_letter +02: CASCADING STYLE SHEETS. Getting Started with CSS Shapes By Razvan Caliman. "For a long time, web designers have been forced to create within the constraints of the rectangle. Most content on the web is still trapped in simple boxes because most creative ventures into non-rectangular layout end in frustration. That is about to change with the introduction of CSS Shapes, available starting with Chrome 37..." http://www.html5rocks.com/en/tutorials/shapes/getting-started/ +03: EVENTS. Programming Mobile Web Apps September 29, 2014 Start Date. Online. http://www.w3devcampus.com/writing-great-web-applications-for-mobile/ Accessible Way-Finding Using Web Technologies October 20, 2014 Call for Papers. December 3, 2014 Online Symposium. http://www.w3.org/WAI/RD/2014/way-finding/ The Future of the Web October 29, 2014. Santa Clara, California, U.S.A. http://www.w3.org/20/ +04: HTML5. Easy HTML5 Video By easyhtml5video. "Easy HTML5 Video is a free wizard program that helps you create HTML5 video for your website in a few clicks." http://easyhtml5video.com/ Don't Use (most of the time) By Jason Grigsby. "...The picture specification contains more than just the element. Think of it as the responsive images specification. For most responsive images, you shouldn't use the element. You should use srcset and/or sizes. The way to know when to use the element is based on the use case you're trying to solve. If you're solving for the art direction use case, use the element. Anything else, you should stick to srcset and sizes. Getting this right early, before we have thousands of pages using incorrectly, is critical for the future of the web..." http://blog.cloudfour.com/dont-use-picture-most-of-the-time/ +05: INFORMATION ARCHITECTURE. How to Create a Customer Journey Map By Megan Grocki. "...A Customer Journey map is a visual or graphic interpretation of the overall story from an individual's perspective of their relationship with an organization, service, product or brand, over time and across channels...." http://uxmastery.com/how-to-create-a-customer-journey-map/ +06: JAVASCRIPT. ECMAScript 6 Promises (1/2) - Foundations By Axel Rauschmayer. "This blog post is first in a series of two blog posts on ECMAScript 6 promises. It explains the foundations of asynchronous programming in JavaScript, to prepare you for part two, which covers the promise API." http://www.2ality.com/2014/09/es6-promises-foundations.html A Fundamental Disconnect By Aaron Gustafson. "The history of the Web is littered with JavaScript disaster stories. That doesn't mean we shouldn't use JavaScript or that it's inherently bad. It simply means we need to be smarter about our approach to JavaScript and build robust experiences that allow users to do what they need to do even quickly an easily even if our carefully-crafted, incredibly well-designed JavaScript-driven interface won't run." http://aaron-gustafson.com/notebook/2014/a-fundamental-disconnect/ Preparing for ECMAScript 6 - New Array Methods By Aurelio De Rosa. "..In this article we'll discuss most of the new methods available in ECMAScript 6 that work with the Array type..." http://www.sitepoint.com/preparing-ecmascript-6-new-array-methods/ +07: MISCELLANEOUS. On Net Neutrality By Jens Meiert. "We need net neutrality, and we need to insist on net neutrality..." http://meiert.com/en/blog/20140917/on-net-neutrality/ Adapting to the Digital Future - The Senior Management Challenge By Gerry McGovern. "...If we want senior managers to change then we, as web professionals, must become the voice of our customers. If there is one thing that can get senior management to change today it is the increasing dissatisfaction and disloyalty of their customers." http://gerrymcgovern.com/new-thinking/adapting-digital-future-senior-management-challenge 10 Years Ago - TOevolt By Adrian Roselli. "...Workers of the web (gone by), evolt!" http://blog.adrianroselli.com/2014/09/10-years-ago-toevolt.html +08: NAVIGATION. Video - How to Decide on Mobile Navigation By Luke Wroblewski. "While every application and Web site has at least some form of navigation, everyone's is a bit different. So when all these services make their way to mobile, they need a way to determine if their navigation systems are working well. In this short 5 minute video, I look at few ways we can evaluate mobile navigation solutions..." http://www.lukew.com/ff/entry.asp?1925 Efficiently Simplifying Navigation, Part 3 - Interaction Design By Anastasios Karafillis. "When designing interaction with any type of navigation menu, we have to consider the following six aspects..." http://www.smashingmagazine.com/2014/09/18/efficiently-simplifying-navigation-interaction-design/ +09: TYPOGRAPHY. The Scourge of Helvetica Neue Light By Richard Rutter. "I'm no lover of Helvetica but neither do I hate it. I'd be walking around carrying a lot of hate if I did. That said I really do have an aversion to Helvetica Neue Light, or rather an aversion to when Helvetica Neue Light is used without due thought and attention..." http://clagnut.com/blog/2379/ Typography Resources to Help in Your Designs By Laren Cramer. "You know that feeling when you look at a web site and think everything looks just right? It flows well, there's a nice balance of white space, and it's easy on to the eyes. Perhaps you may not realize it but it's likely that the type plays a dominant role..." http://www.uie.com/brainsparks/2014/09/17/resources-around-typography/ +10: USABILITY. User Experience and Accessibility - Working with Visual Designers By Janet M. Six. "In this edition of Ask UXmatters, our panel of UX experts answers questions about two issues that confront UX professionals: Should accessibility be a UX team's responsibility? What is the best way to work with a visual designer.." http://www.uxmatters.com/mt/archives/2014/09/user-experience-and-accessibility-working-with-visual-designers.php Form Usability: Validations vs Warnings By Jamie Appleseed. "There's a major difference between form validations and warnings. Form validations enforce a set of rules and won't allow the user to proceed, while warnings alert the user about possible problems but will allow them to proceed." http://baymard.com/blog/validations-vs-warnings Eye Tracking in User Experience Design, Chapter 5: Forms and Surveys By Caroline Jarrett and Jennifer Romano Bergstrom. "In this chapter, we have explained that eye-tracking data can help to learn about the visual design of pages with questions on them: forms and surveys." http://www.uxmatters.com/mt/archives/2014/09/eye-tracking-in-user-experience-design.php Animation for Attention and Comprehension By Aurora Bedford. "Moving elements are a powerful tool to attract users'attention. When designing an animation consider its goal, its frequency of occurrence, and its mechanics." http://www.nngroup.com/articles/animation-usability/ Design Principles - Connecting And Separating Elements Through Contrast And Similarity By Steven Bradley. "Similarity and contrast, connection and separation, grouped and ungrouped are all ways to describe the varying sameness and difference between elements..." http://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/ [Section one ends.] ++ SECTION TWO: +11: 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.]