.
Date: Thu, 30 Nov 2017 06:29:10 -0600
From: Laura Carlson <[log in to unmask]>
To: webdev <[log in to unmask]>
Subject: [webdev] Web Design Update: November 30, 2017
+++ 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:[log in to unmask]
[Issue ends.]
--
|
