.

.

Date: Thu, 6 Jul 2017 06:20:31 -0500
From: Laura Carlson <lcarlson@d.umn.edu>
To: webdev <webdev@d.umn.edu>
Subject: [webdev] Web Design Update: July 07, 2017

+++ WEB DESIGN UPDATE.

– Volume 16, Issue 02, July 07, 2017.

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

++ISSUE 02 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: INFORMATION ARCHITECTURE.

07: JAVASCRIPT.

08: NAVIGATION.

09: TOOLS.

10: TYPOGRAPHY.

11: USABILITY.

12: XML.

SECTION TWO:

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

3 Accessibility Tips I Wish I’d Learned Sooner

By Joanna Ngai.

“Here are a three simple accessibility tips to keep in mind so you can
create more inclusive and user friendly designs…”

https://webdesign.tutsplus.com/articles/ 3-accessibility-tips-i-wish-i-had-learned-sooner–cms-28975

Accessibility for Visual Design

By Nick Babich.

“They say beauty is in the eye of the beholder. As designers, we need
to remember that the same is true of color and all visual
abilities…”

http://www.uxbooth.com/articles/accessibility-visual-design/

Using Style Guides for Accessibility

By Joel.

…Style guides are commonplace. Accessibility style guides are not as
common, but should not be overlooked…””

https://webdesign.tutsplus.com/articles/ using-style-guides-for-accessibility–cms-29042

Shut Up JAWS

By Steve Faulkner.

“…Putting JAWS to Sleep in ALL Apps Except Browsers…”

https://www.paciellogroup.com/blog/2017/07/shut-up-jaws/

Baby Boomers Are Aging-And Designers Need To Adapt

By Katharine Schwab.

“As Americans age, interface and product design itself will transform…”

https://www.fastcodesign.com/90131258/ baby-boomers-are-aging-heres-how-design-will-have-to-adapt

Positioning Tooltips – Revisiting Hover SC

By Marla Runyan.

“…From a low vision user perspective, encountering a tooltip that I
cannot read is a constant reminder of an accessibility barrier –
because I see a piece of something, and the rest is out of reach…”

https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2017Apr/0038.html

Demo technique:

https://jsfiddle.net/obsqynyp/4/

Videos that capture issues:

https://github.com/w3c/wcag21/issues/75#issuecomment-309306101

+02: BOOKS.

Meyer, Eric. A. and Weyl, Estelle.,

Cascading Style Sheets : The Definitive Guide,

O’Reilly & Associates, 2017.

+03: CASCADING STYLE SHEETS.

CSS: The Definitive Guide, 4th Edition

By Eric A. Meyer.

“On Monday, July 3rd, as I sat in the living room of a house just a
bit north of New York City, I pushed the last writing and editing
changes to CSS: The Definitive Guide, Fourth Edition and notified the
production department at O’Reilly that it was ready…”

http://www.meyerweb.com/eric/thoughts/2017/07/05/ css-the-definitive-guide-4th-edition/

Keyboard-Only Focus

By Roman Komarov.

“One of the things I couldn’t manage to find a solution for a long
time was a problem of focus styles on interactive elements…”

http://kizu.ru/en/blog/keyboard-only-focus/

Is it Really Safe to Start Using CSS Grid Layout?

By Rachel Andrew.

“…In this post I’m considering the issue of supporting older
browsers when using new technology such as CSS Grid Layout…”

https://www.rachelandrew.co.uk/archives/2017/07/04/ is-it-really-safe-to-start-using-css-grid-layout/

You Do Not Need a CSS Grid Based Grid System

By Rachel Andrew.

“In the last couple of weeks I have started to see CSS Grid layout
based frameworks and grid systems appearing…”

https://www.rachelandrew.co.uk/archives/2017/07/01/ you-do-not-need-a-css-grid-based-grid-system/

CSS is Awesome

By Brandon Smith.

“…CSS is hard because its properties interact, often in unexpected
ways. Because when you set one of them, you’re never just setting that
one thing…”

https://css-tricks.com/css-is-awesome/

The World and CSS (Video)

By Hakon Wium Lie.

WeAreDevelopers Conference 2017 talk
by Hakon Wium Lie, the co-creator of CSS.

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

+04: EVALUATION & TESTING.

Turning Usability Testing Data into Action without Going Insane

By Carlos Rosemberg.

“Collecting, sorting, and understanding data gathered during user
research and usability testing is becoming an increasingly common task
among UX practitioners-in fact, it’s becoming a critical UX skill…”

https://www.toptal.com/designers/usability/ turning-usability-testing-data-into-action

A Practical Guide to Getting Your User Research Started

By David Travis.

