.
.
Date: Thu, 1 Jun 2017 06:25:29 -0500
From: Laura Carlson <[log in to unmask]>
To: webdev <[log in to unmask]>
Subject: [webdev] Web Design Update: June 1, 2017
+++ WEB DESIGN UPDATE.
- Volume 15, Issue 49, June 1, 2017.
An email newsletter to distribute news and information about web
design and development.
++ISSUE 49 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: BOOKS.
03: CASCADING STYLE SHEETS.
04: EVALUATION & TESTING.
05: EVENTS.
06: HTML5.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: USABILITY.
11: XML.
SECTION TWO:
12: What Can You Find at the Web Design Reference Site?
[Contents ends.]
++ SECTION ONE: New references.
+01: ACCESSIBILITY.
Design Before Code: Thinking About Accessibility from the Ground Up -
Part 2
By Caitlin Geier.
"...This post will offer technical guidance on some of the practical
issues of building accessibility into your design process, and I'll
take a deeper look into elements that need more thought in the design
phase, including some advice on using pattern libraries to help with
accessibility..."
https://www.deque.com/blog/design-before-code-part-2/
Floating Labels are a Bad Idea
By Adam Silver.
"After writing Placeholders are Problematic some people suggested the
floating label pattern. We are often seduced by novel patterns that
save space but this pattern is a bad idea. Here's why..."
https://medium.com/simple-human/
floating-labels-are-a-bad-idea-82edb64220f6
Best Practices for Creating Accessible Video for Blind and Low-Vision
Viewers
By: Elisa Edelberg.
"When recording video content - whether it be a lecture in front of a
large audience, a small presentation in a meeting, or a movie trailer
- there are several best practices to make adding audio description
easier, or even alleviate the need for audio description
altogether..."
http://www.3playmedia.com/2017/05/12/
best-practices-for-creating-accesible-
video-for-blind-and-low-vision-viewers/
How to Add Captions or Subtitles to a Video
By Ryan Knott.
"People who are deaf or hard of hearing rely on captions (or
subtitles) to understand your video's content. But there are a lot of
other great reasons for using them, as well..."
https://blogs.techsmith.com/tips-how-tos/add-captions-subtitles-video/
User Facing State
By Scott O'Hara.
"...The main thing I want you to take away from all of this is that if
you are only toggling classes to visually manage state of your
components, you are likely not appropriately conveying that state to
users of assistive technologies. You need to be using the appropriate
elements (<button></button>s are your friend!), and managing the
appropriate attributes and their values to make truly accessible user
experiences..."
https://css-tricks.com/user-facing-state/
Target Size: Screenshots With Target Boundaries
By Detlev Fischer.
"What would happen if target size became a new WCAG Success Criterion..."
http://www.3needs.org/en/testing/target-size.html
Accessibility and the Self-Organizing Team
By Justin Stockton.
"...Once the team has a better understanding of what accessibility is
and how it effects their role, it is usually much easier to get them
to take on accessibility related tasks..."
https://www.paciellogroup.com/blog/2017/05/
accessibility-and-the-self-organizing-team/
+02: BOOKS.
Coady, Geri. Color Accessibility Workflows, A Book Apart, 2017.
+03: CASCADING STYLE SHEETS.
An Introduction to CSS Grid
By Charlotte Jackson.
"I recently ran a class at work to introduce some of my colleagues to
CSS Grid..."
http://www.lottejackson.com/learning/an-intro-to-css-grid
+04: EVALUATION & TESTING.
Lab Testing Beyond Usability: Challenges and Recommendations for
Assessing User Experiences
By Carine Lallemand and Vincent Koenig.
"...Results indicate that the laboratory setting has a strong impact
on the participants' perceived UX, and support a discussion of the
quality and limitations of laboratory evaluations regarding UX
assessment..."
http://www.uxpajournal.org/lab-testing-beyond-usability/
To Intervene or Not to Intervene: An Investigation of Three
Think-Aloud Protocols in Usability Testing
By Obead Alhadreti and Pam Mayhew.
"...In this paper, we have compared the performance of the traditional
concurrent think-aloud method with two interactive versions of the
method:.."
http://www.uxpajournal.org/
intervene-think-aloud-protocols-usability-testing/
How to Turn UX Research Into Results
By Cindy McCracken.
"...with a little preparation, it's a straightforward process to turn
your research insights into real results..."
http://uxmastery.com/how-to-turn-ux-research-into-results/
5 Techniques to Identify Clusters In Your Data
By Jeff Sauro.
"...The process involves examining observed and latent (hidden)
variables to identify the similarities and number of distinct groups.
Here are five ways to identify segments..."
https://measuringu.com/identify-clusters/
Eye Tracking in Retrospective Think-Aloud Usability Testing: Is There
Added Value?
By Fatma Elbabour, Obead Alhadreti, Pam Mayhew.
"...One of the most popular usability testing methods is known as the
think-aloud protocol, which as the name implies refers to the act of
verbalizing thoughts of a certain cognitive process. ..."
http://www.uxpajournal.org/value-eye-tracking-think-aloud-usability-testing/
Demystifying Website Heat Maps: A Complete Guide for Enterprise Buyers
By Rory Gallagher.
"Heat maps: It's probably the broadest, most popular category of
insight tools available to any company that wants to understand and
improve the user experience on their website..."
http://www.eyequant.com/blog/demystifying-website-heat-maps
+05: EVENTS.
We RISE Women in Tech Conference
June 23-24, 2017.
Atlanta, Georgia, U.S.A.
https://werise.tech/
TypeCon
August 23-27, 2017.
Boston, Massachusetts, U.S.A.
http://typecon.com/
Pacific Northwest PHP
September 7-9, 2017.
Seattle, Washington, U.S.A.
http://pnwphp.com/
Generate London
September 20-22, 2017.
London, England, United Kingdom
https://www.generateconf.com/london
NCDevCon
October 7-8, 2017.
Raleigh, North Carolina, U.S.A.
http://ncdevcon.com/
Interact London
October 18, 2017.
London, England, United Kingdom
http://2017.interactconf.com/
+06: HTML5.
HTML5: Where the Core Web Technology is Headed Now
By Paul Krill.
"The staple of the open web platform, the HTML5 standard is undergoing
both incremental and fundamental change..."
http://www.infoworld.com/article/3198460/web-development/
html5-where-the-core-web-technology-is-headed-now.html
Under-Engineered Custom Radio Buttons and Checkboxen
By Adrian Roselli.
"I keep seeing overly-complex controls with additional elements as
style hooks, scripting to make up for non-semantic replacements,
images that need to be downloaded, and so on..."
http://adrianroselli.com/2017/05/
under-engineered-custom-radio-buttons-and-checkboxen.html
+07: JAVASCRIPT.
I'd Like To Talk To You About ARIA Abuse From A Screen Reader User's Perspective
By Amanda Rush.
"As a screen reader user, I've seen abuses that make me want to
strangle developers. I think the worst abuse I've ever come across,
(and I'm sorry I can't find it again to provide a demonstration of
it), was one where role='alert' was used to deliver advertisements and
calls to action on a website..."
https://www.customerservant.com/aria-abuse-users-perspective/
Managing State in CSS with Reusable JavaScript Functions - Part 2
By Luke Harrison.
"...In this article, I'll be providing some solutions to these
shortcomings, as well as baking in more features and general
improvements to make our reusable function even more powerful..."
https://css-tricks.com/
managing-state-css-reusable-javascript-functions-part-2/
What Is Event Bubbling in JavaScript? Event Propagation Explained
By Giulio Mainardi.
"Event bubbling is a term you might have come across on your
JavaScript travels. It relates to the order in which event handlers
are called when one element is nested inside a second element, and
both elements have registered a listener for the same event (a click,
for example)..."
https://www.sitepoint.com/event-bubbling-javascript/
+08: MISCELLANEOUS.
The Revolution Will Not Be Handheld
By Gerry Gaffney.
"...changes are occurring that seem likely to challenge the hegemony
of the handheld device. Perhaps it's a good time to look up from our
screens and take in our surroundings..."
http://www.uxpajournal.org/revolution-not-handheld/
Designing and Debugging with Ducks in Your Web Projects
By Daniel James.
"If you keep up with the jargon within the web development and design
industry it's likely that at some point you will have come across the
term "duck" at least once or twice. Apart from it being fun to feed
bread to them, ducks in the web industry hold at least two completely
different meanings."
https://css-tricks.com/designing-debugging-ducks-web-projects/
+09: NAVIGATION.
Why Headings and Landmarks are so Important (Video)
By Rob Dodson.
"Today, I want to talk about headings and landmarks...the importance
that they play in accessible navigation..."
https://www.youtube.com/watch?v=vAAzdi1xuUY
The 5 Steps of Successful Customer Journey Mapping
By Kate Kaplan.
'Five key steps comprise a standardized framework for customer journey
mapping that can be scaled to any scope or timeline."
https://www.nngroup.com/articles/customer-journey-mapping-process/
Design Trend: Side Navigation Is Everywhere, but Does It Work?
By Carrie Cousins.
"There's a trending topic in website design navigation: sidebar menus.
More designers are working with vertical side navigation for projects,
with a specific location on the left side for many of these website
designs."
https://designshack.net/articles/navigation/side-navigation-trend/
+10: USABILITY.
Better Form Design: One Thing Per Page (Case Study)
By Adam Silver.
"In 2008, I worked on Boots.com. They wanted a single-page checkout
with the trendiest of techniques from that era, including accordions,
AJAX and client-side validation..."
https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
Product Page UX: All Products Need at Least One 'In Scale' Image (28%
Get It Wrong)
By Christian Holst.
"Our testing shows that 42% of users will try to grasp the size of a
product though the product page images, but without an 'In Scale'
image this becomes needlessly difficult and inaccurate."
https://baymard.com/blog/in-scale-product-images
+11: XML.
Stuff at the Top of an SVG
By Peter Nowell.
"If you've ever opened up an SVG file to look at the code, you've
probably thought to yourself: 'What's all that stuff at the top?..."
https://medium.com/@pnowelldesign/stuff-at-the-top-of-an-svg-f3ad198eb54e
[Section one ends.]
++ SECTION TWO:
+12: 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:[log in to unmask]
[Issue ends.]
.
.
|
