Web Design Update: July 2, 2020

423 views
Skip to first unread message

Laura Carlson

unread,
Jul 2, 2020, 7:08:59 AMJul 2
to webdev
+++ WEB DESIGN UPDATE.
- Volume 19, Issue 01, July 02, 2020.

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

++ISSUE 01 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: HTML.
07: INFORMATION ARCHITECTURE.
08: JAVASCRIPT.
09: MISCELLANEOUS.
10: NAVIGATION.
11: TOOLS.
12: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Infographic: Web Accessibility for Designers
By WebAIM.
"Optimal accessibility should start early in the visual design
process. This updated infographic highlights many important principles
of accessible design."
https://webaim.org/resources/designers/

What You Need to Know About Black People, Disability, and Accessibility (Video)
By Angela Hooker.
Angela's JuneteenthConf presentation.
https://www.youtube.com/watch?v=2W7QCYzOn_U

Accessible to Some
By Manuel Matuzović.
"Your website, app, or new feature is only half as good if only some
people can access it. Consider inclusion and diversity from the very
beginning and test properly. A score of 100 in Lighthouse or 0 errors
in axe doesn't mean that you're done, it means that you're ready to
start manual testing and testing with real users, if possible. Before
just you build and launch something, think about your users first and
how your decisions might affect them."
https://www.matuzo.at/blog/accessible-to-some/

Takin' Five (Videos)
By Ethan Marcotte.
"…I've been working with Aquent Gymnasium to produce a series of five
short tutorial videos, which have been launching over the course of
this past week. Since the last video just went live, I'm thrilled to
share the whole list with you. 1.) Introduction to using VoiceOver on
macOS 2.) Designing beautiful focus states 3.) Flexible and accessible
typesetting 4.) Responsively designing with viewport units 5.)
Designing beautiful and accessible drop caps…"
https://ethanmarcotte.com/wrote/takin-five/

Accessible Data Tables
By Bruce Lawson.
"I've been working on a client project and one of the tasks was
remediating some data tables. As I began researching the subject, it
became obvious that most of the practical, tested advice comes from my
old mates Steve Faulkner and Adrian Roselli…"
https://www.brucelawson.co.uk/2020/accessible-data-tables/

Scripted User Flow Testing vs. End-To-End Testing for Accessibility
By Mark Steadman.
"Accessibility APIs and end-to-end testing are a great way to catch up
to 50% of your organization's accessibility defects. But what if your
organization doesn't have automated testing built out? How can you
test for accessibility defects while you code?…"
https://www.deque.com/blog/scripted-user-flow-testing-vs-end-to-end-testing-for-accessibility/

Accessibility New York City: Using Task-Oriented Walk Throughs for
Accessibility Reviews
By Deborah Edwards-Onoro.
"…One upcoming event I'm looking forward to is Accessibility New York
City’s July meetup when they host Sarah Pulis speaking on Using
Task-Oriented Walk Throughs for Accessibility Reviews. The
presentation will be held on July 14, 2020. Read on to learn more
about the talk and presenter…"
https://www.lireo.com/accessibility-nyc-task-oriented-walk-through-accessibility/

San Diego County CU Must Face Claim Over Website Accessibility, Court Rules
By Mike Scarcella.
"California's Fourth Appellate District overturns a trial judge who
had dismissed the complaint shortly before the scheduled trial…"
https://www.cutimes.com/2020/06/22/san-diego-county-cu-must-face-claim-over-website-accessibility-court-rules/

Martinez v. San Diego County Credit Union Decision (PDF)
http://sos.metnews.com/sos.cgi?0620//D075360

Correction: Last week the "Key Considerations for Flowchart
Accessibility" article By Minnesota IT Services had the wrong URL. It
should have have been:
https://mn.gov/mnit/media/blog/?id=38-436349
Apologies.


+02: CASCADING STYLE SHEETS.

