[webdev] Web Design Update: February 2, 2012

Thu Feb 2 06:12:53 CST 2012

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 32, February 2, 2012.

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

++ISSUE 32 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: EVENTS.
04: INFORMATION ARCHITECTURE.
05: JAVASCRIPT.
06: MISCELLANEOUS.
07: NAVIGATION.
08: STANDARDS, GUIDELINES & PATTERNS.
09: TOOLS.
10: USABILITY.
11: XML.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Before and After Demonstration (BAD)
By W3C WAI Education and Outreach Working Group (EOWG).
"The Before and After Demonstration is a multi-page resource that
shows an inaccessible website and a retrofitted version of this same
website. Each web page includes inline annotations that can be
activated to highlight some of the key accessibility barriers or
repairs. Each web page is also accompanied by an evaluation report to
inform the developers on the level of conformance to the Web Content
Accessibility Guidelines (WCAG)..."
http://www.w3.org/WAI/demos/bad/

Did We Lose Track of the Big Picture?
By Thierry Koblentz.
"It seems to me that we are slowly switching from publishing content
for the Web, to making content accessible to Screen-Readers (SR) -
from targeting users, to focusing on devices and modern browsers. We
write about new techniques without considering fall back mechanisms,
we use ARIA 'hacks' that look like anti-patterns and we use frameworks
that have chosen to ignore old IE..."
http://www.css-101.org/articles/the_power_of_the_web_is_in_its_universality/strive_to_make_content_accessible_to_all.php

Chasing the Accessibility Business Case - Conclusion
By Karl Groves.
"...Despite all I've said in all of these posts, the only thing I
think has real, true data regarding actual money having been saved/
lost is legal risk in the United States. Yeah, the
support-for-low-bandwidth-users thing is compelling, but finding hard
data showing that accessibility plays a large role in solving that
problem is impossible. Furthermore, if pushed, I could demonstrate
that accessibility causes more bandwidth usage. But I have a question
for all those who continually want to go down the business case path
to prove a value to accessibility:  What's wrong with just doing a
good job?..."
http://www.karlgroves.com/2012/01/27/chasing-the-accessibility-business-case-conclusion/

WCAG Next
By Jared Smith.
"...we present here some possible changes and improvements to WCAG
2.0, and items that we hope might help you better understand and
implement optimal accessibility..."
http://webaim.org/blog/wcag-next/

RNIB Serves Legal Proceedings on bmibaby
By Royal National Institute of Blind People.
"Leading sight loss charity the Royal National Institute of Blind
People (RNIB) is taking legal action over low cost airline bmibaby's
failure to ensure web access for blind and partially sighted
customers..."
http://www.rnib.org.uk/aboutus/mediacentre/mediareleases/mediareleases2012/Pages/pressrelease27Jan2012.aspx

+02: CASCADING STYLE SHEETS.

New CSS3 Properties to Handle Text and Word Wrapping
By Louis Lazaris.
"...The word-wrap property has been removed from the CSS3 spec and
other related properties have been added..."
http://www.impressivewebs.com/new-css3-text-wrap/

Bulletproof Web Design: Creative Floating
By Dan Cederholm.
"The creative use of the float property can give grid-like results,
with a fraction of the code we'd need with the nested-tables approach.
By paring down the markup to its barest essentials, you make it easier
for browsers, software, and all devices to read your content, at the
same time making it easier for other designers and developers to
modify and edit these components."
http://www.peachpit.com/articles/article.aspx?p=1815998

How to Put Your CSS3 on :target
By Craig Buckler.
"...CSS3 also introduced :target; a powerful pseudo-class which can
reduce the need for scripting in interactive widgets. Consider a page
URL such as http://mysite.com/page#mytarget; an element with the id
'mytarget' can have matching :target styles applied..."
http://www.sitepoint.com/css3-target-selector/

* { box-sizing: border-box } FTW
By Paul Irish.
"One of my least favorite parts about layout with CSS is the
relationship of width and padding. You're busy defining widths to
match your grid or general column proportions, then down the line you
start to add in text, which necessitates defining padding for those
boxes. And 'lo and behold, you now are subtracting pixels from your
original width so the box doesn't expand..."
http://paulirish.com/2012/box-sizing-border-box-ftw/

+03: EVENTS.

SMPTE Timed Text (Webcast)
February 23, 2012 at 1:00 PM (ET).
Online.
http://smptepda16feb2012-estw.eventbrite.com/

Fluent 2012 - JavaScript and Beyond
May 29-31, 2012.
San Francisco, California, U.S.A.
http://fluentconf.com/fluent2012

An Event Apart Chicago
August 27-29, 2012.
Chicago, Illinois, U.S.A.
http://aneventapart.com/2012/chicago/

+04: INFORMATION ARCHITECTURE.

