[webdev] Web Design Update: March 20, 2014

Laura Carlson lcarlson at d.umn.edu
Thu Mar 20 06:32:45 CDT 2014 

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 39, March 20, 2014.

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

++ISSUE 39 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: DRUPAL.
05: EVALUATION & TESTING.
06: EVENTS.
07: HTML5.
08: JAVASCRIPT.
09: NAVIGATION.
10: TOOLS.
11: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Accessibility of Information Technology Policy Frequently Asked Questions
By University of Minnesota.
"...The most important thing to understand in terms of making a site
accessible is that people use the Web in very different ways. A site
should therefore present information in a way that people can access
it, regardless of what kind of equipment they are using or the method
they use to navigate a site. Web designers cannot assume that everyone
uses the same kinds of devices the same way."
http://accessibility.umn.edu/ait_faq.html

The Case for Web Accessibility
By Tim Lohman.
"...Taken in isolation, the social inclusion, employment and
education, business, and legal and policy dimensions make for a strong
case in favour of acting on web accessibility. However, together, they
should leave little doubt that advancing web accessibility is the
right thing, the smart thing, and the required thing to do."
http://www.accessiq.org/news/news/2014/03/the-case-for-web-accessibility

10 Easy Web Accessibility Wins
By Tim Lohman.
"...with a nod to the Commission, here's Access iQ's 10 easy web
accessibility wins..."
http://www.accessiq.org/news/news/2014/03/10-easy-web-accessibility-wins

Trends in Mobile Device Use by People with Disabilities
By Jonathan Avila.
"...In summary, organisations must implement mobile accessibility
design and requirements into their processes. Testing for mobile
content can be broken down by web content and native content but
ultimately requires accessibility supported methods on the platforms
where the content will be consumed. Mobile specific techniques and
failures should be documented as well as expected properties for user
interface controls. Assistive technology will likely be a larger
factor in testing due to the dearth of testing tools for native apps.
Finally, users with disabilities should be involved in testing to
ensure functional use."
http://www.accessiq.org/news/features/2014/03/trends-in-mobile-device-use-by-people-with-disabilities

Use Scope Attributes to Associate Cells in Complex Data Tables
By Denis Boudreau.
"Make sure data cells in complex tables are explicitly associated
using the scope attribute..."
http://dboudreau.tumblr.com/post/78979333515/use-scope-attributes-to-associate-cells-in-complex-data

Describe Groups of Form Controls Using the Legend Element
By Denis Boudreau.
"Make sure groupings of related form controls are described using a
common LEGEND element..."
http://dboudreau.tumblr.com/post/79299755705/describe-groups-of-form-controls-using-the-legend

Associate Groups of Form Controls Using the fieldset Element
By Denis Boudreau.
"Make sure groups of related form controls are structured using a
fieldset element..."
http://dboudreau.tumblr.com/post/79427805987/associate-groups-of-form-controls-using-the-fieldset

Use a Button with Select Elements to Perform an Action
By Denis Boudreau.
"Make sure drop down menus options are not triggered until a button is
activated"
http://dboudreau.tumblr.com/post/79720465772/use-a-button-with-select-elements-to-perform-an-action

Indicate Required Form Controls in Text Using the Label Element
By Denis Boudreau.
"Make sure indications of required form controls are conveyed through
label elements"
http://dboudreau.tumblr.com/post/79791057588/indicate-required-form-controls-in-text-using-the-label


+02: BOOKS.

Rauschmayer, Axel. Speaking JavaScript, An In-Depth Guide for
Programmers, O'Reilly Media, 2014.


+03: CASCADING STYLE SHEETS.

Leveling Up With Flexbox presentation at Smashing Conference
By Zoe M. Gillenwater.
"Download the slides and view the demos for my presentation on
practical flexbox progressive enhancement, 'Leveling Up With Flexbox'
for Smashing Conference in Oxford, as well as get links to related
articles, tutorials, and tools on Flexible Box Layout..."
http://zomigi.com/blog/leveling-up-with-flexbox/

