[webdev] Web Design Update: April 24, 2014

Thu Apr 24 06:21:46 CDT 2014

+++ WEB DESIGN UPDATE.
- Volume 12, Issue 44, April 24, 2014.

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

++ISSUE 44 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: COLOR.
04: DRUPAL.
05: EVALUATION & TESTING.
06: HTML5.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Those WCAG Forgot - Designing for the Cognitively Disabled
By Allie Richardson.
"The World Wide Web Consortium promises that the WCAG 2.0 guidelines
'will make content accessible to a wider range of people' and 'work
together to provide guidance on how to create more accessible content
(Caldwell et al.)' and in some ways this is true. WCAG 2.0 does make
the web accessible to a wider range of people. It also provides
guidance on how to make the web more accessible for people with
cognitive disabilities; but it is just that, merely Priority AAA
guidance. But the required success criteria are primarily designated
for individuals with sight, hearing, and motor impairments, while
those for cognitive impairment typically remain priority AAA criteria
that may or may not be implemented..."
http://orange.eserver.org/issues/7-2/richardson.html

Before and After Demonstration
By Web Accessibility Initiative.
"Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0..."
http://www.w3.org/WAI/demos/bad/Overview.html

Benefits of Transcripts and Captions for Your Videos and Podcasts
By Deborah Edwards-Onoro.
"...If you want to reach more people and have your videos and podcasts
be found online, read on and learn how captions and transcripts can
make that happen..."
http://www.lireo.com/benefits-transcripts-captions-videos-podcasts/

Mandatory Fields and Accessibility
By Rakesh Paladugula.
"...Below are few ways how a mandatory field can be identified and how
it impacts accessibility..."
http://www.maxability.co.in/2014/04/mandatory-fields-and-accessibility/

Use CSS Rather than Table Markup for Page Layout
By  Denis Boudreau.
"Make sure page layout is handled through CSS and not HTML table markup..."
http://dboudreau.tumblr.com/post/83428415975/use-css-rather-than-table-markup-for-page-layout

Patents versus Accessibility
By Adrian Roselli.
...If you think accessibility features will be somehow immune to the
patent process, consider Apple's patent for a graphical user interface
for the visually impaired...We've already got a patent system that's
out of control, with even the most basic ideas receiving patents. It
seems the same patent process is also building barriers to
accessibility using the very ideals that should be using to tear
barriers down. Ideally with enough people raising a stink we can slow
or even stop the process."
http://blog.adrianroselli.com/2014/04/patents-versus-accessibility.html

Invisible Visualization
By Doug Schepers.
"Last year, I put together a talk called 'Invisible Visualization' on
making accessible data visualizations. Several people have asked me
about it, so I thought I'd write a post about it..."
http://schepers.cc/invisible-visualization

The Pain of Accessible PDFs from MS Word on Mac - Test Results
By Greg Kraus.
"I get asked this question every so often, so I did some tests to see
what the current landscape is in terms of creating accessible PDFs
from MS Word on Mac. I was primarily looking at the workflow for
adding headings and alternative text into Word and having those
features show up in a PDF generated from Word. There are other
accessibility issues to contend with as well, but for this evaluation
I was looking at these two very important aspects of PDF accessibility
which have a high occurrence."
http://accessibility.oit.ncsu.edu/blog/2014/04/18/the-pain-of-accessible-pdfs-from-ms-word-on-mac-test-results/

+02: CASCADING STYLE SHEETS.

12 Little-Known CSS Facts
By Louis Lazaris.
"In my research, I come across new little tidbits all the time, so I
thought I'd share some of them in this post. Admittedly, not
everything in this post will have a ton of immediate practical value,
but maybe you can mentally file some of these away for later use..."
http://www.sitepoint.com/12-little-known-css-facts/

Alphabetical List of CSS Properties
By David Storey.
Listing has been updated.
http://ref.openweb.io/CSS/

