[webdev] Web Design Update: November 6, 2014

Thu Nov 6 06:41:48 CST 2014

+++ WEB DESIGN UPDATE.
- Volume 13, Issue 19, November 6, 2014.

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

++ISSUE 19 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: EVALUATION & TESTING.
04: HTML5.
05: INFORMATION ARCHITECTURE.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: STANDARDS, GUIDELINES & PATTERNS.
09: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Re: A11y is Hard
By Sina Bahram.
"...Here is the accessibility email I sent @37signals, responding to
'#a11y is hard'...it's important to realize that we should be
realistic about the amount of effort required, and realize that the
basics are just minutes to hours away. For your level of scale and
size, this is a minimal cost so small as to be hard to even accurately
measure. This is putting aside the fact that it's A.) the right thing
to do, B.) the act of following proper coding practices per any
standard you wish to measure against, and C.) has many emergent
beneficial effects. I hope the level of accessibility of basecamp can
improve soon, and I hope this message shows you that it's not a huge
complex technical undertaking to get the basics right."
http://twishort.com/KuNgc

ARIA Quicktip - Labelledby vs. Describedby
By Aaron Gustafson.
"...at least in terms of form fields, they differ in when they are
read. The aria-labelledby attribute replaces the associated label
element (which is, of course, associated with the field via the
label's for attribute). The aria-describedby attribute, on the other
hand, is read after the field type is stated..."
http://aaron-gustafson.com/notebook/2014/aria-quicktip-labelledby-vs-describedby/

Accessible Media Player Resources and Demos
By Henny Swan.
"Below are a few resources around media player accessibility. With so
many of us embedding multimedia content in our sites and apps it's key
that we think about not just the accessibility of the player but also
alternative formats, the user journey to the player and onward
journeys from the player."
http://www.iheni.com/accessible-media-player-resources/

Blind Woman Gisele Mesnage Sues Coles Over Online Shopping Website
By Rachel Browne.
"Coles is facing a landmark claim following an allegation the
supermarket giant's website does not provide adequately for visually
impaired shoppers..."
http://www.smh.com.au/digital-life/digital-life-news/blind-woman-gisele-mesnage-sues-coles-over-online-shopping-website-20141105-11h6zw.html

@longdesc Moves Toward W3C Recommendation
By Geoff Freed.
"...This week the W3C resolved a formal objection to the HTML5 Image
Description Extension (also known as the longdesc extension to HTML5),
clearing the way for the document to continue moving toward a full W3C
recommendation...The W3C's decision and, eventually, approval of the
extension as a formal recommendation will give authors full support
for using longdesc as one method among several to provide detailed
image descriptions..."
http://blog.diagramcenter.org/?p=1713

Perspectives on Accessibility Series - Instructional Designers in
Higher Education (Video)
By George Mason University.
Kathleen Bastedo, Karla Kmetz, and Maureen Madden were presenters for
this Webinar now archived on YouTube.
https://www.youtube.com/watch?v=lfyhvvuGCQY
PDF Slides:
http://ati.gmu.edu/wp-content/uploads/@AccessibleMason-Webinar_102214_IDs-in-Higher-Ed.pdf

+02: CASCADING STYLE SHEETS.

Floated Labels Still Suck
By Dennis Lembree.
"...Please don't use 'floated labels' or 'labels as placeholders'
technique; it can break the user experience for a large variety of
reasons. Use the label element and placeholder attribute as intended.
Use CSS to ensure placeholder text has adequate color contrast."
http://www.webaxe.org/floated-labels-still-suck/

The Specificity Graph
By Harry Roberts.
"As we all (should) probably know by now, specificity is is one of
CSS' most troublesome features, and is an area that soon becomes hard
to manage on projects of any reasonable size. Specificity is a trait
best avoided, which is why we don't use IDs in CSS, and we don't nest
selectors unless absolutely necessary..."
http://csswizardry.com/2014/10/the-specificity-graph/

Mastering the :nth-child
By nthmaster.
"Using :nth-child"
http://nthmaster.com/

Linear Gradient Problems in Chrome
By Adrian Roselli.
"I'm going to tell you up front that I don't have a fix for the issue
I am raising, though there are bugs filed against it..."
http://blog.adrianroselli.com/2014/10/linear-gradient-problems-in-chrome.html

Using Clearfix to Clear Floats in a Layout
By Virginia DeBolt.
"First, let's review some of the older methods of clearing floats in a
layout. In a CSS layout with two or more columns, there is generally
some use of float to create the column structure. For the layout to
include a footer at the bottom of the page, those floats need to be
cleared."
http://www.webteacher.ws/2014/10/31/using-clearfix-clear-floats/

Notes on Draft CSS 'alt' Property
By Bruce Lawson.
"A while ago, there was discussion in CSS Working Group about an alt
property to be added to CSS. Its purpose is to let assistive
technology know the meaning of unicode characters inserted into a
visual rendering of a document with CSS generated content. The problem
is described by James Craig, Apple's nice accessibility chappie."
http://www.brucelawson.co.uk/2014/notes-on-draft-css-alt-property/

Re: [css-pseudo] Please Make Sure Pseudo-Element "alt" Property Makes
it into Next ED
By Elika Etemad (fantasai).
"...The first *major* problem with 'alt' is that it cascades poorly. The
information you're trying to cascade there needs to be tied to the
information specified for 'content'. Since it's a separate property,
it will cascade independently, and likely the next style rule with
'content' will neglect to specify 'alt', leading to a mismatch between
'alt' and 'content'. The second problem is that we already have
solutions to this problem
that don't require an extra property..."
http://lists.w3.org/Archives/Public/www-style/2014Nov/0046.html

+03: EVALUATION & TESTING.

How To Run User Tests at a Conference
By Daniel Sauble.
"User testing is hard. In the world of agile software development,
there's a constant pressure to iterate, iterate, iterate. It's
difficult enough to find time to design, let alone get regular
feedback from real users..."
http://www.smashingmagazine.com/2014/11/05/how-to-run-user-tests-at-a-conference/

60 Ways to Understand User Needs That Aren't Focus Groups or Surveys
By David Travis.
"People new to user research often think of surveys and focus groups
as the main ways to get insights into customer needs. Here are 60
alternative ideas you might want to try..."
http://www.userfocus.co.uk/articles/60-ways-to-understand-user-needs.html

+04: HTML5.

HTML Modularisation
By Sam Ruby and Robin Berjon.
Sam and Robin's presentation slides to the W3C Advisory Committee on
October 30, 2014.
http://www.w3.org/2014/10/modularity-slides/

HTML5 and the W3C Recommendation Ruckus
By Craig Buckler.
"...Vendors always have ultimate control. Features are not guaranteed
to be implemented, usable or consistent just because they appear in a
W3C document. Fortunately, while Google, Apple, Microsoft, Mozilla,
and Opera are competitors, the process encourages interoperability
because it's impractical for developers to adopt an unstable HTML5
technology. If we don't use it, there was little point in the vendor
creating the feature in the first place..."
http://www.sitepoint.com/html5-w3c-recommendation-ruckus/

+05: INFORMATION ARCHITECTURE.

What You Know About Information Architecture, Might Not Be True
By Paul Boag.
"We all think we understand information architecture. Yet, it is a
specialist area and the things we think we know may not be correct."
http://boagworld.com/usability/think-know-information-architecture-might-true/

+06: JAVASCRIPT.

Just What is it That You Want To Do?
By Jeremy Keith.
"...progressive enhancement is not about offering all functionality;
progressive enhancement is about making sure that your core
functionality is available to everyone. Everything after that is,
well, an enhancement (the clue is in the name)...."
https://adactio.com/journal/7774

+07: MISCELLANEOUS.

Responsive Images in Practice
By Eric Portis.
"When we design responsively, our content elegantly and efficiently
flows into any device. All of our content, that is, except images. For
years, we've catered to users with the highest-resolution screens by
sending giant images to everyone. No longer. Eric Portis takes us
through the new picture element and other attributes to let us mark up
multiple, alternate sources. Find out how to use responsive images
now: send the best image for each context, cut down on page weight,
and speed up performance."
http://alistapart.com/article/responsive-images-in-practice

Why Responsive Images Matter
By Mat Marquis.
"For the first few years of my career I'd joke that I 'type for a
living.' That was selling myself short, though, I know-making websites
is a complicated gig. It's more accurate, I think, to say that I'm
wrong for a living. I've been wrong about damn near everything about
this job so far. I'm probably-no, definitely-wrong about plenty of
things, as we speak..."
http://alistapart.com/blog/post/why-responsive-images-matter

Learn to Do It Yourself
By Adrian Roselli.
"Often when I identify a valid technical (typically accessibility)
issue with a site, tool, or library and get a response of 'just make a
pull request,' I am thrown into an apoplectic fit for which I have to
apologize to my co-workers (or people at the random coffee shop or
airport)..."
http://blog.adrianroselli.com/2014/11/learn-to-do-it-yourself.html

+08: STANDARDS, GUIDELINES & PATTERNS.

Tim's Dream for the Web
By Timothy Chien.
"Even before I get myself this username (timdream) and polluted the
search result, search result of that term will give you a link to on
LogicError, appropriated titled 'Tim's Dream for the Web'. That 'Tim'
was Sir Tim Berners-Lee, and he imagines the Web to be the powerful
means for collaboration between not only people, but machines..."
http://blog.timc.idv.tw/posts/tims-dream-for-the-web/

W3C TPAC 2014 - Notes and Souvenirs
By Steve Faulkner.
"Leonie Watson and I attended the W3C Technical Plenary (TPAC) last
week. It was a big one; including W3C's 20th anniversary and HTML5
became a W3C Recommendation. I have collated some links and tweets
capturing some of my memories of last week at W3C TPAC 2014..."
http://www.paciellogroup.com/blog/2014/11/w3c-tpac-2014-notes-and-souvenirs/

+09: USABILITY.

Customer Satisfaction is Not a Good Indicator of Customer Behavior
By Gerry McGovern.
"People are very bad at telling you what they do or why they do it..."
http://www.gerrymcgovern.com/new-thinking/customer-satisfaction-not-good-indicator-customer-behavior

Shopping Online for an iPhone Plan Is Painful
By Katie Sherwin.
"The experience of researching and purchasing a mobile plan online is
marred by hard-to-access cost information, site-specific jargon, and
disruptive pop-ups."
http://www.nngroup.com/articles/phone-plan-ux/

Form Usability - Getting 'Address Line 2' Right
By Christian Holst.
"While 'Address Line 2' may seem like an insignificant aspect of an
e-commerce design or overall form design, we have observed this form
field to be the cause of bewilderment and uncertainty for users during
both our checkout usability and mobile e-commerce research studies..."
http://baymard.com/blog/address-line-2

Reward My Actions, Please?
By Christian Heilmann.
"You don't lose users because you don't tell them enough about other
cool features you have. You lose them because you confuse them. Reward
my actions and we can work together!.."
http://christianheilmann.com/2014/11/03/reward-my-actions-please/

[Section one ends.]

++ SECTION TWO:

+10: 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.]