+++ WEB DESIGN UPDATE. - Volume 16, Issue 11, September 7, 2017. An email newsletter to distribute news and information about web design and development. ++ISSUE 11 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: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: TYPOGRAPHY. 09: USABILITY. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. Alternate Text for Background Images By David MacDonald. "Avoid presenting informational images in CSS backgrounds…" http://davidmacd.com/blog/alternate-text-for-css-background-images.html Accessible Datepickers By Hampus Sethfors. "Datepickers often cause problems to assistive technology users and fail several basic criteria in Web Content Accessibility Guidelines (WCAG). But datepickers can - and should - be made accessible. Here is how to do it…" https://axesslab.com/accessible-datepickers/ Inclusive Design Goes Beyond Your Design By Deborah Edwards-Onoro. "At the August 2017 Chicago Digital Accessibility and Inclusive Design meetup, Derek Featherstone, founder of Simply Accessible spoke about inclusive design, what it means, and how to look beyond what we create…" https://www.lireo.com/inclusive-design-goes-beyond-your-design/ Accessibility Isn't Enough - Designing Digital Properties to be Usable and Accessible For All (Video) Recording of Sharron Rush and Jayne Schurick's August 30, 2017 webinar. https://www.userzoom.com/webinar/recording-accessibility-isnt-enough/ Slides: https://www.slideshare.net/UserZoom/accessibility-isnt-enough-designing-digital-properties-to-be-usable-and-accessible-for-all Quick Tip: A11y and a Brief Numeronyms Primer By Scott O'Hara. "…But if you're unfamiliar with the term 'numeronym', you may not have realized that a11y isn't just a hash tag, nor is it a hip way to spell ally. Rather a11y is a shorthand for accessibility…" http://a11yproject.com/posts/a11y-and-other-numeronyms/ How Captions and Transcripts Help Students with Dyslexia By Elisa Edelberg. "Dyslexia is a general term used to describe difficulties with learning to read and interpret letters, symbols, and words. It is one of the most common learning disabilities, and is in no way a reflection on an individual's intelligence…" http://www.3playmedia.com/2017/09/01/captions-transcripts-help-students-dyslexia/ Implementing Accessibility By Developer.android. "When it comes to reaching as wide a userbase as possible, it's important to pay attention to accessibility in your Android application. Cues in your user interface that may work for a majority of users, such as a visible change in state when a button is pressed, can be less optimal if the user is visually impaired…" https://developer.android.com/training/accessibility/index.html Nerdery - Video Background with Pause Feature By Accessibility Wins. "…Providing a pause button is an important consideration for accessible user experiences, as autoplaying video can be extremely distracting to the point where users will leave the website if they can't consume the text content…" https://a11ywins.tumblr.com/post/164838552538/nerdery-video-background-with-pause-feature Accessibility - The Curb Cut Effect (Video) By Extra Credit. "Accessibility design makes the game better for all players, not only the disabled. By planning ahead and making more options available, designers can give players the tools to customize their experience in a way that fits them best..." https://www.youtube.com/watch?v=PJoax1Z1x4Y +02: CASCADING STYLE SHEETS. Breaking Down a CSS Grid Layout By Tim Wright. "…I'm going to focus on a few specific things and one grid declaration I came across recently…" http://csskarma.com/blog/css-grid-layout/ Breaking the Grid By Dave Rupert. "Two ways to break CSS Grid and how to fix it…" https://daverupert.com/2017/09/breaking-the-grid/ +03: COLOR. Colorblind Accessibility on the Web - Fail and Success Cases By Hampus Sethfors. "It's Colorblind Awareness Day today! To celebrate, we raise awareness by giving you some practical examples of how design can hurt or help users with color vision deficiencies…" https://axesslab.com/colorblind-accessibility-web-fail-success-cases/ +04: EVALUATION & TESTING. How to Find More Usability Problems with Fewer Users By David Travis. "A common myth in usability testing goes like this: '5 participants are all you need to get 85% of the usability problems.' Understanding why this is a myth helps us generate ideas to help us increase the number of problems we find in a usability test." http://userfocus.co.uk/articles/more-usability-problems-with-fewer-users.html Download Free User Experience Templates To Use By Patrick Neeman. "I teach at General Assembly in Seattle as a Part Time UX Instructor. One task that pained me early on while teaching was watching students scour the Internet for templates they could use to do user research, create site maps, and record usability tests - especially documents that could be used by using free collaborative tools. So I created my own. …" http://www.usabilitycounts.com/2017/08/23/download-free-user-experience-templates-use/ +05: EVENTS. A11Y Talks: Every Day Website Accessibility Online. September 20, 2017. https://groups.drupal.org/node/517393 Disability Rights Advocates Inaugural New York Gala New York, New York, U.S.A. October 12, 2017. http://dralegal.org/dra-nyc-gala/ Universal Design for Learning in Higher Education Conference October 30-31, 2017. Nashville, Tennessee, U.S.A. https://www.tbr.edu/academics/studentaffairs/udl-conference W3C - Technical Plenary (TPAC) 2017 November 6-10, 2017. Burlingame, California, U.S.A. https://www.w3.org/2017/11/TPAC/ Web Accessibility Training December 5-6, 2017. Logan, Utah, U.S.A. http://webaim.org/training +06: JAVASCRIPT. aria-colindex Property By Rakesh Paladugula. "aria-colindex property is used on a table, grid or a treegrid where all the columns are currently not present. aria-colindex property notifies the index or position of the column in a table or grid or a treegrid with respect to the number of columns available…" http://www.maxability.co.in/2017/08/aria-colindex-property/ Thinking JavaScript By Kyle Simpson. "I was teaching a JavaScript workshop the other day and one of the attendees asked me a JS brain teaser during the lunch break that really got me thinking…" https://davidwalsh.name/thinking-javascript +07: MISCELLANEOUS. Does Accessibility Slow Down the Development Process? By Andrea Fercia. "I've been focusing on web accessibility for a few years now. One of the complaints I've often heard from business owners and managers is that implementing accessibility is hard and slows down the development process. For this reason, sometimes accessibility gets postponed or set aside in the erroneous belief that's something that can be 'added' later. Here, I'd like to share my thoughts on why I think the first statement is misleading. I'll also discuss why postponing accessibility is an ineffective process that can add a considerable amount of time to your development process." https://yoast.com/dev-blog/accessibility-slow-down-development-process/ Yes, That Web Project Should Be a PWA By Aaron Gustafson. "A Progressive Web App (PWA) is a website with special powers. Despite what you might have heard, most websites-and, more importantly, their readers-can benefit from becoming PWAs. And it's so easy! New A List Apart editor-in-chief Aaron Gustafson explains." https://alistapart.com/article/yes-that-web-project-should-be-a-pwa The Web in 2050 By Jacques Mattheij. "If you're reading this page it means that you are accessing a 'darknet' web page…" https://jacquesmattheij.com/the-web-in-2050 +08: TYPOGRAPHY. Fonts Don't Matter By Hampus Sethfors. "…I'm going to explain why fonts are overrated and what actually matters for readability…" https://axesslab.com/fonts-dont-matter/ Web Fonts: When You Need Them, When You Don't By Dave Gilbertson. "…if you're making a site, and you're just about to go searching for that perfect web font, please, at least consider using system fonts instead…" https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae +09: USABILITY. Flat UI Elements Attract Less Attention and Cause Uncertainty By Kate Meyer. "Flat interfaces often use weak signifiers. In an eyetracking experiment comparing different kinds of clickability clues, UIs with weak signifiers required more user effort than strong ones." https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ It's Official: Users Navigate Flat UI Designs 22 Percent Slower By Andrew Orlowski. "Put in some chrome and shade…" http://www.theregister.co.uk/2017/09/05/flat_uis_designs_are_22_per_cent_slower_official/ Tips for Icon Usability (Video) By Aurora Harley. "6 UX guidelines to ensure that your users recognize your icons and know what they mean. https://www.youtube.com/watch?v=ZF_25i-be8k F-Pattern in Reading Digital Content (Video) By Kara Pernice. "Eyetracking research shows people read Web content in the F-pattern. The results highlight the importance of following guidelines for writing for the Web." https://www.youtube.com/watch?v=XU1-Rz2Q7-E Does the Famous F-Shape Pattern in Eye Tracking Really Exist? By Kurtis Morrison. "…we've done an extensive amount of quantitative analysis of eye tracking data, and we've yet to find any evidence that this bias towards an F-Shape exists at all…" http://www.eyequant.com/blog/eye-tracking-f-shape-pattern-data Form Field Usability: Should You Use Single or Multi-Column Forms? (Original Research) By Ben Labay. "…If you're using multi-column forms, or thinking of, don't. The more linear the better." https://conversionxl.com/research-study/form-field-usability/ Cognitive Bias Cheat Sheet By Buster Benson. "Because thinking is hard…" https://betterhumans.coach.me/cognitive-bias-cheat-sheet-55a472476b18 Flashcards to Learn 168 Cognitive Biases By Misha Chellam. "We wanted a way to remember and quickly reference the information in Buster's post, so we ordered John Manoogian III's visual codex for our office wall.…" https://medium.com/tradecraft-traction/flashcards-to-learn-168-cognitive-biases-4c37f3418f15 [Section one ends.] ++ SECTION TWO: +10: 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.]