Drop Caps and Paragraph Text Effects Using CSS3
By Jake Rocheleau.
"In this tutorial I'd like to share a few CSS tips for building
creative paragraph or text designs. Legibility and font choices are
often directly related to the design itself. But incorporating text
effects like drop caps, highlights, and recognizable hyperlinks will
distinguish from other content on the page. Take a peek at my live
sample demo to see what we're trying to build..."
http://designshack.net/articles/css/drop-caps-and-other-paragraph-text-effects-using-css3/


+04: COLOR.

Effective Color Contrast
By Aries Arditi.
"This page contains three basic guidelines for making effective color
choices that work for nearly everyone. Following the guidelines are
explanations of the three perceptual attributes of color -- hue,
lightness and saturation -- as they are used by vision scientists..."
http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast

Web Accessibility 101 - Effective Color Contrast (Video)
By Thomas Logan.
"Thomas Logan, Senior Accessibility Consultant for SSB BART Group
discusses the use of color in websites and applications and how it
effects the accessibility of the content..."
http://www.youtube.com/watch?v=L-99RfyMCVU
Audio Description: https://www.ssbbartgroup.com/clients/

Color Systems - Part 1
By Steven Bradley.
"What is color? How do you define it? How do you describe it? How can
we ensure that when you tell me to make something red, I make it the
exact same red you intended? For centuries people have been developing
systems to describe color to answer these questions."
http://www.vanseodesign.com/web-design/color-systems-1/


+05: EVALUATION & TESTING.

Everything You Know About Accessibility Testing is Wrong (Part 4)
By Karl Groves.
Proper management of accessibility necessitates getting ahead of
accessibility problems as soon as possible. Effectively there is no
place before the code is committed. As a pre-commit hook or, at least,
as a Grunt task before committing, accessibility problems are caught
before they're created. Automated testing is not the end, but the
beginning of a robust accessibility testing methodology.
http://www.karlgroves.com/2014/03/13/everything-you-know-about-accessibility-testing-is-wrong-part-4/

Recap - Involving People with Disabilities in User Experience Research
By Deborah Edwards-Onoro.
"...What I enjoyed from the webinar: the tips on recruiting people
with disabilities and the reinforcement for layout and coding
practices (not placing focus on an input field) I've been using. Here
are my notes from the webinar..."
http://www.lireo.com/recap-involving-people-disabilities-user-research/


+05: DRUPAL.

Using Drupal to Support Web Accessibility in Higher Education
By Chris Hartigan.
"...The first point to take away from this discussion is that many
schools recognize that Drupal is part of the solution when it comes to
web accessibility..."
https://www.acquia.com/blog/using-drupal-support-web-accessibility-higher-education


+06: EVENTS.

National Association of Government Web Professionals (NAGW) Conference
September 9-12, 2014.
Saint Paul, Minnesota, U.S.A.
http://beta.nagw.org/conference/2014

WebVisions Chicago
September 25-26, 2014.
Chicago, Illinois, U.S.A.
http://www.webvisionsevent.com/chicago/

HighEdWeb
October 19-22, 2014.
Portland, Oregon, U.S.A.
http://2014.highedweb.org/


+07: HTML5.

A Q&A on the Picture Element
By Yoav Weiss, Mat Marquis, Marcos Caceres.
"The revival of the picture element-the responsive images proposal
that has seen the most support from the developer community-is
exciting news, but there are still some outstanding questions about
how the element will really work. Marcos Caceres and Yoav Weiss have
put countless hours into the Responsive Images Community Group's
efforts, and are now working toward picture implementations in Firefox
and Chrome, respectively. Mat Marquis asked them some questions."
http://alistapart.com/blog/post/picture-element-qa


+08: JAVASCRIPT.

