[webdev] Web Design Update: May 4, 2012

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 45, May 4, 2012.

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

++ISSUE 45 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: JAVASCRIPT.
06: MISCELLANEOUS.
07: STANDARDS, GUIDELINES & PATTERNS.
08: TYPOGRAPHY.
09: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Mobile Accessibility Tip - Don't Suppress Pinch Zoom
By Henny Swan.
"A key feature of mobile browsing is being able to zoom in to read
content and out to locate content within a page. It's an invaluable
tool however I keep stumbling across sites that suppress zoom and with
it one of the main things that make mobile browsing viable for
everybody..."
http://www.iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom/

Make Sure Your HTML5 Document Outline is Backwards Compatible
By Roger Johansson.
"This is just a short reminder of something I wrote about in On using
h1 for all heading levels in HTML5: make sure your HTML5 document
outline is backwards compatible..."
http://www.456bereastreet.com/archive/201205/make_sure_your_html5_document_outline_is_backwards_compatible/

Good Examples of Accessible Web Sites
By Terrill Thompson.
"...It's great that at least 130 of the top pages are using ARIA
landmark roles. However, of all these pages, only eleven passed my
10-second accessibility assessment, and of those only seven survived
the cut to be featured in this blog post. With that, here are seven
pretty good examples of accessible websites..."
http://terrillthompson.com/blog/229

Efficiency in Accessibility Testing or, Why Usability Testing Should be Last
By Karl Groves.
"...that compared to the other types of testing for accessibility,
usability testing is an inefficient means of reaching our end goal.
Our end goal is not the results of the test but rather an accessible
system.  Because of the importance of accessibility we should seek to
find data accurately and efficiently.  For that reason alone,
usability testing should be done later in the lifecycle - after
automated, manual, and even use case testing."
http://www.karlgroves.com/2012/04/27/efficiency-in-accessibility-testing-or-why-usability-testing-should-be-last/

Google's Accessibility Message Comes Through Loud and Clear
By PF Anderson.
"The problem here is much, much, MUCH larger than simply a service
that isn't web-accessible right out of the box. The problem here is
that Google has REMOVED accessible options for products that WERE
accessible beforehand...Alright, Google, I hear you. The message is
that people with disabilities should just STAY HOME. But you know
what? I don't think that answer is going to work out very well, for
anyone. "
http://etechlib.wordpress.com/2012/04/26/googles-accessibility-message-comes-through-loud-and-clear/

Updated (HTML5) Re-Open Request and Change Proposal on Meta Generator
By Judy Brewer, et al.
"...This CP also re-analyzes the Co-Chairs' previous decisions in
favor of the <meta name="generator" /> exception and against the
requirement for alternative text, identifying factual and logical
inaccuracies. It describes the harm that is done by the generator
exception, and proposes removing the generator conformance exception
in order to address these problems..."
http://www.w3.org/html/wg/wiki/ChangeProposals/Issue31cMetaGenerator

Charles Schwab Web Accessibility Agreement
By Law Office of Lainey Feingold.
"Posted here is the settlement agreement between Charles Schwab and
one of its blind customers about website accessibility. Schwab engaged
in the Structured Negotiations process with the Law Office of Lainey
Feingold and has made a significant commitment to ensuring that its
website is inclusive for all customers..."
http://lflegal.com/2012/05/schwab-agreement/

NYU ITP Student Builds a Camera That Prints Descriptions Instead of Photos
By Jessica Roy.
"The Descriptive Camera hit the front page of Reddit's r/technology
subreddit today, and for good reason. The project, built by NYU ITP
student Matt Richardson, uses the Amazon Mechanical Turk Service to
turn a photo into a textual description of the captured scene..."
http://www.betabeat.com/2012/04/25/nyu-itp-student-builds-a-camera-that-prints-descriptions-instead-of-photos/


+02: CASCADING STYLE SHEETS.

Responsive Design - Harnessing the Power of Media Queries
By Google.
"...It's worth bearing in mind that there's no simple solution to
making sites accessible on mobile devices and narrow viewports. Liquid
layouts are a great starting point, but some design compromises may
need to be made. Media queries are a useful way of adding polish for
many devices, but remember that 25% of visits are made from those
desktop browsers that do not currently support the technique and there
are some performance implications. And if you have a fancy widget on
your site, it might work beautifully with a mouse, but not so great on
a touch device where fine control is more difficult..."’
http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html

Build a Responsive Site in a Week - Going Further, Part 5
By Paul Robert Lloyd.
"In the final part of our responsive web design tutorial, Clearleft's
Paul Robert Lloyd explains how there is more to a responsive design
than just flexible layouts, images and media queries."
http://www.netmagazine.com/tutorials/build-responsive-site-week-going-further-part-5

Five Responsive Web Design Pitfalls to Avoid
By Brad Frost.
"There are number of nasty traps to avoid when making your site
responsive. Brad Frost of R/GA reveals five of the biggest ones and
how to sidestep them."
http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid

