[webdev] Web Design Update: September 25, 2014

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 13, Issue 13, September 25, 2014.

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

++ISSUE 13 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: MISCELLANEOUS.
08: NAVIGATION.
09: TYPOGRAPHY.
10: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Introducing an Accessible HTML5 Video Player
By Dennis Lembree.
"It's time we make video on the web quick and easy to implement with
accessibility in mind, not plugins. The Accessible HTML5 Video Player
project helps make this happen. HTML5 video is well on it's way to
being the global solution for web-based video, but at least for now,
not without several browser support and rendering issues remaining."
https://www.paypal-engineering.com/2014/09/05/introducing-an-accessible-html5-video-player/

The Form Field Validation Trick They Don't Want You to Know
By Karl Groves.
"Because so many things require string manipulation most, if not all,
programming languages have some mechanism of finding, substituting, or
removing sub-strings, often through the use of Regular Expressions.
Here are some examples, shamelessly stolen from Code Codex.."
http://www.karlgroves.com/2014/09/17/the-form-field-validation-trick-they-dont-want-you-to-know/

Carousel Concepts
By W3C WAI Education and Outreach Working Group.
A first draft of the Carousels tutorial.
https://w3c.github.io/wai-tutorials/carousels/

Twitter Writes a Post About role=presentation
By Virginia DeBolt.
"There is an ARIA role called 'presentation' in the WAI ARIA spec.
With Twitter's help, Denis Boudreau wrote this post about it..."
http://www.webteacher.ws/2014/09/22/twitter-writes-post-rolepresentation

Understanding Screen Reader Interaction Modes
By Leonie Watson.
"Windows screen readers have multiple modes of interaction, and
depending on the task being carried out they'll automatically switch
to the most appropriate mode. This post explains why Windows screen
readers behave the way they do, and how your code can influence that
behaviour...."
http://tink.co.uk/2014/09/understanding-screen-reader-interaction-modes/

HTML Lists and Accessibility
By Rakesh Paladugula.
"A list is used for presenting one or more similar items. HTML markup
have 3 different types of lists used by authors depending on the type
of items they hold. The three different types of HTML lists are
explained in detailed later in this article..."
http://www.maxability.co.in/2014/09/html-lists-accessibility/

PDF Accessibility Starts with the Author
By Matt May.
"...for authors, the rules don't change. We have lots of tools and
tips on how to create accessible PDF documents that can be used by
people of all kinds of abilities and preferences, and it's still our
responsibility to use them."
http://blogs.adobe.com/accessibility/2014/09/pdf-accessibility-starts-with-the-author.html

Fight Over Digital Accessibility
By Michael Stratford.
"Advocates for students with disabilities and groups representing
colleges and universities are sparring over federal legislation that
would set new standards for accessible technology on campuses..."
https://www.insidehighered.com/news/2014/09/19/higher-ed-associations-disability-rights-groups-clash-over-campus-technology

The TEACH Act - A Need for Clarification
By AHEAD.
"Regarding the Opposition to the proposed TEACH Act Legislation..."
http://ahead.org/teach_act_clarification_letter


+02: CASCADING STYLE SHEETS.

Getting Started with CSS Shapes
By Razvan Caliman.
"For a long time, web designers have been forced to create within the
constraints of the rectangle. Most content on the web is still trapped
in simple boxes because most creative ventures into non-rectangular
layout end in frustration. That is about to change with the
introduction of CSS Shapes, available starting with Chrome 37..."
http://www.html5rocks.com/en/tutorials/shapes/getting-started/


+03: EVENTS.

Programming Mobile Web Apps
September 29, 2014 Start Date.
Online.
http://www.w3devcampus.com/writing-great-web-applications-for-mobile/

Accessible Way-Finding Using Web Technologies
October 20, 2014 Call for Papers.
December 3, 2014 Online Symposium.
http://www.w3.org/WAI/RD/2014/way-finding/

The Future of the Web
October 29, 2014.
Santa Clara, California, U.S.A.
http://www.w3.org/20/


+04: HTML5.

Easy HTML5 Video
By easyhtml5video.
"Easy HTML5 Video is a free wizard program that helps you create HTML5
video for your website in a few clicks."
http://easyhtml5video.com/

Don't Use <picture> (most of the time)
By Jason Grigsby.
"...The picture specification contains more than just the <picture>
element. Think of it as the responsive images specification. For most
responsive images, you shouldn't use the <picture> element. You should
use srcset and/or sizes. The way to know when to use the <picture>
element is based on the use case you're trying to solve. If you're
solving for the art direction use case, use the <picture> element.
Anything else, you should stick to srcset and sizes. Getting this
right early, before we have thousands of pages using <picture>
incorrectly,  is critical for the future of the web..."
http://blog.cloudfour.com/dont-use-picture-most-of-the-time/


+05: INFORMATION ARCHITECTURE.

How to Create a Customer Journey Map
By Megan Grocki.
"...A Customer Journey map is a visual or graphic interpretation of
the overall story from an individual's perspective of their
relationship with an organization, service, product or brand, over
time and across channels...."
http://uxmastery.com/how-to-create-a-customer-journey-map/


