September 7, 2017
.
Date: Thu, 7 Sep 2017 06:18:58 -0500
From: Laura Carlson <lcarlson@d.umn.edu>
To: webdev <webdev@d.umn.edu>
Subject: [webdev] Web Design Update: September 7, 2017
+++ 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:
+ 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.]
netgoldblog 