Responsive Styling Using Attribute Selectors
By Jakob Eriksen.
"One of the challenges we face when implementing class-based atomic
styling is that it often depends on a specific breakpoint for
context…"
https://css-tricks.com/responsive-styling-using-attribute-selectors/

Grid Cheatsheet
By @yoksel
"A grid container establishes a new grid formatting context for its contents…"
https://yoksel.github.io/grid-cheatsheet/

CSS background-repeat: round
By David Walsh.
"The CSS spec is full of gems that sneak their way past most of us web
designers and developers. Stuff like :focus-within,
prefers-reduced-motion, and prefers-color-scheme suddenly make their
way into CSS without us really finding out for months or years. One
such example is background-repeat: round…"
https://davidwalsh.name/css-background-repeat-round

Accordion Rows in CSS Grid
By Eric A Meyer.
"Another aspect of the meyerweb redesign I'd like to explore is the
way I'm using CSS Grid rows to give myself more layout
flexibility…"
https://meyerweb.com/eric/thoughts/2020/07/01/accordion-rows-in-css-grid/

When Sass and New CSS Features Collide
By Ana Tudor.
"…this is going to be a post about the issues I've encountered, how I
go around them, and why I still find Sass necessary these days…"
https://css-tricks.com/when-sass-and-new-css-features-collide/


+03: COLOR.

The Saga of Accessible Colors (Video)
By Ted Drake.
"I recently gave a presentation for Maxability about color contrast…
http://www.last-child.com/accessible-colors-video/


+04: EVALUATION & TESTING.

Embracing Top Tasks at Toyota (Part 2)
By Gerry McGovern.
"…Quality digital is more maintenance than creation. Yet digital has
huge engines of creation and often nonexistent maintenance. And where
maintenance and support do exist they are generally seen as low-level
positions with low-level respect. That must change."
https://gerrymcgovern.com/top-tasks-at-toyota-part-2/


+05: EVENTS.

Cognitive Accessibility Considerations
Brisbane web accessibility - Monthly Meetup
July 7, 2020.
Online
https://www.meetup.com/Brisbane-Web-Accessibility/events/hpkdnrybckbkb/

Effective Wireframing
July 9, 2020.
Online
https://www.nngroup.com/online-seminars/effective-wireframing-techniques/

Using Task-Oriented Walk Throughs for Accessibility Reviews
July 14, 2020.
Online
https://www.meetup.com/A11yNYC/events/271624600/

Introduction to Assistive Technology from a Remote Perspective
July 18, 2020.
Online
https://www.csun.edu/cod/webinars

A11y Talks (July 2020): The Many Lives of a Notification
July 23, 2020.
https://groups.drupal.org/node/536011

Digital Accessibility: What Have we Learned and What does the Future Hold?
July 23, 2020.
Online
https://adata.org/event/digital-accessibility-what-have-we-learned-and-what-does-future-hold

UX Conference August
August 10-21, 2020
Online.
https://www.nngroup.com/training/august/

W3C Workshop on Web and Machine Learning
September 2020 Series of 4 virtual live sessions
https://www.w3.org/2020/06/machine-learning-workshop/

Smashing Conference Austin
October 13-14, 2020.
Austin, Texas, U.S.A.
https://smashingconf.com/austin-2020/postponed

The 5th Annual ICT Accessibility Testing Symposium
Week of October 19, 2020.
Online.
https://2020ict.org/


+06: HTML.

Accessible HTML Toggle Button (Switch)
By Erik Kroes.
"Everybody loves toggle switch on mobile, or so I've heard. But if
you're building a website, how do you reproduce this without excluding
people…"
https://www.erikkroes.nl/blog/accessible-html-toggle-button-switch/


+07: INFORMATION ARCHITECTURE.

