+++ WEB DESIGN UPDATE. - Volume 12, Issue 17, October 17, 2013. An email newsletter to distribute news and information about web design and development. ++ISSUE 17 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: DREAMWEAVER. 05: DRUPAL. 06: EVALUATION & TESTING. 07: EVENTS. 08: HTML5. 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. Infinite Inputs - Welcome to the Party By Henny Swan. "Multiple ways of inputing and accessing information on the web is standard in accessibility but with the proliferation of mobile, tablets, touch, games consoles, kiosks (you name it) things are changing." http://www.iheni.com/infinite-inputs-welcome-to-the-party/ What Does Responsive Web Design Have to do with Accessibility? By Jonathan Avila. "A lot..." https://www.ssbbartgroup.com/blog/2013/07/11/what-does-responsive-web-design-have-to-do-with-accessibility/ Longdesc Links, History, Future By Dennis Lembree. "Recently I Twittered daily about longdesc, the classic unsung HTML attribute which supports long descriptions of images. Here's a summary of the tweets/links..." http://www.webaxe.org/longdesc-links-history-future/ Notes on Guidelines For Speech accessible HTML for Dragon NaturallySpeaking By Steve Faulkner. "...The document 'Guidelines For Speech accessible HTML for Dragon NaturallySpeaking' includes poor guidance for HTML developers that contradicts web standards and may lead to less accessible content. As such it should not be used or cited as a credible resource." http://blog.paciellogroup.com/2013/10/notes-guidelines-speech-accessible-html-dragon-naturallyspeaking/ Including Error Messages in Labels By Jeff Smith. "In this week's Best Practice of the Week (BPOW), we show you an easy trick for making sure that all users are notified when form data contains errors." http://simplyaccessible.com/bpow/error-messages-in-labels/ What is This Thing and What Does It Do? By Karl Groves. Karl's slides from his Paris Web presentation. http://dom.karlgroves-sandbox.com/slides/ +02: CASCADING STYLE SHEETS. Arranging Elements from Top to Bottom instead of Left to Right (float: down?) By Chris Coyier. "Reader Marcin A wrote in with this question about a simple unordered list in which they wanted the elements to be arranged in vertical order (top to bottom) instead of horizontal (left to right)..." http://css-tricks.com/arranging-elements-top-bottom-instead-left-right-float/ Initial-scale=1 makes Safari iOS React to Orientation Change By Peter-Paul Koch. "One common problem on iOS is that, when you use a meta viewport tag with width=device-width, the page doesn't react to an orientation change. On the iPhone the page becomes 320px wide and on the iPad 768px, regardless of whether you're in portrait or in landscape mode. Sometimes this is annoying." http://www.quirksmode.org/blog/archives/2013/10/initialscale1_m.html +03: COLOR. We Can't Rely on Color By James Edwards. "A recent article by Georgina Laidlaw on the flat UI design style got me thinking about the accessibility implications of this trend, and especially how it affects the use of color to convey information. So I thought it would be useful to review these implications, have a look at the accessibility requirements regarding the use of color, and discuss some of the ways in which we can meet them...What concerns me is that we're throwing away design components which actually served an important purpose - powerful and well-understood visual cues, like borders, bevels and shadows. A design response to this will inevitably be more reliance on color and typography, and this in turn might lead to more accessibility problems." http://www.sitepoint.com/cant-rely-color/ +04: DREAMWEAVER. Adding Text to Your Pages in Dreamweaver CC By Tom Negrino and Dori Smith. "The main message of most websites is conveyed by the site's text, and a major part of your job in working with any site will be adding, modifying, and styling that text. Dreamweaver gives you the tools you need to effectively put text on your pages and get your message across..." http://www.peachpit.com/articles/article.aspx?p=2130937 +05: DRUPAL. Creating a Menu Position Rule Programatically By John Bickar. "The Menu Position module provides a powerful way for Drupal to create 'virtual' menu items, and provides a graphical user interface to do so. However, as a developer, sometimes you want to create those rules in code. Here's how..." https://swsblog.stanford.edu/blog/creating-menu-position-rule-programatically +06: EVALUATION & TESTING. Remote Usability Tests: Moderated and Unmoderated By Amy Schade. "Remote usability testing allows you to get customer insights when travel budgets are small, timeframes are tight, or test participants are hard to find." http://www.nngroup.com/articles/remote-usability-tests/ +07: EVENTS. Accessibility - It is Important Online Workshop This material is available through December 15, 2013. https://www.atomiclearning.com/au/accessibility_wkshp Madison PHP Conference November 16, 2013. Madison, Wisonsin, U.S.A. http://www.MadisonPHPConference.com M-Enabling Summit Conference June 9-10, 2014. Washington, D.C., U.S.A. http://g3ict.org/events/schedule/event_overview/p/eventId_467/id_1058 +08: HTML5. Using the HTML5 Section Element By Leonie Watson. "...The section element is not a div...The section element is a thematic container...The section element should have a heading..." http://blog.paciellogroup.com/2013/10/using-html5-section-element/ HTML5 Accessibility Presentation By Steve Faulkner. Stevs's slides from his Paris Web presentation. https://docs.google.com/presentation/d/1gnQg-3jQSytv60ozANjM7BK-OhiP7elf13P5oXHT6CM/present +09: JAVASCRIPT. JavaScript Fundamentals By Azat Mardanov. "JavaScript inherits the best traits of pure mathematics, LISP and C# which leads to a great deal of expressiveness (and, arguably, fun). You can read more about expressive power in languages via this post." http://flippinawesome.org/2013/10/07/javascript-fundamentals/ ARIA Roles T By Rakesh Paladugula. "The following ARIA roles begin with the letter 'T'..." http://www.maxability.co.in/2013/10/aria-roles-t/ JS Responsibilities (Video) By Brendan Eich. JavaScript's creator gave a talk at JSConf EU about the current state of JavaScript, what's coming along for the language next, and what things need to be done. There's lots of technical stuff about the language and its syntax to enjoy in just 30 minutes. http://youtu.be/IXIkTrq3Rgg +10: MISCELLANEOUS. resimagecrop - Responsive Image Solution By Ian Devlin. "...It's a simple RESS based PHP script called resimagecrop.php that takes a number of arguments and returns an image based on the values of those arguments..." http://www.iandevlin.com/blog/2013/10/responsive-web-design/resimagecrop-a-responsive-image-solution A Consensus to the Responsive Image Problem? By Craig Buckler. "Responsive Web Design is a simple technique until you consider images. There are a number of issues.." http://www.sitepoint.com/consensus-responsive-image-problem/ +11: NAVIGATION. Full-Width Justified Vertically Centered Navbar By Roger Johansson. "In a couple of recent projects I've faced designs where the main navigation bar gave me more trouble than usual. These are the prerequisites that make the problem tricky to solve..." http://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/ +12: STANDARDS, GUIDELINES & PATTERNS. The W3C is a Restaurant By David Bruant. "A fantasy lives in the head of a large number of people about the role of the W3C in the web ecosystem. This fantasy is that the W3C would decide what gets in the web platform and what doesn't, or even that the W3C would set a vision for the web. This is completely false..." http://longtermlaziness.wordpress.com/2013/10/08/the-w3c-is-a-restaurant/#post-334 What is EME? By Henri Sivonen. "It was suggested at the Mozilla Summit that there isn't good information around about what Encrypted Media Extensions (EME) actually is. Since I'm on the HTML working group and have been reading the email threads about EME there, I thought that I could provide an introduction that explains things that may not be apparent from the specification itself." http://hsivonen.fi/eme/ +13: USABILITY. Flat UI and Forms By Jessica Enders. "Though some decry flat user interfaces as pure fashion, or as the obvious response to skeuomorphic trends, many designers have embraced the flat approach because the reduction in visual styling (such as gradients, drop shadows, and borders) creates interfaces that feel simpler and cleaner. Trouble is, most flat UIs are built with a focus on the provision of content, with transactional components (i.e., forms) receiving very little attention. So what happens when flat UIs and forms collide? User experiences can, and often do, suffer. Keep your flat forms from failing by using controlled redundancy to communicate difference." http://alistapart.com/article/flat-ui-and-forms iOS 7 User-Experience Appraisal By Raluca Budiu. Flat design hides calls to action, and swiping around the edges can interfere with carousels and scrolling. http://www.nngroup.com/articles/ios-7/ Fight Against 'Right-rail Blindness' By Hoa Loranger. "As an adaptation to information overload, web users have trained themselves to divert their attention away from areas that seem unimportant or look like advertising. When designed well, sidebars can effectively increase content discoverability and usability." http://www.nngroup.com/articles/fight-right-rail-blindness/ [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.]