Handling z-index
By Chris Coyier.
"Managing z-index across large sites can be a pain in the butt. CSS is
hard to test, so it's notoriously easy to make a change that ends up,
for instance, hiding some important UI under who-knows-where..."
http://css-tricks.com/handling-z-index/

+03: COLOR.

147 CSS3 Color Module Color Keywords
By Martin Wolf.
http://codepen.io/martinwolf/full/GrcIi

+04: DRUPAL.

The Case Against Drupal Base Themes
By John Hannah.
"...This discussion is really part of a larger debate that front-end
developers are having about CSS and grid frameworks in general (see
here and here), but it seems particularly relevant when discussing
Drupal base themes because all of the issues are magnified due to
added complexity..."
http://friendlymachine.net/posts/case-against-drupal-base-themes

+05: EVALUATION & TESTING.

Remote Usability Testing: Thinking Outside the Lab
By Rebecca Baker.
"In the world of user experience, usability testing may be one of the
hardest things to sell, while simultaneously being one of the most
critical elements of ensuring an application's usability..."
http://www.uxmatters.com/mt/archives/2014/04/remote-usability-testing-thinking-outside-the-lab.php

Define Stronger A/B Test Variations Through UX Research
By Jennifer Cardello.
"Complement A/B split tests with user research to identify true causes
and develop well informed design variations."
http://www.nngroup.com/articles/ab-testing-and-ux-research/

+06: HTML5.

Sections and Outlines of an HTML5 Document
By Mozilla.
"The HTML5 outline algorithm as described below is not implemented in
user agents, as a consequence, users who make use of heading semantics
are exposed to the HTML 4 document structure. The description of
problems solved by HTML5 is theoretical only..."
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

Warning!
Steve Faulkner.
"Warning! Do not rely on the outline algorithm to convey doc structure..."
https://twitter.com/stevefaulkner/status/456739486404075521

HTML 5.1 Nightly, 4.3.10.1 Creating an Outline
By Steve Faulkner, editor.
"There are currently no known implementations of the outline algorithm
in graphical browsers or assistive technology user agents, although
the algorithm is implemented in other software such as conformance
checkers. Therefore the outline algorithm cannot be relied upon to
convey document structure to users. Authors are advised to use heading
rank (h1-h6) to convey document structure."
http://www.w3.org/html/wg/drafts/html/master/sections.html#outlines

Canvas Ready to Return to Last Call
By Mark Sadecki.
"The Canvas Accessibility Sub-Group has concluded its work on Canvas
L1 and has published an Editor's Draft [1] that is ready to return to
Last Call.  The group's work has focused on Hit Regions [2] and the
drawFocusIfNeeded() method [3]. As agreed on 03 APR 2014 [4], The HTML
Accessibility Task Force as given the Canvas Accessibility Sub-Group
to authorize this transition on its behalf..."
http://lists.w3.org/Archives/Public/public-html-a11y/2014Apr/0059.html

Web Components and You - Dangers to Avoid
By Chris Heilmann.
"What are the chances to mess up?...I see the following dangers: One
browser solutions, Dependency on filler libraries, Creating
inaccessible solutions, Hiding complex and inadequate solutions behind
an element, Repeating the 'just another plugin doing $x' mistakes..."
http://christianheilmann.com/2014/04/18/web-components-and-you-dangers-to-avoid/

A 'Disclosure' Web Component Using Polymer and WAI-ARIA
By Heydon Pickering.
"A simple web component for showing and hiding content. You just
supply some content inside the <disclosure-widget> element and a
"summary" as a value of its summary attribute. The shadow DOM takes
care of the markup, encapsulated styling and WAI-ARIA state
changes..."
http://www.heydonworks.com/accessible-web-component-with-aria/

Picturefill 2.0: Use the <picture> Element Today
By Scott Jehl.
"We started the Picturefill project over 2 years ago to provide an
easy, responsible, and immediately-usable approach to delivering
appropriate images to every browser and device..."
http://filamentgroup.com/lab/picturefill_2_a/

