[webdev] Web Design Update: August 29, 2012

Laura Carlson lcarlson at d.umn.edu
Wed Aug 29 17:08:15 CDT 2012 

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 10, August 29, 2012.

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

++ISSUE 10 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: EVENTS.
05: INFORMATION ARCHITECTURE.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: NAVIGATION.
09: USABILITY.
10: XML.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Putting Accessibility Into Infographics
By Karen Mardahl.
"...Just take the first step and the positive reception should have
you eager to take your next step."
http://www.stc-access.org/2012/08/16/putting-accessibility-into-infographics/

Journey to Universal Accessibility - Part 1
By Pathbrite.
"At Pathbrite, we're absolutely committed to providing the best user
experience possible.  To ensure that we reach all users, we've
recently released a number of accessibility improvements we feel bring
us one step closer to accomplishing the goal.  The following list of
improvements is merely round one of our accessibility changes, with
many more improvements on the horizon."
http://www.pathbrite.com/2012/08/23/journey-to-accessibility-part-1/

Reponse to Journey to Universal Accessibility-Part 1
By Dennis E. Lembree.
"I got an error when trying to comment, so here's my response to the
recent article Journey to Universal Accessibility-Part 1 by
@Pathbrite. In general, the article is pretty good, but several of the
techniques given are outdated..."
http://webaxe.blogspot.com/2012/08/reponse-to-journey-to-universal.html

University of Wisconsin Gameday Football App Another Accessibility
Disappointment
By Kelly Ford.
"...In just a few minutes of trying the app with Apple's VoiceOver-a
built-in screen reader on the iOS platform-it is a disappointment to
see that the University of Wisconsin has once again failed to pay
attention to accessibility..."
http://blog.kellyford.org/archives/2012/08/university_of_w_1.html

Notes on HTML5 Accessibility Support in IE 10
By Steve Faulkner.
"...Microsoft are doing things well in many respects, but there are
gaps.  I particularly like the audio and video implementations which
make it much easier for keyboard users to operate the controls without
having to remember keyboard shortcuts. It is unfortunate though that
each browser that supports accessibility and supports the placeholder
attribute has implemented its use in accessible name calculation
differently, its a an interoperability nightmare for developers and
users."
http://www.paciellogroup.com/blog/2012/08/notes-on-html5-accessibility-support-in-ie-10/


+02: CASCADING STYLE SHEETS.

CSS Background Images and High Contrast Mode
By Adrian Roselli.
Screen shot showing web page in both high-contrast and normal mode. I
try to stay up on accessibility gotchas and weird browser
implementations, but I just discovered one that I suspect I should
have already known.
http://blog.adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html

Vertical Media Queries
By Paul Boag.
"...These days, concerns about the fold are behind us for the most
part, as users are happy to scroll, but as our testing showed, in some
cases the layout of the page can actually misguide users into thinking
they've already reached the bottom of the page. In their browser,
there's a definite point at which the visible area ends and if the
content appears to end too, why would they scroll further? The
challenge was to show them that there was more to see..."
http://boagworld.com/tumblog/vertical-media-queries/

How Do You Use Responsive Images?
By Scott Gilbertson.
"No one wants to waste bandwidth sending large images over limited
mobile pipes, but everyone wants their images to look good on the
multitude of screens connecting to today's web. Finding the balance
between the myriad factors - screen resolution, screen size,
bandwidth, layout and design - is a tricky process..."
http://www.webmonkey.com/2012/08/responsive-images/

Normalize.css
"A modern, HTML5-ready alternative to CSS resets"
http://necolas.github.com/normalize.css/


+03: EVALUATION & TESTING.

9 Biases in Usability Testing
By Jeff Sauro.
"... it's important to understand the subtle biases that creep into
moderated and unmoderated usability tests..."
http://www.measuringusability.com/blog/ut-bias.php


+04: EVENTS.

Accessibility Camp New York
September 22, 2012.
New York, New York, U.S.A.
http://www.twitter.com/a11ycampnyc