Are Hover Events Extinct?
By Joshua Johnson.
"...My question today could change the way you think about hover
forever: 'Does the ubiquity of touchscreens render hover events
obsolete?' Put another way, did the iPhone kill :hover? Read on to see
how iOS handles a CSS hover event, what that means for you as a
developer, and how you should or shouldn't be using hover events in
your designs..."
http://designshack.net/articles/css/are-hover-events-extinct/

What's the Deal With Display: Inline-Block?
By Joshua Johnson.
"We've been using floats for layout pretty much since we left tables
behind. It's a quirky solution that can often cause troubles, but if
you know what you're doing, it works. One interesting alternative to
floats that people are turning to more and more lately is to set the
display value of an element to inline-block. What does this do
exactly? How is it like a float? How is it different? Let's dive in
and see what we can discover. "
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

HTML5 Offers 'Scoped' CSS for Precision Styling
By Scott Gilbertson.
"HTML5's controversial 'scoped' style attribute is now supported in
the latest Canary builds of Google's Chrome web browser and Mozilla
may eventually add support to Firefox as well..."
http://www.webmonkey.com/2012/04/html5-offers-scoped-css-for-precision-styling/

Don't Blame Opera, Blame Devs
By Adrian Roselli.
"On Wednesday news broke that Opera was going to support some Webkit
CSS vendor prefixes. On its surface I thought this wasn't exactly big
news. There was a good deal of hubbub about this back in February
(Browser Makers Caving to Vendor Prefix Misuse) when word got out that
Mozilla, Opera and Microsoft were all considering supporting the
-webkit prefix..."
http://blog.adrianroselli.com/2012/04/dont-blame-opera-blame-devs.html

Conditional CSS
By Jeremy Keith.
"I got some great comments on my post about conditionally loading
content. Just to recap, I was looking for a way of detecting from
JavaScript whether media queries have been executed in CSS without
duplicating my breakpoints. That bit is important: I'm not looking for
MatchMedia, which involves making media queries in JavaScript. Instead
I'm looking for some otherwise-useless CSS property that I can use to
pass information to JavaScript..."
http://adactio.com/journal/5429/


+03: EVALUATION & TESTING.

Measuring Usability Quantitatively
By Enric Quintero.
"The usability concept is understood as the measurement of the
difference between the ideal interaction and the real one taken by our
target audience..."
http://blog.clicktale.com/2012/04/30/measuring-usability-quantitatively/

Do Personas Always Have to be 'Good'?
By Apala Lahiri Chavan.
"HFI Writer Apala Lahiri Chavan, MA, MSc, CUA, CXA
shows how all personas are not equal. She discusses designing for
rounded users and extreme characters."
http://www.humanfactors.com/downloads/apr12.asp#research

The Wizard of Oz Guide to Usability Testing Mobile Prototypes
By Ritch Macefield.
"It's easy to create a mobile prototype on a desktop computer. What's
not quite so easy is to usability test the prototype and still allow
the participant to use mobile interaction gestures like long presses
and two finger pinches. We can overcome this obstacle by combining
Axure's mutually exclusive non-conditional cases with Wizard of Oz
usability testing."
http://www.userfocus.co.uk/articles/testing_mobile_prototypes.html


+04: EVENTS.

Reasons to be Appy
May 29, 2012.
London, England, United Kingdom
http://www.reasonstobeappy.com/

>From the Front: The Treasure of FrontEnd Island
September 21, 2012.
Bologna, Italy
http://2012.fromthefront.it/

HighEdWeb
October 7-10, 2012.
Milwaukeee, Wisconsin, U.S.A.
http://2012.highedweb.org/

CSS Dev Conference
December 5, 2012.
Honolulu, Hawaii, U.S.A.
http://cssdevconf.com/


+05: JAVASCRIPT.

Nested Inheritance in Javascript
By Marcos Caceres.
"Most examples of javascript inheritance only go one level deep (for
example, Student inherits (‚Üí) from Person). That's all well and
good, but what if you have a long chain for things you want to inherit
from?.."
http://marcosc.com/2012/04/nested-inheritance-in-javascript/

Conditional Content Based on CSS Media Queries
By Chris Coyier.
"The content below (loaded via Ajax) is conditional based on the
screen width. The media queries are maintained only in the CSS. For
the sake of demo, window resizing to certain breakpoints will trigger
the conditions again and load new content as appropriate..."
http://css-tricks.com/examples/ConditionalCSS/


+06: MISCELLANEOUS.

Scott Jehl on the Responsive Boston Globe Site
By Bruce Lawson.
"Opera's Bruce Lawson talks to Scott Jehl of The Filament Group about
developing the highly-regarded and responsive website for The Boston
Globe "
http://www.netmagazine.com/interviews/scott-jehl-responsive-boston-globe-site

