[webdev] Web Design Update: June 7, 2012

Laura Carlson lcarlson at d.umn.edu
Thu Jun 7 06:19:59 CDT 2012 

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 50, June 7, 2012.

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

++ISSUE 50 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: COLOR.
05: EVALUATION & TESTING.
06: EVENTS.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: STANDARDS, GUIDELINES & PATTERNS.
11: TOOLS.
12: TYPOGRAPHY.
13: USABILITY.


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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Screen Reader User Survey #4 Results
By Jared Smith.
"The results from our most recent screen reader user survey are now
available at http://webaim.org/projects/screenreadersurvey4/. There
were 1782 valid responses, making this the most popular survey thus
far. We hope the data is informative and will help promote more
accessible web development..."
http://webaim.org/blog/survey-4-results/

WebAIM's Survey: Headings Matter to Users of Assistive Technologies
By Duff Johnson.
"The May 2012 WebAIM survey is categorical: Headings are far more than
a mere 'aid to navigation.' Headings really matter to users of
assistive technologies, and so do heading levels..."
http://www.commonlook.com/headings-matter-to-at-users

Placeholder Attribute Is Not A Label!
By Dennis E. Lembree.
"Just so we're all clear on this, the HTML5 placeholder attribute in a
text input is not a replacement for the label element. Period. The
placeholder should only be used as a brief example of the text to be
entered. Besides inconsistent support for screen readers, using a
placeholder as an input label can create usability problems and issues
for those with cognitive impairments..."
http://webaxe.blogspot.com/2012/06/placeholder-attribute-is-not-label.html

Accessibility Cheat Sheets
By Gaining Online Accessible Learning through Self-study (GOALS).
"GOALS has created a new set of resources, or 'cheat sheets' to help
assist individuals in the quest to create accessible content. GOALS
currently has four cheat sheets available, addressing the following
topics:  Creating accessible documents in Microsoft Word. Microsoft
PowerPoint. PDF conversion in Microsoft Word. Creating accessible PDF
documents in Acrobat X..."
http://ncdae.org/blog/accessibility-cheat-sheets/

HTML5 Canvas Accessibility in Firefox 13
By Steve Faulkner.
"The recently released Firefox 13 implements the HTML5 specification's
canvas element fallback concept. This means that the content inside a
canvas elements start and end tags is exposed to assistive technology
users even when the browser supports canvas. It also means that any
interactive elements, inside a canvas elements start and end tags such
as links or form controls will be included in a documents default tab
order even when the browser supports canvas..."
http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/

ADA Litigation Over Website Accessibility is Poised to Explode
By Jim Butler.
"...Why could there be a big slug of these ADA lawsuits over websites?
Marty says that there are several reasons..."
http://www.hotelnewsresource.com/article63740ADA_Litigation_over_Website_Accessibility_is_Poised_to_Explode.html

June 6 is CaptionTHIS Day!
By Char James-Tanny.
"Captioning. Most people ignore it (or think it's a nuisance) until
those times when they really need it. For example: at a restaurant
where TVs are showing the latest sports event, in a hospital waiting
room, at a really noisy (or really quiet) office, while watching
foreign-language films, or any of more than a dozen other examples..."
http://jtfassociates.com/june-6-is-captionthis-day/

What Do Hearing Loss, Hearing Aids and Cochlear Implants Sound Like?
By Meryl Evans.
"I had been looking for resources that show those with normal hearing
what it's like to hear with different levels of hearing loss, hearing
aids and cochlear implants. I had two resources in an old blog post
and found three more today, so I'm combining them in this post."
http://shelaza.com/links/what-do-hearing-loss-hearing-aids-and-cochlear-implants-sound-like/

Blindfolded
By Derek Featherstone.
"Sometimes we're blindfolded, even to our own actions..."
http://simplyaccessible.com/article/blindfolded/

Accessibility and Developers
By Paul Irish.
"...Most developers have no idea what effect adding ARIA markup to our
documents has on people using screenreaders. We need that. Actual
before-and-after video stuff makes this topic real. See zomigi's
recent post: videos of screenreaders using ARIA, for great
examples..."
http://paulirish.com/2012/accessibility-and-developers/


+02: BOOKS.

Smith, Dori. Dreamweaver CS6: Visual QuickStart, Peachpit Press 2012.
Stevens, Luke. The Truth About HTML5 (For Web Designers), 2012.


+03: CASCADING STYLE SHEETS.

CSS Selectors That Rock
By Jake Bresnehan.
"...Below are 10 CSS selectors. Some of them you probably use on every
project and some possibly never. Next time you're finding yourself
going through the motions, maybe it's a good time to sneak in some new
selectors that you wouldn't normally use..."
http://web-design-weekly.com/2012/05/31/css-selectors-that-rock/