Usability Week 2012 Conference
November 5-9, 2012
Seattle, Washington, U.S.A.
http://www.nngroup.com/events/seattle/

Usability Week 2012 Conference
December 2-7, 2012
Las Vegas, Nevada, U.S.A.
http://www.nngroup.com/events/las_vegas/


+05: INFORMATION ARCHITECTURE.

Wireframes - From Bar Napkins To Prototypes
By Mike Hughes.
"...In this article I will examine the different types of wireframes
and discuss their benefits and limitations and where in the design and
development life cycle they best fit..."
http://blog.usabilla.com/wireframes-from-bar-napkins-to-prototypes/


+06: JAVASCRIPT.

Javascript Scope Quiz
By Eric Jeney and Jake Binstein.
"This 'quiz' will ask a few questions along the way, and then try to
explain what Javascript is doing to give the resultant output..."
http://madebyknight.com/javascript-scope/


+07: MISCELLANEOUS.

HTML Responsive Images Extension
Mat Marquis and Adrian Bateman, editors
"This proposal adds new elements and attribute to [HTML5] to enable
different sources of images based on browser and display
characteristics. The proposal addresses multiple use cases such as
images used in responsive web designs and different images needed for
high density displays..."
http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html

Responsive Images, the Picture Element and the W3C: This is How you
Deal with Hixie and WHATWG
By Marc Drummond.
"First of all, huge congratulations to Mat Marquis, Jason Grigsby,
Scott Jehl, Ethan Marcotte, Florian Rioval and all the other web
geniuses who are working to make responsive images much, much easier
for those working with responsive web design..."
http://marcdrummond.com/responsive-web-design/2012/08/28/picture-element-proposal

How Do You Pick Responsive Images Breakpoints?
By Jason Grigsby.
"For a few months now, I've been puzzling over the question of how to
pick responsive images breakpoints. It has become a koan to me-no more
answerable than the sound of one hand clapping. And as long as I'm
haunted by the question, I thought I would share the joy..."
http://blog.cloudfour.com/how-do-you-pick-responsive-images-breakpoints/


+08: NAVIGATION.

Complex Navigation Patterns for Responsive Design
By Brad Frost.
"use mobile as an excuse to revisit your navigation. Look at your
analytics. What are your experience's key sections? Where are people
spending most of their time? Do you really need your privacy policy in
your primary navigation? Focus..."
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/


+09: USABILITY.

Tunnel Vision and Selective Attention
By Jakob Nielsen.
Users don't see stuff that's right on the screen. Selective attention
makes people overlook things outside their focus of interest.
http://www.useit.com/alertbox/tunnel-vision.html

Web Design Guidelines for Low Bandwidth
By aptivate.org.
"'Don't worry about bandwidth! Soon we will all have infinite
bandwidth for no cost.' Heard that before? In fact it is not true for
the majority of the world's population. Many people in remote
locations and the developing world do not have fast Internet
connections and won't be getting them any time soon. This is why
Aptivate has written a set of Web Design Guidelines for Low Bandwidth,
at a time when web site optimisation seems to be going out of
fashion."
http://www.aptivate.org/webguidelines/Home.html


+10: XML.

SVG Accessibility Gap Analysis
By Rich Schwerdtfeger.
"Every major browser now supports Scalable Vector Graphics (SVG)
making it an open supported retained mode, two-dimensional graphics
technology capable of supporting clear rendering of graphics even when
zoomed. Furthermore, the growth of big data on the Web and the limited
number of mobile platforms on which Flash is supported make SVG and
HTML5 Canvas the essential 2-D drawing engines for complex
visualizations on the Web. The drawback is that it is not accessible,
restricting the use of some rich visualization solutions that make use
of it. The purpose of this document is to define a common strategy
among the major browser manufacturers to fill accessibility gaps in
SVG 2.0."
http://lists.w3.org/Archives/Public/www-svg/2012Aug/0105.html


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

More information about the Webdev mailing list