+06: JAVASCRIPT.

ECMAScript 6 Promises (1/2) - Foundations
By Axel Rauschmayer.
"This blog post is first in a series of two blog posts on ECMAScript 6
promises. It explains the foundations of asynchronous programming in
JavaScript, to prepare you for part two, which covers the promise
API."
http://www.2ality.com/2014/09/es6-promises-foundations.html

A Fundamental Disconnect
By Aaron Gustafson.
"The history of the Web is littered with JavaScript disaster stories.
That doesn't mean we shouldn't use JavaScript or that it's inherently
bad. It simply means we need to be smarter about our approach to
JavaScript and build robust experiences that allow users to do what
they need to do even quickly an easily even if our carefully-crafted,
incredibly well-designed JavaScript-driven interface won't run."
http://aaron-gustafson.com/notebook/2014/a-fundamental-disconnect/

Preparing for ECMAScript 6 - New Array Methods
By Aurelio De Rosa.
"..In this article we'll discuss most of the new methods available in
ECMAScript 6 that work with the Array type..."
http://www.sitepoint.com/preparing-ecmascript-6-new-array-methods/


+07: MISCELLANEOUS.

On Net Neutrality
By Jens Meiert.
"We need net neutrality, and we need to insist on net neutrality..."
http://meiert.com/en/blog/20140917/on-net-neutrality/

Adapting to the Digital Future - The Senior Management Challenge
By Gerry McGovern.
"...If we want senior managers to change then we, as web
professionals, must become the voice of our customers. If there is one
thing that can get senior management to change today it is the
increasing dissatisfaction and disloyalty of their customers."
http://gerrymcgovern.com/new-thinking/adapting-digital-future-senior-management-challenge

10 Years Ago - TOevolt
By Adrian Roselli.
"...Workers of the web (gone by), evolt!"
http://blog.adrianroselli.com/2014/09/10-years-ago-toevolt.html


+08: NAVIGATION.

Video - How to Decide on Mobile Navigation
By Luke Wroblewski.
"While every application and Web site has at least some form of
navigation, everyone's is a bit different. So when all these services
make their way to mobile, they need a way to determine if their
navigation systems are working well. In this short 5 minute video, I
look at few ways we can evaluate mobile navigation solutions..."
http://www.lukew.com/ff/entry.asp?1925

Efficiently Simplifying Navigation, Part 3 - Interaction Design
By Anastasios Karafillis.
"When designing interaction with any type of navigation menu, we have
to consider the following six aspects..."
http://www.smashingmagazine.com/2014/09/18/efficiently-simplifying-navigation-interaction-design/


+09: TYPOGRAPHY.

The Scourge of Helvetica Neue Light
By Richard Rutter.
"I'm no lover of Helvetica but neither do I hate it. I'd be walking
around carrying a lot of hate if I did. That said I really do have an
aversion to Helvetica Neue Light, or rather an aversion to when
Helvetica Neue Light is used without due thought and attention..."
http://clagnut.com/blog/2379/

Typography Resources to Help in Your Designs
By Laren Cramer.
"You know that feeling when you look at a web site and think
everything looks just right? It flows well, there's a nice balance of
white space, and it's easy on to the eyes. Perhaps you may not realize
it but it's likely that the type plays a dominant role..."
http://www.uie.com/brainsparks/2014/09/17/resources-around-typography/


+10: USABILITY.

User Experience and Accessibility - Working with Visual Designers
By Janet M. Six.
"In this edition of Ask UXmatters, our panel of UX experts answers
questions about two issues that confront UX professionals: Should
accessibility be a UX team's responsibility? What is the best way to
work with a visual designer.."
http://www.uxmatters.com/mt/archives/2014/09/user-experience-and-accessibility-working-with-visual-designers.php

Form Usability: Validations vs Warnings
By Jamie Appleseed.
"There's a major difference between form validations and warnings.
Form validations enforce a set of rules and won't allow the user to
proceed, while warnings alert the user about possible problems but
will allow them to proceed."
http://baymard.com/blog/validations-vs-warnings

Eye Tracking in User Experience Design, Chapter 5: Forms and Surveys
By Caroline Jarrett and Jennifer Romano Bergstrom.
"In this chapter, we have explained that eye-tracking data can help to
learn about the visual design of pages with questions on them: forms
and surveys."
http://www.uxmatters.com/mt/archives/2014/09/eye-tracking-in-user-experience-design.php

Animation for Attention and Comprehension
By Aurora Bedford.
"Moving elements are a powerful tool to attract users'attention. When
designing an animation consider its goal, its frequency of occurrence,
and its mechanics."
http://www.nngroup.com/articles/animation-usability/

Design Principles - Connecting And Separating Elements Through
Contrast And Similarity
By Steven Bradley.
"Similarity and contrast, connection and separation, grouped and
ungrouped are all ways to describe the varying sameness and difference
between elements..."
http://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/


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


[Issue ends.]