+++ WEB DESIGN UPDATE. - Volume 15, Issue 28, January 5, 2017. An email newsletter to distribute news and information about web design and development. ++ISSUE 28 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: DRUPAL. 04: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: STANDARDS, GUIDELINES & PATTERNS. 09: TOOLS. 10: TYPOGRAPHY. 11: USABILITY. SECTION TWO: 12: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. What are WCAG Success Criteria? By David MacDonald. "This article started with my opinion on the characteristics of Success Criteria, with significant input from Loretta Guarino Reid and Gregg Vanderheiden, previous chairs of WCAG 2.0. Since then, the WCAG Working Group created a WCAG Success Requirements document, which has general consensus. I've updated this article uniformity with those requirements. Here I hope to provide helpful advice to understanding them for those trying to write Success Criteria, or understand them..." http://www.davidmacd.com/blog/what-are-WCAG-success-criteria.html What's Holding Back Accessibility in 2016? By Oliver Lindberg. (Hat tip to Jennifer Sutton) "...To help highlight why designers are still lagging behind where they should be, we spoke to seven experts to shed some light on the situation..." http://www.creativebloq.com/advice/whats-holding-back-accessibility-in-2016 Accessible Emoji, Tweaked By Adrian Roselli. "... I have enhanced Léonie's example to make that handy aria-label display when the mouse hovers over the emoji. Add an unfortunate tabindex and now a keyboard-only user can put focus on the emoji..." http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html Inclusive Design Tips: Presenting Information in Multiple Ways By Caitlin Geier. "...This blog post addresses three related topics in the area of accessible design: 1.) Providing text or visual alternatives when using color as a form of information. 2.) Making sure that audio cues don't rely entirely on the user's ability to hear. 3.) Ensuring that references to visual information like color, shape, and position are presented so that users without sight can still understand..." http://www.deque.com/blog/inclusive-design-tips-presenting-information-multiple-ways/ What Companies Lose by Ignoring Digital Accessibility By Cristopher Broyles. "...Without a digitally accessible business, you will lose out on customer opportunities. You also risk fines, legal fees, and brand damage due to noncompliance with accessibility laws..." http://data-informed.com/what-companies-lose-by-ignoring-digital-accessibility/ Accessibility in Email Marketing By Emily Austin. "...For most companies, having a website that meets accessibility standards is generally regarded as a must-have. The same goes for email..." https://blog.mailchimp.com/accessibility-in-email-marketing/ How Learning ASL Improved my Alt Text (Video) By Shaun Lariaut. Shaun's January 2, 2017 A11y NYC meetup presentation. https://www.youtube.com/watch?v=gHOYghYYNIM Slides: https://docs.google.com/presentation/d/17hty4vcbsmvByuvhMdX60TxWGOdi66aM35P5HQRjIMQ/ Implementing Accessible Workplace Tech Creating Accessible Tables for the Web (Video) By Gian Wild. Gian's November 9, 2016 PEAT Works Webinar. https://www.youtube.com/watch?v=ZK9WMygCAZs Slides (PPT): http://www.peatworks.org/sites/peatworks.org/files/uploads/attachments/node/1314/tables_webinar_-_final.ppt +02: CASCADING STYLE SHEETS. Vertical Limit By Jeremy Keith. "When I was first styling Resilient Web Design, I made heavy use of vh units..." https://adactio.com/journal/11690 CSS Grid is Coming By Rachel Andrew. "...This post is a round-up of questions I keep being asked about browser support and grid layout..." https://www.rachelandrew.co.uk/archives/2017/01/03/css-grid-is-coming/ Kiss My Classname By Jeffery Zeldman. "SORRY. I disagree. Nonsemantic classnames that refer to visual styles will always be a bad idea..." http://www.zeldman.com/2017/01/03/kiss-my-classname/ Taking CSS Shapes to the Next Level By Louie Rootfield. "...Let's now explore more complex shapes, making our page layouts richer and less boxy..." https://webdesign.tutsplus.com/tutorials/taking-css-shapes-to-the-next-level--cms-27907 +03: DRUPAL. Accessibility Within Reach for Drupal 7 Content Managers With WYSIWYG A11yChecker Module By Jenna Tollerson. "...The Accessibility Checker, or A11yChecker, adds a button to CKEditor that fires up a wizard-like interface for checking the accessibility of the work of content managers. Content managers can simply add their content in the WYSIWYG field, then click the A11yChecker button to run the wizard and step through necessary changes. It can even fix some errors automatically..." http://portal.georgia.gov/interactive/blog/2017-01-03/accessibility-within-reach-drupal-7-content-managers-wysiwyg-a11ychecker-module +04: EVALUATION & TESTING. 27 Tips and Tricks for Conducting Successful User Research in the Field By Susan Farrell. "Leave your office, already, and go where the users are. There are some common pitfalls, but they can be avoided if you learn from our experience." https://www.nngroup.com/articles/tips-user-research-field/ Does Thinking Aloud Affect Where People Look? By Jeff Sauro. "...The results of this study found that thinking aloud does affect where and how long people look at parts of a website homepage in the first five seconds...In this study, thinking aloud tended to shift participants' gaze from the upper navigation of the webpage to the left navigation..." http://www.measuringu.com/blog/ta-gazepaths.php Strategic UX: The Value of Making the Problem Bigger By David Siegel. "...to contribute at the strategic level, we have to shift minds toward not only resolving design flaws but also seeing new possibilities-especially possibilities with important implications beyond the immediate problem..." https://interactions.acm.org/archive/view/january-february-2017/strategic-ux +05: EVENTS. ForwardJS February 25-March 5, 2017. San Francisco, California, U.S.A. https://forwardjs.com/ San Diego UX Conference February 26-March 2, 2017. San Diego, California, U.S.A https://www.nngroup.com/training/san-diego/ Midwest PHP 2017 March 17-18, 2017. Bloomington, Minnesota, U.S.A. https://2017.midwestphp.org/ IA Summit March 22-26, 2017. Vancouver, British Columbia, Canada http://www.iasummit.org/ Design It, Build It March 30-31, 2017. Edinburgh, Scotland United Kingdom http://dibiconference.com/ +06: JAVASCRIPT. Improve Your Website's Accessibility With WAI-ARIA By Louis Lazaris. "The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl..." https://www.sitepoint.com/wai-aria/ +07: MISCELLANEOUS. What Comes Next... By Eric A. Meyer. "There is a documentary about the history of the web. It's an hour long, and now it's free to watch. Also, I'm in it-a fair amount, it turns out. Please do not let this dissuade you from watching it..." http://meyerweb.com/eric/thoughts/2016/12/29/what-comes-next/ +08: STANDARDS, GUIDELINES & PATTERNS. On Leaving W3C By Doug Schepers. "Today is my last day at the World Wide Web Consortium (W3C)..." http://schepers.cc/on-leaving-w3c +08: TOOLS. ImageOptim By Kornel Lesiński. "Removes bloated metadata. Saves disk space & bandwidth by compressing images without losing quality..." https://imageoptim.com/versions.html accesslint.js By Cameron Cundiff, et al. "Accessibility warnings for dynamic web content...accesslint.js runs assertions from the aXe-core accessibility library wherever you include the script once on page load, and again for each DOM change event. This feature gives you feedback on new content introduced via AJAX, for example, or updates to a single page app..." https://github.com/accesslint/accesslint.js +10: TYPOGRAPHY. Has the Internet Killed Curly Quotes? By Glenn Fleishman. "Web publications tend to favor straight quotation marks, a pragmatic approach to typography that old-school stylists can't stand..." https://www.theatlantic.com/technology/archive/2016/12/quotation-mark-wars/511766/ +11: USABILITY. Now You're Speaking My Language By Melita Little. "Microcopy and the small ways you're irritating your users...Ideally, CTA microcopy will act as a signpost or clue for what to expect next. Done wrong, it will make a user unsure of what to expect next. The generic 'Click Here' button is a perfect example of this. It is the creepy windowless van of the microcopy world..." https://medium.com/nasdaq-design/now-youre-speaking-my-language-11a70c0112b User-Experience Quiz: 2016 UX Year in Review By Raluca Budiu. "Test your UX knowledge by taking our quiz. All questions and answers are based on articles that we published last year." https://www.nngroup.com/articles/ux-quiz/ UX Design Top 10 Articles of The Year (v.2017) By Mybridge. (Hat tip to Jennifer Sutton) "For the past year, we've ranked nearly 10,500 UX Design articles to pick the Top 10 stories (0.095% chance) that can help you prepare your design career in 2017..." https://medium.mybridge.co/ux-design-top-10-articles-of-the-year-v-2017-489111b3c7db [Section one ends.] ++ SECTION TWO: +12: 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.]