Topics

[webdev] Web Design Update: August 30, 2018

David Dillard
 




Laura Carlson <lcarlson@d.umn.edu>

Aug 30, 2018, 7:06 AM
to webdev
+++ WEB DESIGN UPDATE.
- Volume 17, Issue 10, August 30, 2018.

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

++ISSUE 10 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 th


 

ese categories:

01: ACCESSIBILITY.
02: CASCADING STYLE SHEETS.
03: EVALUATION & TESTING.
04: EVENTS.
05: HTML.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: USABILITY.
10: XML.

SECTION TWO:
11: What Can You Find at the Web Design Reference Site?

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Exploring WCAG 2.1 - 4.1.3 Status Messages
By Becky Gibson.
"Our series on the new WCAG 2.1 Success Criteria continues
with the last of the new low vision related success criteria, 4.1.3 Status Messages.
 It falls under guideline 4.1, Compatible…"
https://knowbility.org/blog/2018/WCAG21-413StatusMessages/

What is the Best Way to Dismiss Content on Hover or Focus?
By Detlev Fischer.
"The new WCAG 2.1 Success Criterion 1.4.13 Content on hover or focus
is a very recent addition to the standard. There is some uncertainty what
authors should do to make content on hover or focus dismissible - 
especially if content is shown just by CSS, i.e. without intervention of script…"
https://accessuse.eu/en/blog-post-en/what-is-the-best-way-to-dismiss-content-on-hover-or-focus.html

WCAG 2.1 Accessibility Checklist
By accessw3.
"Dynamic Checklist with Success Criteria copied from WCAG 2.1 Standard…"
http://accessw3.com/wcag21-accessibility-checklist.html

Digging into Inclusive Design with Derek Featherstone (Video)
By Chicago Digital Accessibility & Inclusive Design.
"…In this session, join Derek Featherstone as we dig into inclusive design 
as a practice and how it helps you systematically reach your goal of making 
things accessible…"
https://www.youtube.com/watch?v=DZ5Yh6vBNn8

Designing for Accessibility with POUR (Video)
By National Center on Accessible Educational Materials.
"An introduction to the four POUR principles 
(Perceivable, Operable, Understandable and Robust) that make 
for a more accessible experience in learning materials…"
https://www.youtube.com/watch?v=dzzlJQXmJIw

The Importance of Text Accessibility: How IBM's Content Clarifier Shows Us What We've Forgotten
By Jonathan Hassell.
"…Simpler means more credible, as well as more accessible. 
There's a prize to be won here, whatever the Guidelines say…"
http://www.hassellinclusion.com/blog/importance-text-accessibility/

Experiencing Accessibility
By Dan Oehmke and Jennie Delisi.
"During a conference call some time ago, my stress and frustration levels quickly maxed out.
We were reporting issues with accessibility for an enterprise application to one of our software vendors…"
https://mn.gov/mnit/media/blog/?id=38-350614

Accessibility Terms Defined
By Jaclyn Leduc.
"…we define everything from 'keyboard accessibility' to accessibility-related organizations and laws.
It's important to have a solid grasp on accessibility and how it may apply to you, and it starts
 by understanding the basics…"
https://www.3playmedia.com/2018/08/23/accessibility-terms-defined/

Beyond the Marketing Minute: WCAG 2.1 Compliance Tips for Designers
By Ashley Mugnolo.
"WCAG 2.1 is finally here with new recommendations for designers and UX professionals
so they can update and create websites and digital content in a host of industries to make
 them more accessible than ever to millions of users with a range of sensory disabilities…"
https://www.oneupweb.com/blog/wcag-2-1/

Exploring WCAG 2.1 for Australian Government Services
By The Digital Transformation Agency.
"Since the Web Content Accessibility Guidelines (WCAG) 2.1 were released
in June we've received questions about how to approach the development
of government services to meet these updated accessibility guidelines…"
https://www.dta.gov.au/blog/exploring-wcag-2-1-for-australian-government-services/

Policy Update: Accessibility of Information Technology
By University of Minnesota.
"The revised Policy on Accessibility of Information Technology:
Establishes the latest World-Wide Web Consortium (W3C) Web Content Accessibility Guidelines
(WCAG) 2.1 level AA to serve as the University standard…"
https://itss.d.umn.edu/news/a11y-u-policy


+02: CASCADING STYLE SHEETS.

How to Create Printer-Friendly Pages with CSS
By Craig Buckler.
"In this article, we review the art of creating printer-friendly web pages with CSS.…"
https://www.sitepoint.com/css-printer-friendly-pages/


+03: EVALUATION & TESTING.

Are Two Pairs of Eyes Better Than One? A Comparison of Concurrent Think- Aloud
and Co-Participation Methods in Usability Testing
By Obead Alhadreti, Pam Mayhew.
"This paper presents the results of a study that aimed to compare the traditional concurrent
think-aloud protocol with the co-participation method to determine the benefit of adding
an additional participant to the testing session…"
http://uxpajournal.org/concurrent-think-aloud-co-participation-methods-usability/

What Goes into a Well-Done Critique
By Jared M. Spool.
"…Four Elements of a Well-Done Critique…1: Respect…2: Dispassionate …3:
Lacking Authority…Justified Impressions and Concerns…"
https://articles.uie.com/critique/

Benchmarking State Government Websites
By Daniel Castro and Michael McLaughlin.
"A detailed review of 400 state government websites finds that while some states have
much better sites than others, every state has room to significantly improve so that it
better serves the public with easy and secure access to e-government services and
information.…59 percent of state websites passed the accessibility standard…"
https://itif.org/publications/2018/08/27/benchmarking-state-government-websites

