+++ WEB DESIGN UPDATE. - Volume 16, Issue 23, November 30, 2017. An email newsletter to distribute news and information about web design and development. ++ISSUE 23 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: INFORMATION ARCHITECTURE. 07: JAVASCRIPT. 08: MISCELLANEOUS. 09: NAVIGATION. 10: TOOLS. 11: TYPOGRAPHY 12: USABILITY. SECTION TWO: 13: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. 24 Accessibility By Experts From Around the World. A series of 24 articles devoted to digital accessibility begins December 1 and runs through December 24. http://24a11y.com Beware Smushed Off-Screen Accessible Text By J. Renée Beach. "My colleague, Matt King, encounters a lot of friction when using web UIs. Matt uses a screen reader to access the web…" https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe How to Test Video Players for Accessibility By Patrick Loftus. "One-third of all online activity is spent watching video content, and video traffic accounts for 69% of all global consumer internet traffic…" http://www.3playmedia.com/2017/11/29/test-video-players-accessibility/ 3 Easy Steps to City Website Accessibility for WCAG 2.0 AA By Martin Lind. "Guest columnist Martin Lind has website accessibility tips for headings and tags, required for WCAG 2.0 AA…" https://efficientgov.com/blog/2017/11/27/3-easy-steps-city-website-accessibility-wcag-2-0-aa/ J. Courtney Cunningham Settles Website Accessibility Lawsuit Against City of Miami By PRWEB. "Suit guarantees closed captioning for all videos on the city's website…" http://www.prweb.com/releases/2017/11/prweb14956094.htm +02: CASCADING STYLE SHEETS. On the Growing Popularity of Atomic CSS By Ollie Williams. "Even if you consider yourself a CSS expert, chances are that at some point on a large project you've had to deal with a convoluted, labyrinthine stylesheet that never stops growing. Some stylesheets can feel like a messy entangled web of inheritance…" https://css-tricks.com/growing-popularity-atomic-css/ Common Responsive Layouts with CSS Grid (and some without!) By Jo Franchetti. "Example code for you to try out, change and make your own…" https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df Learn CSS Grid in 5 Minutes By Per Harald Borgen. "A quick introductions to the future of website layouts…" https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228 Performance of CSS Selectors Is Still Irrelevant By Jens Oliver Meiert. "Selector performance is not something to optimize for…" https://meiert.com/en/blog/performance-of-css-selectors-2/ +03: COLOR. OS High Contrast versus Inverted Colors By Adrian Roselli. "There are different ways to make a web page more easy to read, but there are two options that come directly from the operating system that many developers and designers seem to confuse — high contrast and inverted colors…" http://adrianroselli.com/2017/11/os-high-contrast-versus-inverted-colors.html +04: EVALUATION & TESTING. DIY Recruiting: How to Find Participants for Your Research By Ania Mastalerz. "One thing is inevitable in user research - at some point you're going to have to find some people to take part in it. Finding them isn't always easy…" https://medium.com/mixed-methods/diy-recruiting-how-to-find-participants-for-your-research-6f9a05dd1a33 Can I Leave This One Out? The Effect of Dropping an Item From the SUS By James R. Lewis and Jeff Sauro. "There are times when user experience practitioners might consider using the System Usability Scale (SUS), but there is an item that just doesn't work in their context of measurement…" http://www.uxpajournal.org/dropping-item-sus/ SUPR-Qm: A Questionnaire to Measure the Mobile App User Experience By Jeff Sauro and Paree Zarolia. "In this paper, we present the SUPR-Qm, a 16-item instrument that assesses a user's experience of a mobile application…" http://www.uxpajournal.org/supr-qm-measure-mobile-ux/ True Intent Survey: Understanding Why Users Visit Your Site By Chris Gray. "…The key ingredient to running a successful True Intent Survey is an appropriate level of granularity with the reason for visiting (top tasks)…" http://www.nomat.com.au/true-intent-survey/ Predicting Post-Task User Satisfaction With Weibull Analysis of Task Completion Times By Bernard Rummel. "Task completion times have been shown to follow Weibull distributions, with parameters reflecting different aspects of the task solution process…" http://www.uxpajournal.org/user-satisfaction-weibull-task-times/ 3 Signs Your Team Isn't Doing Enough User Research By Sarah Doody. "…My advice about doing research is simple: start small, but just start. Don't let yourself or your team argue subjectively in another feature debate. Don't launch another feature that's more complicated than it needs to be. And don't confuse your users with with a poor first experience that doesn't solve an immediate problem for them." https://uxmastery.com/3-signs-team-isnt-enough-user-research/ +05: EVENTS. Digital Accessibility Lightning Talks & Holiday Social December 6, 2017. Chicago, Illinois, U.S.A. https://www.meetup.com/a11ychi/events/238768965/ Live stream: https://goo.gl/jrovdH Live captions: https://goo.gl/ga8zxN Inclusive PDFs by Design December 12, 2017. Online http://aem.cast.org/about/events/2017/12/inclusive-pdfs-by-design.html Mobile Screen Readers 101 - Hands On for Developers & Designers January 4, 2018. Chicago, Illinois, U.S.A. https://www.meetup.com/a11ychi/events/237005990/ PEAT Talks: Expanding Accessibility Awareness in Higher Ed January 18, 2018. Online. http://www.peatworks.org/content/webinars/2018/01/Teach-Access Smashing Conf London 2018 February 7-8, 2018. London, England, United Kingdom https://www.smashingmagazine.com/events/london-2018/ Advanced CSS Layouts With Flexbox and CSS Grid February 9, 2018. London, England, United Kingdom https://www.smashingmagazine.com/workshops/advanced-css-layouts-with-flexbox-and-css-grid-london/ Webstock February 12-16, 2018. Wellington City, New Zealand https://www.webstock.org.nz/18/ +06: INFORMATION ARCHITECTURE. Generating Wireframe Boxes with CSS and HTML5 By Eric A. Meyer. I was recently noodling around with some new layout ideas for An Event Apart's speaker pages (e.g., Chris Coyier's or Jen Simmons') and wanted to share the ideas with other members of the team. But what I really wanted to show was wireframes to convey basic arrangement of the pieces, since I hadn't yet done any time polishing details…" http://meyerweb.com/eric/thoughts/2017/11/27/generating-wireframe-boxes-with-css-and-html5/ +07: JAVASCRIPT. A Content Slider By Heydon Pickering. "Carousels (or 'content sliders') are like men. They are not literally all bad - some are even helpful and considerate. But I don't trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don't have the choice. Hence this article…" https://inclusive-components.design/a-content-slider/ +08: MISCELLANEOUS. If You're Going Out Of San Francisco… (Video) By Bruce Lawson. Bruce's ffconf 2017 presentation. https://www.youtube.com/watch?v=jhJGs2MUTb4 +09: NAVIGATION. Global Navigation to Improve Website By Priscilla Esser. "When you're designing a new website, application, or other product, you always start with the global idea and structure before addressing more detailed issues. …" https://www.interaction-design.org/literature/article/implement-global-navigation-to-improve-website-usability +10: TOOLS. Web Captioner By Curt Grimes. "Web Captioner is a web-based speech recognition tool that displays a real-time transcription in your browser. " https://webcaptioner.com/help/general/what-is-web-captioner/ +11: TYPOGRAPHY. Typography for Glanceable Reading: Bigger Is Better By Page Laubheimer. "Fonts to support glancing at individual words should be larger, in noncondensed widths, and uppercase over lowercase." https://www.nngroup.com/articles/glanceable-fonts/ Centered Text is Good for Wedding Invitations and Wine Labels, not for the Web By Deborah Edwards-Onoro. "…Improve readability of your content by using left-justified text instead of centered text. It's easier and faster to read text that doesn't force the reader to search for the beginning of each line." https://www.lireo.com/centered-text-is-good-for-wedding-invitations-and-wine-labels-not-for-the-web/ +12: USABILITY. Zigzag Image-Text Layouts Make Scanning Less Efficient By Kim Flaherty. "Decorative images used in an alternating list layout caused users to stumble when scanning the page in an eyetracking study. Users scanned efficiently on pages where text and imagery were vertically aligned." https://www.nngroup.com/articles/zigzag-page-layout/ Dark Patterns Harm Usability By Zip Board. "Any tricks on websites and apps that make users sign up for or buy things they did not intend to, or mislead and manipulate users are called dark patterns…" https://blog.zipboard.co/dark-patterns-harm-usability-5b75e293e7a7 Are Notifications A Dark Pattern? By Andrew Wilshere. "Have you ever had a nightmare where you were literally drowning in little red notification badges…" http://trydesignlab.com/blog/are-notifications-a-dark-pattern-ux-ui/ Form Field Usability: Consider Using Localized Input Masks for 'Phone' and Other Restricted Inputs (64% Don't) By Edward Scott. "Input masks can help users enter data in restricted inputs, but there are many details to get right to ensure input masks work well for users…" https://baymard.com/blog/input-masking-form-field Video Backgrounds Suck. Ban Them From Your Website By Michiel Heijmans. "'I just love those video backgrounds and we need them on our new website.' No, you don't…" https://yoast.com/video-backgrounds-suck/ Ask Alexa (To Better Understand Your Users) By John Cutler. "I've been using this exercise recently, and have mentioned it at a handful of conferences…" https://hackernoon.com/ask-alexa-to-better-understand-your-users-cb3b1fd04a1c [Section one ends.] ++ SECTION TWO: +13: 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.]