[webdev] Web Design Update: May 25, 2017

David P. Dillard
 

.

.


Date: Thu, 25 May 2017 06:25:44 -0500
From: Laura Carlson <lcarlson@d.umn.edu>
To: webdev <webdev@d.umn.edu>
Subject: [webdev] Web Design Update: May 25, 2017



+++ WEB DESIGN UPDATE.

- Volume 15, Issue 48, May 25, 2017.



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



++ISSUE 48 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: EVENTS.

04: HTML5.

05: INFORMATION ARCHITECTURE.

06: JAVASCRIPT.

07: TOOLS.

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.




GAAD: I Wish I'd Known...

By Ian Pouncey.

"To celebrate Global Accessibility Awareness Day we've asked our
accessibility engineers for things they wish they'd known when
starting out in accessibility...

https://www.paciellogroup.com/blog/2017/05/gaad-2017-i-wish-id-known/



Pragmatic Accessibility: A How-To Guide for Teams (Video)

By Rob Dodson.

"...This talk will explain how to effectively review a site for
accessibility and how to build accessibility considerations into your
team process so each team member knows their role, and has the
appropriate training material. The goal is for attendees to walk away
with an actionable process which they can immediately use to assess
and improve their products' accessibility and overall user
experience..."

https://www.youtube.com/watch?v=A5XzoDT37iM



Accessible Focus Management: Tab Order vs Focus Placement

By Mark Magennis.

"Ive been working on a video-based eLearning platform recently. We
(the client and myself) seem to have tied ourselves in knots regarding
how best to implement tab order and focus placement to give the most
efficient user experience for sighted keyboard users and screen reader
users. Having finally unravelled those knots, it all looks pretty
simple really so I thought I'd share it..."

http://interaccess.ie/accessible-focus-management-tab-order-vs-focus-placement/



Anatomy of an Accessible Auto Suggest

By Adem Cifcioglu.

"...These are my requirements to make an auto-suggest accessible. I've
included code snippets throughout and linked to a working codepen at
the end of the post..."

http://uxmastery.com/anatomy-of-an-accessible-auto-suggest/



UX of Stairs: When Simple Tasks Aren't So Simple (Video)

By Greg Tarnoff.

"As a user experience professional, I work hard to consider the end
user in developing products. However, without knowing it we all bring
a bias to our work simply because we haven't experienced certain
things others have. This bias leaves our products and users
wanting...Two years ago my eyes were opened to this as I developed a
disability that changed everything in my life. 'UX of Stairs'
discusses the impact on my life this illness has had as well as how it
opened my eyes to things in the physical and digital worlds that
previously went unnoticed by me and many others...

https://www.youtube.com/watch?v=TfiNP8iWDSo



Quick Reference Checklist for Graphic Designers (PDF)

By Tagged PDF.

"Use the checklist below to ensure you are designing (PDFs)for accessibility..."

http://taggedpdf.com.au/wp-content/uploads/2015/02/TaggingCheckListDesignerCopywriter.pdf



Glacial Progress on Digital Accessibility

By Carl Straumsheim.

"Data from 700,000 classes show digital course materials have gotten
only slightly more accessible to students with disabilities over the
last five years..."

https://www.insidehighered.com/news/2017/05/18/data-show-small-improvements-accessibility-course-materials



Example Legal Action Against Inaccessible Websites

By Ken Nakata.

"...Organizations continuously come under fire from accessibility
advocates, and recent litigation is targeting compliance with WCAG 2.0
Level A and AA..."

]https://insight.cryptzone.com/accessibility/example-legal-action-against-inaccessible-websites/



Website Accessibility in the United States: What Are Your Requirements

Under the ADA?

By Karl Groves.

"...Whether or not ADA explicitly states that Websites must be
accessible, one thing is for sure: The DOJ believes they should be and
so do a whole pile of plaintiffs. Being proactive about accessibility
turns the whole thing into a non-issue."

http://www.karlgroves.com/2017/05/23/website-accessibility-in-the-united-states-what-are-your-requirements-under-the-ada/



Miami-Dade County Public Schools Settles Digital Discrimination Lawsuit

By newswire.com.

"Consent decree guarantees hearing impaired have equal access to
closed caption video content, according to J. Courtney Cunningham,
PLLC..."

https://www.newswire.com/news/miami-dade-county-public-schools-settles-digital-discrimination-lawsuit-19572593




+02: CASCADING STYLE SHEETS.




A Very Good Time to Understand CSS Layout

By Rachel Andrew.

"I've been building a set of common UI patterns for my CSS Grid
resource site, Grid by Example..."

https://www.rachelandrew.co.uk/archives/2017/05/24/a-very-good-time-to-understand-css-layout/



Gridded Headings

By Eric A. Meyer.

"In my ongoing experiments with both a realignment of meyerweb's
design and CSS Grid, I came up with an interesting
heading-and-subheading technique I'd like to share. It allows two
elements to be centered as a block, while letting them text-align with
respect to each other, while still line-wrapping if necessary."

http://meyerweb.com/eric/thoughts/2017/05/19/gridded-headings/



Learn CSS Grid