JavaScript Taking Both the High and Low Roads (Video)
By Brendan Eich.
Brendan Eich's keynote at O'Reilly Fluent conference.
http://www.youtube.com/watch?v=aZqhRICne_M

Lesser-Known JavaScript Debugging Techniques
By Amjad Masad.
"...in this post I'm going to shed light on the lesser-known features
and techniques of JavaScript debugging..."
http://amasad.me/2014/03/09/lesser-known-javascript-debugging-techniques/

Screen Reader Support for ARIA Live Regions
By Leonie Watson.
"An ARIA live region is a simple mechanism for notifying screen
readers when content is updated on the page. Despite the obvious
Accessible User Experience (AUX) benefits that live regions bring,
screen reader support is disappointingly inconsistent."
http://blog.paciellogroup.com/2014/03/screen-reader-support-aria-live-regions/

ARIA-checked (state)
By Rakesh Paladugula
"ARIA checked state is used when the current state of elements such as
checkboxes, radio buttons needs to be intimated to the user. On
standard browsers, operating systems and screen reader combinations
this state can be intimated with the HTML semantics. In any of the
cases if this information cannot be received by the screen reader
ARIA-checked can be used in the mark-up. The standard HTML checkbox
exposes only two possible values 'checked' (true) and 'unchecked'
(false but aria-checked have three possible values."
http://www.maxability.co.in/2014/03/aria-checked-state/


+09: NAVIGATION.

I Don't Care What Google Did, Just Keep Underlining Links
By Adrian Roselli.
"...Unless you plan to run the necessary color contrast tests, just
keep the underlines on your hyperlinks. "
http://blog.adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html

Finding the Things We Don't Search For
By Gerry McGovern.
"Search behaviour is one window into the customer's mind. But there
are many others."
http://www.gerrymcgovern.com/new-thinking/finding-things-we-don%E2%80%99t-search

Avoid Nesting or Overusing ARIA Landmarks
By Denis Boudreau.
"Make sure aria landmarks are not overused and remain useful"
http://dboudreau.tumblr.com/post/79614278659/avoid-nesting-or-overusing-aria-landmarks

Assign a Form Landmark Role to the Page's Form Sections
By Denis Boudreau.
"Make sure the form sections are identified using the form landmark role..."
http://dboudreau.tumblr.com/post/79230195175/assign-a-form-landmark-role-to-the-pages-form-sections

Filters vs. Facets - Definitions
By Kathryn Whitenton.
"The terms 'filters' and 'faceted navigation' are often used
interchangeably; while related, these concepts have important
differences. Both are tools to help users narrow down large sets of
content, but faceted navigation - while more flexible and powerfu - is
more difficult to create and maintain."
http://www.nngroup.com/articles/filters-vs-facets/


+10: TOOLS.

Drowning in Tools in the Web Development Industry
By Louis Lazaris.
"Every once in a while in this industry we need a reminder that our
trade as front-end developers - and I say this in the most positive
way possible - can be a frustrating thing..."
http://www.sitepoint.com/drowning-in-tools-web-development-industry/


+11: USABILITY.

Availability in the Cross-Channel User Experience
By Janelle Estes.
"Don't limit common activities to a few channels. Identify and support
users top tasks on all channels and strive to make secondary tasks
available."
http://www.nngroup.com/articles/available-cross-channel/

First Principles of Interaction Design (Revised and Expanded)
By Bruce Tognazzini.
Basic principles are fundamental to the design and implementation of
effective interfaces, whether for traditional GUI environments, the
web, mobile devices, wearables, or Internet-connected smart devices.
http://asktog.com/atc/principles-of-interaction-design/


[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

Dreamweaver Information.
http://www.d.umn.edu/itss/training/online/webdesign/dreamweaver.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

Flash Information.
http://www.d.umn.edu/itss/training/online/webdesign/flash.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.]

More information about the Webdev mailing list