Picturefill
By Scott Jehl.
"The picture element and associated features are W3C standard HTML
features allow web developers to deliver an appropriate image to every
user depending on a variety of conditions like screen size, viewport
size, screen resolution, and more. Picturefill is a JavaScript file
(or a polyfill to be more specific) that enables support for the
picture element and associated features in browsers that do not yet
support them, so you can start using them today..."
http://scottjehl.github.io/picturefill/

+07: JAVASCRIPT.

Learning to focus()
By Heydon Pickering.
"Thanks to good fortune, I have a functional pair of eyes. When it
comes to traversing web pages, this is something of a boon since
shifting my focus from one part of the page to another requires
nothing more than semi-consciously contracting my extra-ocular muscles
and rotating my eyeballs a fraction of their circumference..."
http://www.sitepoint.com/learning-to-focus/

Use Redundant Keyboard and Mouse Event Handlers
By Denis Boudreau.
"Make sure specific mouse event handlers are duplicated to account for
the keyboard"
http://dboudreau.tumblr.com/post/83594040199/use-redundant-keyboard-and-mouse-event-handlers

Seven JavaScript Quirks I Wish I'd Known About
By Jim Cowart.
"This isn't an exhaustive list - just a sampling - but hopefully it
will shed some light on the language as well as show how powerful it
can be once you get past these kinds of hurdles..."
http://developer.telerik.com/featured/seven-javascript-quirks-i-wish-id-known-about/

+08: MISCELLANEOUS.

Structured Negotiations with Lainey Feingold
By Whitney Quesenbery.
"If you work in user experience or accessibility, you probably spend
part of your time on advocacy-making the case for a new design idea or
a new way of working. Lawsuits are the ultimate way to get two sides
to come to an agreement, but it's also an extremely confrontational
style of advocacy. A more collaborative process might be a better way
to reach your goal with an agreement that is a win for everyone"
http://rosenfeldmedia.com/blogs/a-web-for-everyone/structured-negotiations-with-lainey-feingold/

+09: NAVIGATION.

Make Sure Links Identified by Color Alone Can Be Easily Distinguished
in Another Way
By Denis Boudreau.
"Make sure links identified by color alone can be easily distinguished
in another way..."
http://dboudreau.tumblr.com/post/83615759992/make-links-easier-to-distinguish-when-color-alone

Title Tags and SEO - 3 Golden Rules
By Eric Enge.
"It used to be conventional wisdom that title tags should be between
65 and 70 characters in length. Early this year Google began
experimenting with a new search layout design that reduces the number
of characters shown to lengths between 48 and 62 characters. The title
tag remains an important part of SEO for one basic reason 'Äì it is
the overall label for the content of a page, and because the number of
characters is limited,there isn'Äôt much room to do that much with it.
Here are three golden rules of title tags."
http://searchenginewatch.com/article/2340747/Title-Tags-SEO-3-Golden-Rules

+10: USABILITY.

The Power of Microcopy in Web Design
By Paula Borowska.
"'Copy' has turned into a buzzword. Have you noticed it? People are
putting more and more importance onto the words you use on your
website. They are trying to put value in copy and it's a wonderful
idea! Words are a prominent way of communicating online. And it's the
small things that matter, especially when it comes to user
experience..."
http://designmodo.com/microcopy/

3 Crucial Steps to Achieve Intuitive Usability
By Jessica Miller.
"If you want to increase your usability, you need to give customers
what they want...Improvements in usability are crucial to a positive
user experience, even though the ROI is not immediately obvious.  If
you are still having trouble choosing what to keep, understand that
information beats creativity every time..."
http://usabilitylab.walkme.com/3-crucial-steps-achieve-intuitive-usability/

Why Users Fill Out Less if You Mark Required Fields
By Anthony.
"Are most of your users skipping the optional fields on your form?..."
http://uxmovement.com/forms/why-users-fill-out-less-if-you-mark-required-fields/

[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

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.]