“One challenge faced by teams new to user research is simply getting
started. Enthusiasm quickly gives way to frustration as teams don’t
know where to begin-especially when their product is aimed at
‘everyone’. A practical solution is to identify a group of users that
is easiest to get to and that provides the best opportunity for
validated learning.”

http://userfocus.co.uk/articles/getting-started-with-user-research.html

Lean User Tests, Part 5 of 7

By Stefan Wolpers.

“The fifth part of the Lean User Tests series deals with how to
interview the participants and what the course of the conversation
most likely will be…”

https://blog.prototypr.io/lean-user-tests-interviews-b95a0d9362e7

+05: EVENTS.

Sisters Code – Weekend Website Warrior
July 22-23, 2017.
Detroit, Michigan, U.S.A.
https://www.eventbrite.com/e/ weekend-website-warrior-july-class-tickets-35917172229

Responsive Web Design
September 14 – October 18, 2017.
Online.
http://www.w3devcampus.com/responsive-web-design-w3c/

Annual Boston Accessibility Conference
October 7, 2017.
Cambridge, Massachusetts, U.S.A.
http://a11y-bos.org/annual-events/about-a11ybos-2017/

UX Conference Chicago
October 7-13, 2017.
Chicago, Illinois, U.S.A.
https://www.nngroup.com/training/chicago/

+06: INFORMATION ARCHITECTURE.

Card Sorting: How to Best Organize Product Offerings (Video)

By Kathryn Whitenton.

“Card sorting helps you understand how to organize offerings so people
who know what you have and where to find it. Even afternoon tea
requires thoughtful organization and presentation.”

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

+07: JAVASCRIPT.

WAI-ARIA Authoring Practices 1.1

Matt King, James Nurthen, Michiel Bijl, Michael Cooper, editors.

“This document provides readers with an understanding of how to use
WAI-ARIA 1.1 [WAI-ARIA] to create accessible rich internet
applications…”

https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/

+08: NAVIGATION.

Dot Dot Dot: Use and Misuse of the ‘Overflow Menu’ Icon

By White Space.

“Whenever I see 3 little dots on user interfaces – known as an
overflow menu icon – I have to think of Mamma Mia, the movie…”

http://whitespace.ch/overflow-menu-icon-misuse/

+09: TOOLS.

Four Free Tools for Automated Accessibility Testing of Web Apps

By Ross Patterson.

“…Accessibility testing is hard. And while no piece of software can
evaluate your site for 100% compliance, there are several tools freely
available that can get you almost halfway there…”

https://spin.atomicobject.com/2017/05/30/ web-app-accessibility-testing-tools/

+10: TYPOGRAPHY.

Colorfonts: The Future of Typography

By Dieter Petereit.

“Let’s start with the name. Colorfonts, or ‘Chromatic Fonts’, are
colored, or colorful fonts. In fact, a chromatic font could also
consist of shades of grey, or any other individual color…”

https://www.noupe.com/design/colorfonts-future-typography.html

+11: USABILITY.

Content Management: How to Effectively Overcome Legacy Content

By Paul Boag.

“Content management is an enormous challenge for big organisations,
especially when it comes to legacy content, much of which is owned my
many content creators across the company. How do you deal with ageing
content on a website with little central control?…”

https://boagworld.com/content-strategy/content-management-legacy/

The Power Of Whitespace

By Nick Babich.

“Whitespace (or ‘negative space’) is an empty space between and around
elements of a page. Although many may consider it a waste of valuable
screen estate, whitespace is an essential element in design…”

http://babich.biz/whitespace/

The Customer Centric Universe

By Gerry McGovern.

“…The customer is no longer king. They are dictator. And they’re
number one dictat is: Make it easy.”

http://gerrymcgovern.com/the-customer-centric-universe/

Product Page Usability: Provide Both Site-Authored FAQs and
Community-Driven Q&As (70% Get it Wrong)

By  Jamie Appleseed.

“Testing found FAQ and Q&A sections irreplaceable companions to the
product description, by providing a structured space for answering
even the most esoteric customer concerns and questions…”

https://baymard.com/blog/product-page-faq-and-qa

+12: XML.

SVG 101: What is SVG? (and what is it actually good for?)

By Ivaylo Gerchev.

“…SVG is a vector graphic format-based on XML and is used to display
a variety of graphics on the Web and other environments…”

https://www.sitepoint.com/svg-101-what-is-svg/

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

[Issue ends.]

.

.

-=-=-=-=-=-=-=-=-=-=-=-

.
.
Groups.io Links:

You receive all messages sent to this group.

View/Reply Online (#611):

View All Messages In Topic (1):
-=-=-=-=-=-=-=-=-=-=-=-

Preview YouTube video Card Sorting: How to Best Organize Product Offerings

Advertisements