How to Setup a Desktop Usability Test (Video)
By Kim Flaherty.
"There are a lot of elements involved in usability studies with a desktop computer.
In this video, we'll walk you through an example test setup, including the necessary
equipment, and discuss how to prepare for a test."
https://www.nngroup.com/videos/how-setup-desktop-usability-test/

Case Study: Iterative Design and Prototype Testing of the NN/g Homepage
By Kathryn Whitenton and Sarah Gibbons.
"The NN/g homepage redesign relied on rapid iterative prototyping, and usability testing,
to balance multiple design objectives."
https://www.nngroup.com/articles/case-study-iterative-design-prototyping/

User Personas: Traps And How To Overcome Them
By Anikó Kocsis.
"…We still think personas have proven themselves a necessary technique,
 but where does the controversy come from and how can we create good ones?…"
https://uxstudioteam.com/ux-blog/user-persona/


+04: EVENTS.

Digital Accessibility in Theory and Practice
September 12, 2018.
Cleveland, Ohio, U.S.A.
https://www.meetup.com/Cleveland-Accessibility-Meetup/events/253960204/

A11Y Talks - Love thy Keyboard
September 25, 2018.
Online
https://groups.drupal.org/node/534258

MidwestUX Conference 2018
October 11-13, 2018.
Chicago, Illinois, U.S.A.
https://www.2018.midwestuxconference.com/

CONNECT.TECH 2018
October 17-19, 2018.
Atlanta, Georgia, U.S.A.
http://connect.tech/

Talk UX Boston
October 17-19, 2018.
Boston, Massachusetts, U.S.A.
https://www.talk-ux.com/

ICT Accessibility Testing Symposium: Mobile Testing, 508 Revision, and Beyond
November 7-8, 2018.
Arlington, Virginia, U.S.A.
https://www.ictaccessibilitytesting.org/

ffconf 2018
November 8-9, 2018.
Brighton, England, United Kingdom
https://2018.ffconf.org/


+05: HTML.

UX And HTML5: Let's Help Users Fill In Your Mobile Form (Part 2)
By Stéphanie i Walter.
"…This is the second part in a series on enhancing mobile forms for users…"
https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-2/


+06: JAVASCRIPT.

JavaScript for Impatient Programmers
By Axel Rauschmayer.
"Goal of this book: make JavaScript less challenging to learn for newcomers,
by offering a modern view that is as consistent as possible…"
http://exploringjs.com/impatient-js/index.html


+07: MISCELLANEOUS.

Become a Standards and Accessibility Champion (Interview)
By Net staff.
"…Bruce Lawson has spent years diligently advocating on behalf of developers
and championing inclusivity in user experience design for brands such as
Opera and Wix. We catch up with him to discuss building at scale, developer
advocacy and his Generate London talk…"
https://www.creativebloq.com/advice/become-a-standards-and-accessibility-champion

Microsoft's Hackathon Isn't Just About Fixing the World's Problems
By Ian Sherr and Connie Guglielmo.
"…'When we talk about our mission of empowering every person and every organization
on the planet to achieve more, it can't be just a set of words. It has to in some sense
capture the very essence of who we are in all of the decisions we make, in the products
we create and how we show up with our customers, Nadella said in an interview'…"
https://www.cnet.com/news/microsofts-hackathon-isnt-just-about-fixing-the-worlds-problems/


+08: NAVIGATION.

Accessible Breadcrumb Navigation Pattern
By Scott O'Hara.
"Examples of a breadcrumb navigation using aria-label to provide an accessible name,
and aria-current to indicate the currently active link…"
https://scottaohara.github.io/a11y_breadcrumbs/


+09: USABILITY.

How To Make A Dashboard That Doesn't Suck
By Dylan Wilbanks.
"…there's a problem when you prioritize curb appeal above all else:
Your dashboard will likely be utterly useless. It will be a work of art
to hang from a wall, but it won't be a dashboard…"
http://www.uxbooth.com/articles/how-to-make-a-dashboard-that-doesnt-suck/

UX And HTML5: Let's Help Users Fill In Your Mobile Form (Part 1)
By Stéphanie Walter.
"Do you test your forms on real users and real devices? If not, you should.
Let's take a look at some of the techniques that can help you take your forms
to the next level and help users fill them in."
https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/

Simple Rules for Designing Web & Mobile Forms
By Thomas Drach.
"…Forms should be designed well. Here are a couple notes and observations…"
http://subtract.design/entry/forms/

Does Anyone Use Social Sharing Buttons on Mobile?
by Moovweb.
"Visit a lot of websites, and you'll see precious screen space dedicated
 to social sharing buttons on mobile websites, imploring users to share
 the content on Facebook, Twitter, Pinterest or other social networks…"
https://www.moovweb.com/anyone-use-social-sharing-buttons-mobile/

The User Experience of U.S. Government Websites
By Jeff Sauro.
"…We collected SUPR-Q data, including NPS data, and investigated visitors'
reasons for using the site, website attitudes, understanding of key features,
and ability to complete tasks on each of the websites…"
https://measuringu.com/usgov-ux/


+10: XML.

Real World Use of CSS with SVG
By Craig Buckler.
"SVG is a lightweight vector image format that's used to display a variety of
graphics on the Web and other environments with support for interactivity
and animation. In this article, we'll explore the various ways to use CSS
with SVG, and ways to include SVGs in a web page and manipulate them."
https://www.sitepoint.com/real-world-use-of-css-with-svg/


[Section one ends.]


++ SECTION TWO:

+11: 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

lcarlson@d.umn.edu


[Issue ends.]
Preview YouTube video Designing for Accessibility with POUR