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:

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

Advertisements