By Jonathan Suh.

CSS Grid is a powerful tool that allows for two-dimensional layouts to
be created on the web.

http://learncssgrid.com/




+03: EVENTS.




Web Rebels
June 1-2, 2017.
Oslo, Norway
https://www.webrebels.org/



UX Burlington
June 9, 2017.
Burlington, Vermont, U.S.A.
http://uxburlington.com/



Achieving Web Accessibility: Make Sure Your Online Presence Works - For Everyone
June 14, 2017.
Watertown, Massachusetts, U.S.A.
http://www.perkins.org/get-involved/events/achieving-web-accessibility-make-sure-your-online-presence-works-for-everyone



WCAG 2.0 - Operable
June 21, 2017.
Chicago, Illinois, U.S.A.
https://www.meetup.com/a11ychi/events/233845763/




+04: HTML5.




Google's Proprietary Fork of HTML Is Taking Over the Open Web

By Nick Heer.

"Ingrid Lunden, TechCrunch: As Google looks for ways to keep people
using its own mobile search to discover content - in competition with
apps and other services like Facebook's Instant Articles - the company
is announcing some updates to AMP, its collaborative project to speed
up mobile web pages..."

https://pxlnv.com/linklog/amp-taking-over/




+05: INFORMATION ARCHITECTURE.




Why IA Matters for UX - A Brief History of Information Architecture

By Lucia Z.Wang.

"...A well-designed wayfinding system helps us navigate a new
environment in order to answer the following questions..."

https://uxdesign.cc/a-brief-history-of-information-architecture-d26b17205e7b




+06: JAVASCRIPT.




To ARIA! The Cause of, and Solution to, All Our Accessibility Problems

By Jon Whiting.

"When WebAIM evaluates a client's website for accessibility, we often
spend more time evaluating and reporting on ARIA use than any other
issue. Almost every report we write includes a section cautioning
against ARIA abuse and outlining ARIA uses that need to be corrected
or, most often, removed. Ironically, this is often followed by a list
of issues that can only be addressed with ARIA..."

http://webaim.org/blog/aria-cause-solution/




+07: TOOLS.




CADET from NCAM: Free Captioning Tool for Online Videos

By Geoff Freed.

"CADET is free, downloadable caption-authoring software that enables
anyone to produce high-quality caption files that are compatible with
any media player that supports the display of captions..."

https://lists.w3.org/Archives/Public/w3c-wai-ig/2017AprJun/0178.html



JavaScript Bookmarklets for Accessibility Testing

By Paul J. Adam.

"Bookmarklets for Accessibility Testing use JavaScript to highlight
roles, states, and properties of accessibility elements on the page.
They are accessible to screen reader users and work on any browser
including mobile phones..."

http://pauljadam.com/bookmarklets.html



Announcing the BarrierBreak CSS Accessibility Extension

By Shwetank Dixit.

"Happy Global Accessibility Awareness Day, 2017! We see it fitting to
announce a nifty little project we've been working on. It's a browser
extension called the BarrierBreak CSS Accessibility Extension and you
can install it in Chrome right now..."

http://blog.barrierbreak.com/2017/05/18/announcing-the-barrierbreak-css-accessibility-extension/



ChromeLens

By Zhi An ‚ÄčNG.

"ChromeLens is a Google Chrome extension that provides a suite of
tools to help with web accessibility development."

https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=en




+08: TYPOGRAPHY.




The Rules of Responsive Web Typography

By Zell Liew.

"...This article aims to provide both designers and developers with
the foundation from which to begin communication on the subject of
typography. We will cover necessary design principles and explore
practical solutions for responsive typography..."

http://www.creativebloq.com/how-to/the-rules-of-responsive-web-typography




+09: USABILITY.




Designing UX: Forms

By Jessica Enders.

"This is an excerpt from Chapter 5 of Jessica Enders's new book
Designing UX: Forms."

http://www.uxmatters.com/mt/archives/2017/05/designing-ux-forms.php



Big Pictures on Small Screens: Remove, Resize or Reorganize

By Amy Schade.

"When using large-screen images on smaller screens, remove images that
don't add information. Then, pay close attention to cropping, scaling
and placement."

https://www.nngroup.com/articles/big-pictures-small-screens/



Low-Hanging Fruits For Enhancing Mobile UX

By Nick Babich.

"... In today's article, I'll share seven UX design tips that I think
are key for creating really great mobile user experiences..."

https://www.smashingmagazine.com/2017/05/enhancing-mobile-design-ux/



Brand Vocabulary in the Context of UX: Key Terms Defined

By Sarah Gibbons.

"A cheat sheet of brand-related terms will help designers, developers,
and product managers design experiences that reflect an organization's
brand"

https://www.nngroup.com/articles/ux-brand-terms-defined/



Your Digital Interface is Your Brand

By Gerry McGovern.


"...In the world of digital it is the digital architecture interface
that creates the first and lasting impressions. Organizations need to
take as much care of their digital buildings as they used to take of
their physical buildings."

http://gerrymcgovern.com/your-digital-interface-is-your-brand/





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




.


.

Join public-health@groups.io to automatically receive all group messages.