+++ WEB DESIGN UPDATE. - Volume 13, Issue 02, July 10, 2014. An email newsletter to distribute news and information about web design and development. ++ISSUE 02 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: COLOR. 04: FLASH. 05: HTML5. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: NAVIGATION. 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. Why Hackers Should Care About Accessibility By Julian Taub. "Most people think of "accessibility" as those little-used options on their computer for disabled users. But not only does accessible design make a piece of technology useful to all, but it also increases the product user base and also makes it easier to use for people across age brackets and cultural boundaries..." http://www.fastcolabs.com/3032088/why-hackers-should-care-about-accessibility Captioning Formats for Videos By Lori Lane. "A variety of captioning file formats exist, all of which differ slightly in syntax. These different formats are used for captioning, subtitling, karaoke, etc. in videos for both TV and on the web. Of the many captioning file formats that are available, TTML and WebVTT are the two that spark debates among developers. However, choosing the correct file format is important for both accessibility and compatibility..." https://www.ssbbartgroup.com/blog/2014/07/08/captioning-formats-for-videos/ Provide Users with a Mechanism to Postpone Content Updates By Denis Boudreau. "Make sure users can control the pace at which automatic updates in content occur.." http://dboudreau.tumblr.com/post/90760896287/provide-users-with-a-mechanism-to-postpone-content Converting Word to PDF or HTML - Options for Accessibility By Terrill Thompson. "I write a lot. I'm writing this blog post in the rich text editor that's provided with WordPress, and I trust it will output nice clean HTML. This is good way of working, but often my writing involves much lengthier documents, and often I'm writing in collaboration with others. The tool of choice for these projects tends to be Microsoft Word, and often the final document will be published either in PDF or HTML..." http://terrillthompson.com/blog/517 Cleaning up Word HTML with Regular Expressions By Terrill Thompson. "Today I'm celebrating Independence Day by declaring independence from presentational HTML markup!..." http://terrillthompson.com/blog/535 Keyboard Navigation in Mac Browsers By Becky Gibson. "There are a few settings to be aware of when using the keyboard on a Mac. There is a Keyboard System Preference to allow full tab key navigation. The setting is in the keyboard pane at the bottom of the shortcuts tab panel...." http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/ New Accessibility Rules Coming to Airline Websites. Are You Ready? By Ken Nakata. "Imagine for a minute that you decide to take a vacation. You're thinking Hawaii, Tahiti or the Alps. You grab your computer, open a browser, type in your favorite airline and then stop. Why? Unfortunately for 19 percent of the US population that live with disabilities, this is the consequence when navigating to an inaccessible website for air transportation." http://www.tnooz.com/article/airlines-online-accessibility-regulations/ FCC Submits Report to Congress on Video Description By Netflix Project. "On June 30, 2014, the Federal Communications Commission (FCC) released a Report to Congress (Report) on video description, as required by the Twenty-First Century Communications and Video Accessibility Act of 2010 (CVAA)..." http://netflixproject.wordpress.com/2014/07/04/fcc-submits-report-to-congress-on-video-description/ +02: CASCADING STYLE SHEETS. Breakpoints And The Future Of Websites By Obinwanne Hill. "...responsive web design has turned out to be somewhat of a case study in the law of unintended consequences, with one of the perverse unanticipated effects being breakpoint paranoia. But even without the undue influence that media queries exerts on your selection of these breakpoints, it dawns on you after much introspection that these might not be the droids we're looking for. In this article, we'll look at breakpoints beyond screen size and explore different possibilities and practical approaches to using them to create truly adaptive experiences on the web..." http://www.smashingmagazine.com/2014/07/08/breakpoints-and-the-future-websites/ +03: COLOR. Contrast Ratio - A New Color Contrast Tool By Virginia DeBolt. "Here's a very nice new tool for checking color contrast against WCAG 2.0 standards for accessibility. It was created by Lea Verou and is called Contrast Ratio..." http://www.webteacher.ws/2014/07/03/contrast-ratio-new-color-contrast-tool/ Support Information Conveyed by Color with Text By Denis Boudreau. "Make sure information conveyed through color is also conveyed through text..." http://dboudreau.tumblr.com/post/74727772483/support-information-conveyed-by-color-with-text Is Your Website Colorblind Friendly? By Hello World Design. "...Don't rely on color alone to convey messages to your website visitors. To ensure your site is colorblind friendly, combine color with other design techniques. Typography, grids, use of white space and shapes can help you increase usability and create a visual appealing website for visitors, no matter how the colors are viewed..." http://helloworlddesignco.com/web-design-news-portland-oregon.php?pid=51 +04: FLASH. Creating an Accessible Media Player in Flash By Daniel Oades. "...With the rise of HTML5 most browsers and operating systems provide good integration for accessibility (screen reader support, tab controls etc) however Flash has always been problematic and requires a lot more custom code in order to meet basic accessibility requirements. The launch of SMP allowed us to completely rebuild our accessibility implementation and ensure the player was designed and coded with the BBC Accessibility Guidelines in mind..." http://www.bbc.co.uk/blogs/internet/posts/Creating-an-accessible-media-player-in-Flash +05: HTML5. The Elements of HTML By Steve Faulkner, Editor. "A list of HTML and XHTML elements, past and present..." http://w3c.github.io/elements-of-html/ Accessibility of Web Components By Marcy Sutton. "We've been talking a lot about Web Components as a community. Encapsulation, templating, custom elements, polyfills: it's an exciting time to be a developer! (, anyone?) Before we create the next generation of soulless
tags, we should consider the role of semantics in shiny, new technologies..." http://webcomponents.org/presentations/accessibility-of-web-components-at-jsconf-us/ +06: JAVASCRIPT. A Guide to JavaScript Modules By jsmodules. "The next version of JavaScript comes with a module system heavily inspired by Node.js modules. Here's how it works..." http://jsmodules.io/ The WAI Forward By Heydon Pickering. Excerpt of a chapter in Heydon's new eBook, "Apps For All: Coding Accessible Web Applications. "It's one thing to create a web application and quite another to keep it accessible - independent of the device that the user is using and its capabilities. That's why Heydon Pickering, now the accessibility editor on Smashing Magazine, wrote an eBook Apps For All: Coding Accessible Web Applications, outlining the roadmap for well-designed, accessible applications..." http://www.smashingmagazine.com/2014/07/09/the-wai-forward/ +06: MISCELLANEOUS. For Developers, a Little UX can Go a Long Way By Arijit Banerjee. "It’s inevitable that the software development process will continue to evolve and the environment developers work in will continue to change. In the future, it’s likely that designers will get more implementation savvy and developers will get more design savvy. For today, developers need to realize the benefits of the product design philosophy, because in the end, it’s the users that matter the most. Giving users what they want creates a base of passionate customers that accelerates your growth and helps achieve market dominance." http://uxmag.com/articles/for-developers-a-little-ux-can-go-a-long-way Adapting Scrum to a UX Model By Anindya Sengupta. "...On a Scrum project, a UX team that does not follow Scrum as part of its delivery model presents a serious challenge to realizing the benefits of Scrum. To solve this problem, someone from the Development team must serve as a point of contact and work closely with the UX team on a regular basis to align the two teams' timelines, as well as their expectations in terms of deliverables and requirements. This will ensure the timely delivery of UX design artifacts, better alignment on requirements, and a consistent process for providing feedback to the UX team before development starts." http://uxmatters.com/mt/archives/2014/07/adapting-scrum-to-a-ux-model.php The 2014 M-Enabling Global Summit Videos By Webable.tv. Videos from the 2014 M-Enabling Global Summit held in Washington D.C. http://www.webable.tv/Events/m_enabling_summit_2014.aspx +08: NAVIGATION. Low Findability and Discoverability - Four Testing Methods to Identify the Causes By Jennifer Cardello. "Use IA- and UI-focused user research to determine if low findability and discoverability are caused by site information architecture or navigation design..." http://www.nngroup.com/articles/navigation-ia-tests/ Mobile Menu AB Tested - Hamburger Not the Best Choice? By James Foster. "...Based on this and my previous AB test, a flat hamburger icon may not be ideal on a responsive website (remember this is a website not an app). Using the word MENU (and making it look like a button) could be more helpful for visitors. This does not mean that users do not understand the hamburger/sandwich – it could be that the word MENU draws more attention...." http://exisweb.net/menu-eats-hamburger The Hamburger is Bad for You By Morten Rand-Hendriksen. "...Anecdotal and somewhat scientific evidence indicates people do not intuitively understand the hamburger icon as an indicator of a menu but have to learn its function. Pardon me as I feign shock and surprise..." http://mor10.com/hamburger-bad/ Why and How to Avoid Hamburger Menus By Luis Abreu. "Why and How to avoid Hamburger Menus, another excellent article suggesting designers user Tab (or Tool) Bars rather than hamburgers..." http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/ +09: USABILITY. Memory Recognition and Recall in User Interfaces By Raluca Budiu. "Showing users things they can recognize improves usability over needing to recall items from scratch because the extra context helps users retrieve information from memory." http://www.nngroup.com/articles/recognition-and-recall/ Building a Business Case for Self-Service By Gerry McGovern. "The worst thing you could possibly do is make everything self-service. 'Let's put everything online' has a lovely ring to it. You hear it in government a lot. We publish everything because we're transparent and we want to serve citizens. It's a noble idea but unfortunately it usually ends up with an unmanageable, unfindable, unusable online presence..." http://www.gerrymcgovern.com/new-thinking/building-business-case-self-service Changing YouTube Playback Speed By Adrian Roselli. "YouTube gives users the option to modify the playback speed of some videos..." http://blog.adrianroselli.com/2014/07/changing-youtube-playback-speed.html +10: XML. Structuring, Grouping, and Referencing in SVG - The , , and Elements By Sara Soueidan. "SVG comes with its own ways for structuring a document by means of certain SVG elements that allow us to define, group, and reference objects within the document. These elements make reusing elements easy, while maintaining clean and readable code. In this article we'll go over these elements, highlighting the difference between them and the advantages of each one..." http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/ [Section one ends.] ++ SECTION TWO: +1: 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.]