Repeating Linear Madness
By Eric A. Meyer.
"...The summary is as follows: NOT READY FOR PRIME TIME. In fact, not
even ready for safe harbor in Europe. Whether they will become ready
for use is up to the various browser makers..."
http://meyerweb.com/eric/thoughts/2012/05/30/repeating-linear-madness/

Gradient Repetition
By Eric A. Meyer.
"Yesterday, I shared a test of repeating linear gradients and the
madness they embody in various browsers. There were some suggestions
for fixes both on the intertubes as well as the comments section of
the post, so I should take a moment to explore the reasons for my post
and test, and also what I would consider to be stable alternatives to
the patterns I was creating..."
http://meyerweb.com/eric/thoughts/2012/05/31/gradient-repetition/

How to Resize Background Images with CSS3
By Craig Buckler.
"In CSS2.1, background images applied to a container retained their
fixed dimensions. Fortunately, CSS3 introduces the background-size
property which allows backgrounds to be stretched or squashed. It's
ideal if you're creating a template using Responsive Web Design
techniques..."
http://www.sitepoint.com/css3-background-size-property/


+04: COLOR.

Visualizing Colors in HSL Space
By Eric A. Meyer.
"I've been working through and rewriting the chapters of CSS: The
Definitive Guide for its fourth edition, and at present I'm nearing
the end of chapter 4, 'Values and Units'. That means I just worked
through the color values, which required a lot more of a rewrite than
you might think. After all, when the third edition came out, RGBa,
HSL, and HSLa weren't viable options, so they didn't get coverage.
Expanding the color-values section to incorporate them posed two major
challenges..."
http://meyerweb.com/eric/thoughts/2012/06/04/visualizing-colors-in-hsl-space/


+05: EVALUATION & TESTING.

How Many Test Users in a Usability Study?
By Jakob Nielsen.
"The answer is 5, except when it's not. Most arguments for using more
test participants are wrong, but some tests should be bigger and some
smaller."
http://www.useit.com/alertbox/number-of-test-users.html

10 Things to Know about the Single Usability Metric (SUM)
By Jeff Sauro.
"...Here are 10 things to know about single measures of usability..."
http://www.measuringusability.com/blog/sum.php

Why Are Contextual Inquiries So Difficult?
By Jim Ross.
"Contextual inquiries require a difficult balance between traditional
interviewing and ethnographic observation."
http://www.uxmatters.com/mt/archives/2012/06/why-are-contextual-inquiries-so-difficult.php

5 Useful Lies to Tell User Research Participants
By Lisa Duddington.
"f you've ever run a research or usability test, you'll know they can
be tricky to facilitate. After all, you're dealing with people; and
people come with a whole host of existing preconceptions,
personalities, emotions, and experiences. One thing that can help you
to gain more honest and thereby useful feedback from research
participants is, in fact, to lie to them."
http://www.uxbooth.com/blog/5-useful-lies-to-tell-user-research-participants/


+06: EVENTS.

Test the Web Forward
June 15-16, 2012.
San Francisco, California, U.S.A.
http://testthewebforward.org/

Accessibility and Inclusive Design Group Meeting
July 11, 2012.
Santa Monica, California, U.S.A.
http://www.meetup.com/Los-Angeles-Accessibility-and-Inclusive-Design-Group/events/67495812/

Accessibility Summit 2012
September 25, 2012.
Online
http://environmentsforhumans.com/2012/accessibility-summit/

Future of Mobile London
October 15-17, 2012.
London, England, United Kingdom
http://future-of-mobile.com/london-2012/


+07: JAVASCRIPT.

Hiding Visible Content From Screen Readers with Aria-Hidden
By Roger Johansson.
"Sometimes you need to hide parts of a web page, either permanently or
temporarily. A common use case is content that becomes visible only
after the user has interacted with a control on the page, for instance
by clicking a button that reveals more content or activating a tab in
a tab system..."
http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

Exceptional Exception Handling in JavaScript
By Colin Ihrig.
"When a JavaScript statement generates an error, it is said to throw
an exception.  Instead of proceeding to the next statement, the
JavaScript interpreter checks for exception handling code.  If there
is no exception handler, then the program returns from whatever
function threw the exception.  This is repeated for each function on
the call stack until an exception handler is found or until the top
level function is reached, causing the program to terminate..."
http://www.sitepoint.com/exceptional-exception-handling-in-javascript/

