+++ WEB DESIGN UPDATE. - Volume 14, Issue 17, October 22, 2015. 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: BOOKS. 04: DRUPAL. 05: EVALUATION & TESTING. 06: EVENTS. 07: HTML5. 08: JAVASCRIPT. 09: MISCELLANEOUS. 10: STANDARDS, GUIDELINES & PATTERNS. 11: TOOLS. 12: USABILITY. 13: XML. SECTION TWO: 14: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Ensure High Contrast for Text Over Images By Aurora Bedford. "If you place text over a background image, make sure it's readable by providing adequate contrast. Subtle tweaks can increase the contrast without affecting the overall aesthetic of the site." http://www.nngroup.com/articles/text-over-images/ Mobile Accessibility Fails: Do we need a WCAG3? By Gian Wild. "Back in 2005 when I attended my first (and only) face-to-face WCAG Working Group event in Seattle we couldn't even comprehend where technology would be today; with the array of smartphones, tablets, laptops and smartwatches to come...." http://www.sitepoint.com/mobile-accessibility-fails-need-wcag3/ Your Computer School Sucks By Karl Groves. "...I think that all computer schools should include accessibility embedded in core curriculum. It will create an alumni population better prepared to create interfaces that are universally usable. Their alumni will be differentiated by their ability to consider the user's needs. After all, if you're not developing for the user, who are you developing for?" http://www.karlgroves.com/2015/10/18/your-computer-school-sucks/ +02: BOOKS. Rosenfeld, Louis, Morville, and Arango. Information Architecture: for the World Wide Web and Beyond, O'Reilly, 2015. +03: CASCADING STYLE SHEETS. How z-index Works By Ire Aderinokun. "Although it may not be immediately obvious, the elements in an HTML document are generated in three dimensions. Besides being aligned on the x- and y- axes, elements can lie on the z-axis, which controls their position in the third dimension." http://bitsofco.de/2015/how-z-index-works/ How To Use Sass Variables By Steven Bradley. "Think of all the times you might add the same color to different elements or classes in your CSS file and then think of all the fun you have changing everything when you decide another color would work better. Wouldn't you prefer to make the change once and have the rest update automatically?" http://vanseodesign.com/css/how-to-use-sass-variables/ +04: DRUPAL. Introduction To Drupal 8's Web Accessibility Advantages By Mike Gifford. "...Drupal 8 has added extensive support for accessibility in the Core..." https://openconcept.ca/blog/mike/introduction-drupal-8%E2%80%99s-web-accessibility-advantages The Challenge of Web Accessibility By Mike Gifford. "...Web accessibility needs to be viewed as an ongoing challenge, rather than a one-time expense. Annual budgets need to go into both ensuring that the website meets it's accessibility goals, but also that those goals are becoming more ambitious. With Drupal 8, this will be easier than ever for organizations to accomplish." https://openconcept.ca/blog/mike/challenge-web-accessibility Drupal 8's Accessibility Advantage: WAI-ARIA By Mike Gifford. "You probably wont notice it, but Drupal 8 comes packed with WAI-ARIA markup to ensure that your pages are as semantically correct as they can be out of the box. Who will notice it though is blind users who rely on additional meaning to be hard coded into the HTML of the site, rather than inferred from the visual cues on the page..." https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-wai-aria Drupal 8's Accessibility Advantage: HTML5 & Improved Semantics By Mike Gifford. "Remember those pesky divs you typically saw on a lot of Drupal sites? Wouldn't it be great if you could actually understand what each of those divs actually meant? Well worry no more, Drupal 8 Core comes packaged with HTML5 optimized markup..." https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-html5-improved-semantics +05: EVALUATION & TESTING. 4 Types of Observational Research By Jeff Sauro. "...The four types of observational roles we discuss here are based on the distinctions made by the sociologist Raymond Gold in 1958 but apply to any field of research..." http://www.measuringusability.com/blog/observation-role.php 5 Types of Qualitative Methods By Jeff Sauro. "While the five methods generally use similar data collection techniques (observation, interviews, and reviewing text), the purpose of the study differentiates them-something similar with different types of usability tests. And like classifying different usability studies, the differences between the methods can be a bit blurry. Here are the five qualitative methods in more detail..." http://www.measuringu.com/blog/qual-methods.php Are You Holding the Map Upside Down? By Merav Keren. "How to Analyze Your Site's Heatmap?..." http://blog.clicktale.com/2015/10/21/are-you-holding-the-map-upside-down/ Identifying and Validating Assumptions and Mitigating Biases in User Research By Janet M. Six. "In this edition of Ask UXmatters, our panel of UX experts discusses how to identify and test assumptions and mitigate biases in user research..." http://www.uxmatters.com/mt/archives/2015/10/identifying-and-validating-assumptions-and-mitigating-biases-in-user-research.php +06: EVENTS. Web Accessibility MOOC for Online Educators (Fall 2015) October 19 - November 22, 2015. Online https://opencourses.desire2learn.com/cat/course/web-accessibility-7363/ +07: HTML5. Notes on Use of Multiple ARIA Role Attribute Values By Steve Faulkner. "The role attribute in HTML can have multiple space separated values..." https://www.paciellogroup.com/blog/2015/10/notes-on-use-of-multiple-aria-role-attribute-values/ +08: JAVASCRIPT. Using the aria-owns Attribute By Leonie Watson. "When a parent/child relationship is evident on-screen, but it isn't represented in the DOM, the aria-owns attribute can be used to establish that relationship in the accessibility layer..." http://tink.uk/using-the-aria-owns-attribute/ Why is There a 'Temporal Dead Zone' in ES6? By Axel Rauschmayer. "In ECMAScript 6, accessing a let or const variable before its declaration (within its scope) causes a ReferenceError. The time span when that happens, between the creation of a variable's binding and its declaration, is called the temporal dead zone." http://www.2ality.com/2015/10/why-tdz.html +09: MISCELLANEOUS. How to Say 'No' to Your Customers Without Ruining Their Experience By Hannah Alvarez. "...Being able to decline customers with grace is a key to a lasting customer relationship. Whether it's in an email, chat message, phone call, or in person, encourage your team to practice empathy for the customer, be honest, and maintain a positive approach. It'll go a long way toward creating trust with your customers." https://www.usertesting.com/blog/2015/10/15/saying-no-to-customers/ How to Determine When Customer Feedback is Actionable By Naira Musallam, Nis Frome, Michael Williams, and Tim Lawton. "One of the riskiest assumptions for any new product or feature is that customers actually want it..." http://boxesandarrows.com/how-to-determine-when-customer-feedback-is-actionable/ +10: STANDARDS, GUIDELINES & PATTERNS. U.S. Web Design Standards - Guidelines For a Better User Experience By Jennifer Winter. "...the U.S. Chief Information Officer (CIO) Council has recently released a new set of standards, guidelines, and open-sourced resources to help refresh government websites to make them not only more visually appealing, but more usable as well..." https://www.usertesting.com/blog/2015/10/14/design-standards/ +11: TOOLS. Site Scan By Microsoft. Run a quick code scan on any URL to check for out-of-date libraries, layout issues, and accessibility. https://dev.modern.ie/tools/staticscan/ +12: USABILITY. Which UX Deliverables Are Most Commonly Created and Shared? By Page Laubheimer. "UX professionals produce a wide variety of deliverables: 11 different deliverable formats were used by at least half the respondents in our study. Deliverables rated the most effective varied substantially by target audience." http://www.nngroup.com/articles/common-ux-deliverables/ Links Should Not Open New Windows By Tim Arnold. "...More often than not, this practice is motivated by a desire to keep users on your site. I'm not convinced it accomplishes this. Opening new windows (or tabs, depending on the browser settings) without asking the user if that's what they wanted is rude, and a violation of several principles of interaction design encouraging us to leave control of the the interface in the user's hands (Shneiderman, Mandel, Tognazzini)..." http://www.beaconfire.com/blog/2015/06/links-should-not-open-new-windows/ Are Your Social Media Icons Driving People Away? By Nancy Seeger. "...My advice, your website is your business home where prospects go to learn more about you. Once they arrive, invite them to stick around." http://www.artsassistance.com/social-media-icons-driving-people-away/ Under Pressure: Exploring 3D Touch for iPhone By Georgia Gallavin. "...More than anything else, the novelty of this technology stuck with participants as they worked to get used to the 3D Touch. When we asked participants to choose adjectives to describe the technology, a majority chose words like, 'inventive,' 'impressive,' 'creative,' and 'fun.' Not only did these adjectives reflect an overall positive experience, but it emphasized how fresh the experience was for them. " https://www.usertesting.com/blog/2015/10/20/iphone-3d-touch/ +13: XML. How To Work With SVG Text By Steven Bradley. "SVG text offers the best of both worlds. It's rendered like other graphic elements so you can do things like add strokes and fills that you can add to shapes, lines, and arrowheads. It's also packaged as XML character data, which means it's real text..." http://vanseodesign.com/web-design/how-to-work-with-svg-text/ Making composed-tree.svg More Accessible By Charles McCathieNevile. "These are some notes on steps we took that improved the accessibility of composed-tree.svg up to its current state (at time of writing), and why each one was worth doing. Note that the order doesn't reflect what we actually did over time, so much as the order we probably should have done things..." http://svg-access-w3cg.github.io/use-case-examples/composed-tree-notes.html [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.]