[webdev] Web Design Update: November 30, 2017

David P. Dillard


Date: Thu, 30 Nov 2017 06:29:10 -0600
From: Laura Carlson <>
To: webdev <>
Subject: [webdev] Web Design Update: November 30, 2017


- Volume 16, Issue 23, November 30, 2017.

An email newsletter to distribute news and information about web
design and development.


SECTION ONE: New references.
What's new at the Web Design Reference site?

New links in these categories:



03: COLOR.







10: TOOLS.




13: What Can You Find at the Web Design Reference Site?

[Contents ends.]

++ SECTION ONE: New references.


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.

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…" 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

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…" 3-easy-steps-city-website-accessibility-wcag-2-0-aa/

J. Courtney Cunningham Settles Website Accessibility Lawsuit Against
City of Miami


"Suit guarantees closed captioning for all videos on the city's website…"


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…"

Common Responsive Layouts with CSS Grid (and some without!)

By Jo Franchetti.

"Example code for you to try out, change and make your own…" 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…"

Performance of CSS Selectors Is Still Irrelevant

By Jens Oliver Meiert.

"Selector performance is not something to optimize for…"

+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…" os-high-contrast-versus-inverted-colors.html


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…"

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…"

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…"

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

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…"

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."

+05: EVENTS.

Digital Accessibility Lightning Talks & Holiday Social
December 6, 2017.
Chicago, Illinois, U.S.A.
Live stream:
Live captions:

Inclusive PDFs by Design
December 12, 2017.

Mobile Screen Readers 101 - Hands On for Developers & Designers
January 4, 2018.
Chicago, Illinois, U.S.A.

PEAT Talks: Expanding Accessibility Awareness in Higher Ed
January 18, 2018.

Smashing Conf London 2018
February 7-8, 2018.
London, England, United Kingdom

Advanced CSS Layouts With Flexbox and CSS Grid
February 9, 2018.
London, England, United Kingdom advanced-css-layouts-with-flexbox-and-css-grid-london/

February 12-16, 2018.
Wellington City, New Zealand


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…" generating-wireframe-boxes-with-css-and-html5/


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


If You're Going Out Of San Francisco… (Video)

By Bruce Lawson.

Bruce's ffconf 2017 presentation.


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. …" 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. "


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."

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." for-wedding-invitations-and-wine-labels-not-for-the-web/


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."

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…"

Are Notifications A Dark Pattern?

By Andrew Wilshere.

"Have you ever had a nightmare where you were literally drowning in
little red notification badges…"

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

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…"

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…"

[Section one ends.]


+13: What Can You Find at the Web Design Reference Site?

Accessibility Information.

Association Information.

Book Listings.

Cascading Style Sheets Information.

Color Information.

Drupal Information.

Evaluation & Testing Information.

Event Information.

HTML Information.

Information Architecture Information.

JavaScript Information.

Miscellaneous Web Information.

Navigation Information.

PHP Information.

Sites & Blogs Listing.

Standards, Guidelines & Pattern Information.

Tool Information.

Typography Information.

Usability Information.

XML Information.

[Section two ends.]



WEB DESIGN UPDATE is available by subscription. For information on how
to subscribe and unsubscribe please visit:

The Web Design Reference Site also has a RSS 2.0 feed for site updates.


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:


Until next time,

Laura L. Carlson

Information Technology Systems and Services

University of Minnesota Duluth

Duluth, MN U.S.A. 55812-3009

[Issue ends.]