Wireframing for Responsive Design
By Leigh Howells.
"I'm conscious that some people in the web industry, including
myself(!) may be getting tired of hearing the word 'responsive' in
everything they read.  We shouldn't be, because I don't think it's
going to change any time soon (not until the next big web paradigm
shift at least) and mobile will only become more important as time
goes on and the device numbers grow and they technology evolves. Get
used to it. We, the content designers, have to be just as responsive
as the interfaces we create, adapting to change as it happens. To do
this we need to learn to think differently.
http://boagworld.com/design/wireframing-for-responsive-design/

+05: JAVASCRIPT.

Nesting ARIA Roles
By Bruce Lawson.
"A couple of people have asked me recently if it's possible to nest
ARIA roles. The answer: yes..."
http://www.brucelawson.co.uk/2012/nesting-aria-roles/

+06: MISCELLANEOUS.

Responsive Web Design
By Katrien De Graeve.
"...Instead of responding to today's needs for a desktop web version
adapted to the most common screen resolution, along with a particular
mobile version (often specific to a single mobile device), the idea is
to approach the issue the other way around: use flexible and fluid
layouts that adapt to almost any screen..."
http://www.sitepoint.com/responsive-web-design/

Responsive Images: How they Almost Worked and What We Need
By Mat Marquis.
"With a mobile-first responsive design approach, if any part of the
process breaks down, your user can still receive a representative
image and avoid an unnecessarily large request on a device that may
have limited bandwidth. But with several newer browsers implementing
an 'image prefetching' feature that allows images to be fetched before
parsing the document's body, some of the web's brightest developers
are abandoning responsive images in favor of user agent detection, at
least as a temporary solution. For us standardistas, UA detection
leaves a bad taste in the mouth. More importantly, as the number and
kinds of devices continue to grow, UA detection will quickly become
untenable-just as browser detection did back in the bad old days
before web standards. What's really needed, argues Mat Marquis, is a
new markup element that works the way the HTML5 video element works.
Sound crazy? So crazy it just might work."
http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/

Adaptive Images in Responsive Web Design
By Christopher Schmitt.
"...wherein lies the problem: knowing the value of one item, like
screen resolution, doesn't mean you get the full picture of the user's
browser experience..."
http://www.christopherschmitt.com/2012/01/31/adaptive-images-in-responsive-web-design/

+07: NAVIGATION.

Why Audience Navigation Usually Doesn't Work
By Gerry McGovern.
"Links cause most problems when they overlap and audience based links
are particularly problematic."
http://www.gerrymcgovern.com/nt/2012/nt-2012-01-30-Why-doesn%27t.htm

+08: STANDARDS, GUIDELINES & PATTERNS.

Browser Support for New HTML5 Structural Elements
By Virginia DeBolt.
"The new structural elements in HTML5 include section, article, aside,
hgroup, header, footer, nav, figure, figcaption, time, and mark..."
http://www.webteacher.ws/2012/01/27/browser-support-for-new-html5-structural-elements/

The State Of HTML5 Video
By Long Tail Video.
"HTML5 has entered the online video market, which is both exciting and
challenging for developers in the industry. With both the HTML5
specification and the various browser implementations in constant
flux, we at LongTail Video spend a signficant amount of time
understanding the limitations of the technology, testing playback
across various browsers and devices, and optimizing our own products
for HTML5 playback..."
http://www.longtailvideo.com/html5/

The Best of <time>s
By Bruce Lawson.
"Avid HTML5 watchers will know that the <time> element was dropped
from HTML, then re-instated, with more New! Improved! semantics..."
http://www.brucelawson.co.uk/2012/best-of-time/

+09: TOOLS.

Accessible Media Player 2.0
By Nomensa.
"User experience design agency Nomensa celebrates 10 years in the
industry by releasing the source code of their accessible media player
to the public..."
http://www.nomensa.com/about/news-items/nomensas-accessible-media-player-20-now-free-download

Categorizr
By Brett Jankord.
"Categorizr is a modern device detection script that helps categorize
different web capable devices into 3 categories, desktop, tablet, or
mobile. It take's traditional device detection and flips it on it's
end, assuming devices are mobile first, unless otherwise detected as
tablet or desktop..."
http://www.brettjankord.com/2012/01/16/categorizr-a-modern-device-detection-script/

+10: USABILITY.

Browser and GUI Chrome
By Jakob Nielsen.
"Chrome is the user interface overhead that surrounds user data and
web page content. Although chrome obesity can eat half of the
available pixels, a reasonable amount enhances usability..."
http://www.useit.com/alertbox/ui-chrome.html

Simplicity? Complexity? Persuasion
By James Coston.
"Complexity is subjective; if you understand something it's not really
complicated..."
http://www.nomensa.com/blog/2012/simplicity-complexity-persuasion/

+11: XML.

Bending XML to Your Will
By Stephen Thorpe.
"...Knowing how to process XML data is a crucial programming skill
today, and thankfully, PHP offers multiple ways to read, filter, and
even generate XML. In this article I'll explain what exactly XML is,
in case you haven't had any experience with it yet, and then dive into
a few ways you can use PHP to bend XML to your will..."
http://phpmaster.com/bending-xml-to-your-will/

[Section one ends.]

++ SECTION TWO:

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