Stop the Slippery Slope of Scope Creep
By John Tabita.
"...Scope creep often starts out as small and seemingly insignificant
changes or additions to an already approved design or feature.
Sometimes, the changes become so numerous that the project becomes a
former shadow of what it was originally intended to be. If you've
never read Matthew Inman's comic, How A Web Design Goes Straight To
Hell, take a few moments to have a good laugh (or cry), and we'll
continue..."
http://www.sitepoint.com/stop-the-slippery-slope-of-scope-creep/

Yahoos Doug Crockford On JavaScript
By Jacob Cook.
"Welcome to the first in a new series of interviews called 'How I
Work'. These interviews revolve around how thinkers and creators in
the Web world design, code, and create. The goal is not to get into
the specific nuances of their craft (as that information already
exists online), but rather step back and learn a bit about their
habits, philosophies, and workflow for producing great work..."
http://coding.smashingmagazine.com/2012/04/27/yahoos-doug-crockford-on-javascript/

Opera - Over Half of Mobile Users Are Mobile-only
By Scott Gilbertson.
"...There are two lessons for web developers in this report. First,
globally, mobile is not the future of the web - it's the now of the
web. And second, hiding content on the mobile version of a website
means a significant number of users will never see that content at all
since they only access sites via a mobile device. Consider your
hidden-from-mobile content non-existant content...Naturally every
website's audience and needs are different. If your site is
U.S.-centric then Opera's report may have very little bearing on your
users, but for those who'd like to expand to, or are already serving a
global market, clearly making sure your site works well on mobile
devices is key..."
http://www.webmonkey.com/2012/04/opera-over-half-of-mobile-users-are-mobile-only/

Resizable Displays
http://fluid.media.mit.edu/people/juergen/current/flexdisplays.html


+07: STANDARDS, GUIDELINES & PATTERNS.

HTML5 Accessibility Chops - hidden and aria-hidden
By Steve Faulkner.
"As a developer and also a consultant advising developers on how to
develop accessible content, it is important to have and provide up to
date and practical knowledge about robust development techniques. A
recent question on Stack Overflow got me thinking: What is the best
method for hiding content for all users? For hiding content for some
users?.."
http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/

Learning and Grammatical Forgiveness
By Atul Varma.
"HTML is a very interesting machine language because, like human
languages, most things that interpret it are very forgiving..."
http://www.toolness.com/wp/2012/04/learning-and-grammatical-forgiveness/

WHATWG as W3C Community Group in Name Only
By Adrian A. Roselli.
"As of Monday, April 23, The W3C has announced that it is looking for
a new editor for the HTML Working Group specifically tasked with
shepherding HTML5 through the process until it reaches a formal
recommendation. Ian Hickson (Hixie) made the request for a call for
his replacement so he could focus on ongoing HTML development, such as
HTML.Next. With that announcement the W3C is also making the following
changes..."
http://blog.adrianroselli.com/2012/04/whatwg-as-w3c-community-group-in-name.html


+08: TYPOGRAPHY.

Fighting Bad Typography Research
By Alex Poole.
"When you hear claims which are radically different from the
established body of research, you should rightly be sceptical,
especially when they haven't been published in a peer-reviewed
scholarly journal. Nevertheless, being sceptical means examining the
merits of any research even if it goes against the consensus view..."
http://alexpoole.info/fighting-bad-typography-research/


+09: USABILITY.

Your edu Website is Too Complicated
By Matt Klawitter.
"...Success means keeping the choices on a homepage few and strategic,
educating and informing the user as they choose, and resisting the
temptation to over-build a page. The creative opportunity is to follow
these fundamentals while also presenting a beautiful, engaging, and
realistic design that enhances the experience - not overpowers it with
choice. Quick access to content is obviously important but worthless
if the experience does not simultaneously satisfy the user's
expectations..."
http://mattklawitter.com/2012/04/13/your-edu-website-is-too-complicated/

Fanfare for the Common Breakpoint
By Jeremy Keith.
"'If we're truly taking a Content First approach then we need to
'Start designing from the content out, rather than the canvas in.' If
we begin with some specific canvases (devices), they're always going
to be arbitrary. There are so many different screen sizes and ratios
out there that it doesn't make sense to favour a handful of them out
of tradition. 320, 480, 640...those numbers aren't any more special
than any other screen widths."
http://adactio.com/journal/5425/

Moore's Law and Responsive Design Breakpoints
By Virginia DeBolt.
I'm really excited about responsive design. I think it's brilliant and
necessary in the current state of web education and web design. But it
isn't the last thing that designers need to learn or think about when
looking to the future size of web accessible devices.
http://www.webteacher.ws/2012/04/27/moores-law-and-responsive-design-breakpoints/

How Useful is Your Website?
By Gerry McGovern.
"Great websites have a clear function, purpose and use. What does your
website help your customers to do?"
http://www.gerrymcgovern.com/nt/2012/nt-2012-04-30-Useful-website.htm


[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

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