Information And Information Architecture: The BIG Picture
By Carrie Webster.
"…how we use information, the power it yields, the sheer volume of
data we have created, the impacts of information overload, and how
information architecture can be used to organize and structure this
information for those seeking it. There is no denying that in this age
of Information why it is so important to focus on information
architecture as a solid foundation for delivering the right
information to your customers to make their lives easier."
https://www.smashingmagazine.com/2020/07/information-architecture-big-picture/


+08: JAVASCRIPT.

Introduction to Accessible Rich Internet Applications (ARIA)
By WebAIM.
"WebAIM article has been significantly updated with new information
and resources."
https://webaim.org/techniques/aria/


+09: MISCELLANEOUS.

Design Thinking: An Introduction
By Justin Mifsud.
"Design thinking is a problem-solving framework that is ideal for
tackling ill-defined or unknown problems…"
https://usabilitygeek.com/design-thinking-an-introduction/

33 Web Development Terms You May Not Have Heard Of
By Jens Oliver Meiert.
"Web Development has its own, special vocabulary that easily consists
of several thousand terms. Even if you're an experienced developer
you're unlikely to know all of them. Still, do you like to try your
knowledge? How many of the following 33 terms * do you know…"
https://meiert.com/en/blog/33-web-development-terms/


+10: NAVIGATION.

Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation
By Louis Lazaris.
"This week I did some research to try to build a hamburger menu that
opens a slide-out navigation panel, a common design pattern nowadays.
But I wanted to ensure the whole thing was keyboard-friendly and as
accessible as possible…"
https://www.impressivewebs.com/accessible-keyboard-friendly-hamburger-menu-slide-out-navigation/


+11: TOOLS.

ATAG Report Tool
By W3C Accessibility Education and Outreach Working Group.
"This tool helps evaluators report on the accessibility of authoring
tools. It guides you through the Authoring Tool Accessibility
Guidelines (ATAG) requirements, lets you record your evaluation
results for each requirement, and generates a report of the authoring
tool's ATAG conformance."
https://www.w3.org/WAI/atag/report-tool/

Authoring Tool Accessibility Report Generator (keywords: CMS, ATAG, …)
By Shawn Henry.
ATAG Report Tool announcement.
https://lists.w3.org/Archives/Public/public-wai-announce/2020AprJun/0006.html


+12: USABILITY.

Avoid PDF for On-Screen Reading
By Jakob Nielsen and Anna Kale.
"Forcing users to browse PDF files causes frustration and slow task
completion, compared to standard webpages. Use PDF only for documents
that users will print. In those cases, following 10 basic guidelines
will minimize usability problems."
https://www.nngroup.com/articles/avoid-pdf-for-on-screen-reading/

A Bad User Interface Is A Cranky Receptionist
By Roxanne Abercrombie.
"…your user interface is the face of your company. Do not make yours miserable."
https://usabilitygeek.com/bad-user-interface-cranky-receptionist/

5 Tips For Improving Your UX Writing
By Sean McGowan.
"…Do not Shunt It To The Copywriter…Incorporate UX Writing Into
Discoverys…Be Concise…Embrace The Cliché…Using Proper Pronouns…"
https://usabilitygeek.com/tips-for-improving-ux-writing-skills/

5 'Credit Card Form' Implementations That Make L.L. Bean Best-in-Class
By Rebecca Hugo.
"Despite credit card details being a commonly typed input on
e-commerce sites, and despite the fact that they only constitute a
small part of the overall amount of typing users have to do during the
checkout flow, our 11 years of testing checkout flows reveal that the
3-5 credit card form fields are by far the most complex and
error-prone input during checkout…"
https://baymard.com/blog/credit-card-form-ux-llbean

Emojis in Email Subject Lines: Advantage or Impediment?
By Kim Flaherty.
"Our research shows that emojis in subject lines increase negative
sentiment toward an email and do not increase the likelihood of an
email being opened."
https://www.nngroup.com/articles/emojis-email/


[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:lcar...@d.umn.edu


[Issue ends.]
Reply all
Reply to author
Forward
0 new messages