JavaScript at 17 (video)
By Brendan Eich.
Brendan Eich's Fluent 2012 keynote.
http://www.youtube.com/watch?v=Rj49rmc01Hs

Don't Feed The Trolls (video)
By Nicole Sullivan.
Nicole Sullivan's Fluent 2012 keynote.
http://www.youtube.com/watch?v=ulNSlES1Fds

Javascript Development Workflow of 2013 (video)
By Paul Irish.
Paul Irish's Fluent 2012 presentation.
http://www.youtube.com/watch?v=f7AU2Ozu8eo


+08: MISCELLANEOUS.

A New (Responsive Images) Proposal Featuring Both Advantages
By Anselm Hannemann.
"Kornel Lesinski just published a new proposal on the WHATWG mailing
list this morning. He proposes a new element in HTML called <pic>
which is shorter to write than <picture> would be..."
http://www.w3.org/community/respimg/2012/06/01/a-new-proposal-in-the-whatwg-mailing-list-featuring-both-advantages/

The <pic> Element
WHATWG Emal Thread.
"Here's a bit of a kitchen sink solution with ideas that floated around..."
http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Jun/thread.html#msg1

Bing and Google Recommend Responsive Web Design
By Craig Charley.
"With so many conflicting views in the SEO community as to whether it
is best to design a separate mobile site or make your site responsive,
I thought I should take a look at what Google & Bing recommend. They
are the two biggest search engines, so following their guidelines
makes sense..."
http://speckyboy.com/2012/06/04/bing-google-recommend-responsive-web-design/

Responsive Web Design Is More Than A Mobile-Optimization Strategy
By George White.
"...An often missed-point about RWD is that it allows for the
preservation of the URL structure of a website across multiple
contexts while still providing a path to optimization of the user
experience for a specific context. The same URL that you visit on your
desktop will work when viewed on your phone. This is extremely
important, as the Web is built on URLs and consistency across them is
vital. People pass links around via email, social networks, QR codes,
on physical media such as posters and billboards, and any number of
ways. When a person attempts to interact with a URL, it may be through
any number of device and situational contexts..."
http://cantina.co/2012/05/24/responsive-web-design-is-more-then-a-mobile-optimization-strategy/

Scope Creep
By Lori Widmer.
"...How to handle the scope creep..."
http://www.wordsonpageblog.com/2012/06/scope-creep.html


+09: NAVIGATION.

7 Responsive Navigation Patterns
By Steven Bradley.
"Once you get comfortable developing flexible layouts and moving
around the big boxes of a responsive design, your attention will turn
inwards toward the smaller boxes inside the big picture containers.
First among those will likely be navigational systems..."
http://www.vanseodesign.com/web-design/responsive-navigation-patterns/


+10: STANDARDS, GUIDELINES & PATTERNS.

Report: Current State and Roadmap of Standards for Web Applications on Mobile
By W3C.
"W3C has published a new edition of Standards for Web Applications on
Mobile, an overview of the various technologies developed in W3C that
increase the power of Web applications, particularly in the mobile
context..."
http://www.w3.org/News/2012.html#entry-9467


+11: TOOLS.

Find Empty Links and Buttons
By Ted Drake.
Ted developed an "Empty Link and Button" bookmarklet.
http://yaccessibilityblog.com/library/find-empty-links-and-buttons.html


+12: TYPOGRAPHY.

Responsive Typography - The Basics
By Oliver Reichenstein.
"In the heat of the relaunch I wrote a quick blog post on responsive
typography, focussing solely on the aspect of our latest experiment:
responsive typefaces. Without knowing the history of iA, you'd miss
some key aspects to the responsive typography and design in our
relaunched site. Instead of mashing up all our articles on the matter,
I decided to start from scratch and explain everything step by
step..."
http://informationarchitects.net/blog/responsive-typography-the-basics/


+13: USABILITY.

MUD: Minimum Usable Design
By Paul Scrivens.
"...I'm coining the term Minimum Usable Design, and that is when you
reach your 50% mark for your design. If you can't use your design
after you have reached 50% (or a person can't understand at least 50%
of what is going on) then you haven't reached the 50% mark
yet....Always aim for the next halfway point and you will get closer
and closer to the edge of the forest-but remember that you will never
reach the end. Designs can always be improved upon, and therefore will
always be unfinished."
http://www.smashingmagazine.com/2012/05/29/mud-minimum-usable-design/

Diminishing Returns
By Dmitry Fadeyev.
"...It's about figuring out what matters and implementing this in the
best way you can."
http://www.usabilitypost.com/2012/05/30/diminishing-returns/


[Section one ends.]


++ SECTION TWO:

+17: 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