[webdev] Web Design Update: May 17, 2012

Thu May 17 06:14:03 CDT 2012

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 47, May 17, 2012.

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

++ISSUE 47 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: DREAMWEAVER.
04: EVALUATION & TESTING.
05: EVENTS.
06: INFORMATION ARCHITECTURE.
07: MISCELLANEOUS.
08: NAVIGATION.
09: PHP.
10: STANDARDS, GUIDELINES & PATTERNS.
11: TOOLS.
12: USABILITY.
13: XML.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Methodological Flaws put Question Mark on Study of the Impact of WCAG
on User Problems
By Detlev Fischer.
"A recent study has questioned the relevance of WCAG for improving
website accessibility. It claims that only half of users' problems
were covered by WCAG success criteria, and sees no evidence that the
use of WCAG techniques improved matters. We take a look at the
study..."
http://www.bitvtest.eu/articles/article/lesen/chi2012-wcag.html

A Challenge to Web Accessibility Metrics and Guidelines - Putting
People and Processes First
By Cooper, M., Sloan, D., Kelly, B. and Lewthwaite.
"This paper argues that web accessibility is not an intrinsic
characteristic of a digital resource but is determined by complex
political, social and other contextual factors, as well as technical
aspects which are the focus of WAI standardisation activities. It can
therefore be inappropriate to develop legislation or focus on metrics
only associated with properties of the resource."
http://opus.bath.ac.uk/29190/9/print-it.html

User Statistics - People with Disabilities
By John Foliot.
"...by looking at general population numbers and statistics it should
become very clear that between 20% and 25% of the average web site
user-base will benefit from ensuring that accessible design and
development techniques are incorporated into your current or
next-generation web property."
http://john.foliot.ca/user-statistics-people-with-disabilities/

ARIA-Group: A Viable Alternative for Fieldset / Legend?
By Sailesh Panchang.
"ARIA's role="group" and role="radiogroup" can be used to group form
controls to yield results that are comparable to HTML's FIELDSET -
LEGEND elements. Testing shows that when these roles are set on
container elements (like div, td, etc.) and labeled with other ARIA
attributes like aria-labelledby or aria-label, the method offers a
viable alternative to that is supported by browsers like Firefox and
Internet Explorer and screen reading software JAWS for Windows and
NVDA..."
http://www.deque.com/aria-group-viable-alternative-fieldset-legend

Accessibility Steps
By Elie Sloim.
"Last year, Aurelien Levy, CEO at Temesis reported us two facts..."
http://blog.temesis.com/post/2012/05/14/Accessibility-steps

+02: CASCADING STYLE SHEETS.

Updated CSS3 Preview - CSS3 Attribute Selectors
By Chris.
"The CSS3 Selectors module introduces three new attribute selectors,
which are grouped together under the heading 'Substring Matching
Attribute Selectors'..."
http://www.css3.info/updated-css3-preview-css3-attribute-selectors/

Cleaning Up HTML, Part 1, When Mixins Become Skins
By Niels Matthijs.
"2012 is going to be a good year for html fanatics. Recently I've come
across two unrelated techniques that hold great potential for
improving the way we write our html. Ironically, both of them are
actually css improvements and have very little to do with the html
spec itself, but if you've been keeping up with best practices you
know that html has suffered some great setbacks the past couple of
years. It's time to finally right those wrongs again..."
http://www.onderhond.com/blog/work/new-html-css-mixins-skins

Defining 'ch'
By Eric A. Meyer.
"I'm working my way through a rewrite of Two Salmon (more on that
anon), and I just recently came to the ch unit. Its definition in the
latest CSS Values and Units module is as follows..."
http://meyerweb.com/eric/thoughts/2012/05/15/defining-ch/

Two New Proposals to Solve the CSS3 Vendor Prefix Crisis
By Craig Buckler.
"Web developers have been concerned about the vendor prefix crisis
since February 2012. To summarize the issue, this is what should
happen in an ideal world..."
http://www.sitepoint.com/css3-vendor-prefix-crisis-solutions-2/

5 Useful CSS Tricks for Responsive Design
By Nick La.
"Making the design to be responsive is very easy as shown in my
Responsive Design in 3 Steps tutorial, but maintaining the elements to
look aesthetically balanced on all breakpoint layouts is an art. Today
I'm going to share 5 of my commonly used CSS tricks along with sample
cases for coding responsive designs..."
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

+03: DREAMWEAVER.

How to Preview a Website for Mobile Screens in Adobe Dreamweaver CS6
By Adobe Creative Team.
"Learn how to preview a website for mobile screens, including how to
locate the finished layout using the Files panel, which lets you
browse files without leaving Dreamweaver. You'll also try the
Multiscreen Preview, which lets you see how your site looks at
multiple sizes at once."
http://www.peachpit.com/articles/article.aspx?p=1870088

Designing Responsive Web Pages Using a Fluid Grid Layout in Adobe
Dreamweaver CS6
By Adobe Creative Team.
"In the following excerpt from Adobe Creative Suite 6 Design and Web
Premium Classroom in a Book, you'll work on two pages of a prototype
website in Adobe Dreamweaver. You'll learn how to quickly set up a web
page layout that adapts to different screen sizes, and preview the
design in a web browser."
http://www.peachpit.com/articles/article.aspx?p=1870087

+04: EVALUATION & TESTING.

Are You Testing For Delight?
By Dana Chisnell.
"Everybody's talking about designing for delight. Even me! Well, it
does get a bit sad when you spend too much time finding bad things in
design. So, I went positive. I looked at positive psychology, and
behavioral economics, and the science of play, and hedonics, and a
whole bunch of other things, and came away from all that with a
framework in mind for what I call "happy design." It comes in three
flavors: pleasure, flow, and meaning..."
http://usabilitytestinghowto.blogspot.com/2012/05/are-you-testing-for-delight.html

Do A/B Tests Focus Us On The Wrong Problems?
By Jared M. Spool.
"Last week, I attended a conference presentation where a team
presented findings from their A/B Testing efforts. It was a cute
presentation where they posted the control and test variants, then
asked the audience to pick which one 'won' the A/B test. They compared
the audience answer to the variant that demonstrated the best increase
in the conversion rate (sometimes as little as 0.9%, which the
presenters declared as a 'huge increase'). For dramatic effect, the
variant that won often broke many commonly accepted design principles,
supporting their case that A/B testing trumps our traditional rules of
good design..."
http://www.uie.com/brainsparks/2012/05/14/do-ab-tests-focus-us-on-the-wrong-problems/

+05: EVENTS.

Mobile Web 2 Applications
June 11, 2012  Start Date
Online.
http://www.w3.org/QA/2012/05/help_create_a_world_of_mobile_web_apps.html

edUi
September 24-26, 2012.
Richmond, Virginia U.S.A.
http://eduiconf.org/

+06: INFORMATION ARCHITECTURE.

Responsive Layouts, Responsively Wireframed
By James Mellers.
"Made with HTML/CSS (no images, no JS*) this is a simple interactive
experiment with responsive design techniques..."
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/

+07: MISCELLANEOUS.

Responsive Images and Web Standards at the Turning Point
By Mat Marquis.
"...a few months ago, in response to an article here, a W3C Responsive
Images Community Group formed-and proposed a simple-to-understand HTML
picture element capable of serving responsive images. The group even
delivered picture functionality to older browsers via two polyfills:
namely, Scott Jehl's Picturefill and Abban Dunne's jQuery Picture. The
WHATWG has responded by ignoring the community's work on the picture
element, and proposing a more complicated img set element. Which
proposed standard is better, and for whom? Which will win? And what
can you do to help avert an 'us versus them' crisis that could hurt
end-users and turn developers off to the standards process? ALA's own
Mat Marquis explains the ins and outs of responsive images and web
standards at the turning point."
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/

Responsive Images - Leave HTML Alone
By Niels Matthijs.
"From what I've read about it (A List Apart), we're clearly heading in
the wrong direction..."
http://www.onderhond.com/blog/work/responsive-images-standard-chiming-in

Media Queries Can't Be Used for Resolution Negotiation
By Tab Atkins Jr.
"Or, why any Responsive Images solution based solely on MQs is doomed
to failure..."
http://www.xanthir.com/blog/b4Hv0

Some Early Thoughts on img at srcset in the Real World
By Scott Jehl.
"Many agree that the newly proposed srcset attribute is much less
syntactically intuitive than the widely appreciated picture element. I
hope that the WHATWG and W3C review all of the efforts that the web
dev community have put into the picture element proposal in their own
community group and go back on this recent addition..."
https://gist.github.com/2701939

Which Responsive Images Solution Should You Use?
By Chris Coyier.
"There are a bunch of techniques going around for dealing with
responsive images lately. That is, solutions to help us serve the
right image for the occasion (e.g. size of screen and bandwidth
available). They all do things a bit differently. To keep track,
Christopher Schmitt and I have created this spreadsheet of
techniques..."
http://css-tricks.com/which-responsive-images-solution-should-you-use/

An Alternative Proposition to Picture and Srcset, with Wider Scope
Matt Wilcox.
"Here is what I believe is the best proposition yet for managing our
responsive designs. This includes managing our CSS, JavaScript, and
inline <img>'s..."
http://www.w3.org/community/respimg/2012/05/13/an-alternative-proposition-to-and-srcset-with-wider-scope/

Use Your 'Head' For a Better Way to Serve Images
By Scott Gilbertson.
"...None of these proposals is anything more than an idea at this
stage - though there is already a JavaScript polyfill for the new head
tag idea - but if you'd like to keep up with what's happening, be sure
to keep an eye on the W3C's Responsive Images community group. It's
not going to happen overnight, but eventually standards bodies and
browser makers are going to start implementing solutions and the more
experimenting web developers have done, the better those solutions
will be. It's your web after all, so make it better."
http://www.webmonkey.com/2012/05/use-your-head-for-a-better-way-to-serve-images

Adaptive Images
By Mathew Marquis, WHATWG Wiki.
"A markup-based means of delivering alternate image sources based on
device capabilities to prevent wasted bandwidth and optimize display
for both screen and print. The idea is to use the video tag's markup
pattern as the inspiration, as it's specced to allow the use of media
queries within attributes on its source elements and reliably displays
the markup inside the tag in any browser that doesn't recognize it.
Through use of media attributes we would not only be able to reduce
wasteful image requests for the sake of users with smaller displays,
but we would be able tailor our images' resolutions for users with
high-res displays or for print..."
http://wiki.whatwg.org/wiki/Adaptive_images

Secret src
By Jeremy Keith.
"There's been quite a brouhaha over the past couple of days around the
subject of standardising responsive images. There are two different
matters here: the process and the technical details. I'd like to
address both of them..."
http://adactio.com/journal/5474/

HTML5 Adaptive Images - End of Round One
By Bruce Lawson.
"After The Great Vendor Prefix Hullaballoo of April 2012 comes The
Great Responsive Images Brouhaha of May 2012..."
html5doctor.com/html5-adaptive-images-end-of-round-one/

+08: NAVIGATION.

Bypass Blocks - Understanding SC 2.4.1
By WCAG.
"The intent of this Success Criterion is to allow people who navigate
sequentially through content more direct access to the primary content
of the Web page..."
http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html

Using Heading to Replace Skip Links
WCAG Interest Group Thread (long).
"I've been having some discussions with people as to whether using
Headings as per H69 can replace the use of skip links for Bypass
Blocks (SC 2.4.1.)..."
http://lists.w3.org/Archives/Public/w3c-wai-ig/2012AprJun/thread.html#msg43

+09: PHP.

WordPress is More Than a CMS, It Is a PHP Framework
By TCBarrett.
"...From this, I conclude that WordPress is a framework. It provides
us with a library of resources that allow us to extend and specialise
it into the site and CMS that we want."
http://www.tcbarrett.com/2012/05/wordpress-is-more-than-a-cms-it-is-a-php-framework/

+10: STANDARDS, GUIDELINES & PATTERNS.

What Do You need to Know About HTML5 Video
By Elena Vakhromova.
"HTML5 keeps on stunning the Internet community with revolutionary web
features. One of the key HTML5 enhancements is the advanced video
support. With a new HTML5 standard, users don't need any special
plugins to stream video in web browsers both on PC or any portable
device. Still in spite of the growing popularity of HTML5 standard,
most web developers and designers are reluctant to migrate to the new
markup language, maybe because of the absence of a complete HTML5
specification or lack of practical information on HTML5 coding. In
this post, I'd like to take a deeper look at HTML5 video element and
explain its main points in plain English."
http://www.sitepoint.com/what-do-you-need-to-know-about-html5-video/

Using HTML5 to Create Mobile Experiences
By Brandon Satrom.
Article is about responsive design.
http://msdn.microsoft.com/en-us/magazine/hh975346.aspx

The Top 8 Web Standards Myths Debunked
By Lea Verou.
"Lea Verou takes a look at some of the misconceptions of web
standards, what the W3C and its working groups actually do and how the
standardisation process works..."
http://www.netmagazine.com/features/top-8-web-standards-myths-debunked

The App is Dead (OK Not Really, But The Browser Is Back)
By Richard MacManus.
"Thanks to Apple's iOS and Google's open source Android OS, smartphone
and tablet apps have enjoyed a period of astounding success over the
past few years. Towards the end of 2010, Wired magazine even declared
that "the Web is dead." Who needs browsers when we have apps galore on
our smartphones and tablets? Well, fast forward 18 months and things
have changed. Browsers are starting to trend up again and some online
businesses are turning away from apps..."
http://www.readwriteweb.com/archives/the-app-is-dead-ok-not-really-but-the-browser-is-back.php

+11: TOOLS.

aViewer 2012 Alpha
By The Paciello Group
"Here at the paciello group we are very excited by the improvements
being made to our aViewer accessibility API information inspection
tool..."
http://www.paciellogroup.com/blog/2012/05/aviewer-2012-alpha/

+12: USABILITY.

Top 10 Content Strategy Mistakes to Avoid
By Melissa Rach.
"Melissa Rach, coauthor of Content Strategy for the Web, Second
Edition, sees far too many organizations making similar mistakes in
their outreach attempts. The "throw it together" approach that most
people employ tends to create havoc, rather than useful information
for potential customers and clients. She shares 10 of the most common
(and dangerous) pitfalls that everyone should learn to avoid."
http://www.peachpit.com/articles/article.aspx?p=1860940

Stop Redesigning And Start Tuning Your Site Instead
By Louis Rosenfeld.
"In my nearly two decades as an information architect, I've seen my
clients flush away millions upon millions of dollars on worthless,
pointless, 'fix it once and for all' website redesigns. All types of
organizations are guilty: large government agencies, Fortune 500s,
not-for-profits and (especially) institutions of higher education..."
http://uxdesign.smashingmagazine.com/2012/05/16/stop-redesigning-start-tuning-your-site/

+13: XML.

Has the Time Come for Web Designers to Embrace the SVG Image Format?
By Pingdom
"Display resolutions are increasing every year, something that's being
taken to its extreme with the recent 'retina display' trend that came
with the latest iPad. The jump in onscreen pixels is massive, and such
displays are soon bound to make their way into regular laptops and
desktop displays, perhaps as soon as this year. This development will
have a profound effect on the size of the graphics resources necessary
for websites, which ultimately will make websites bigger, more bloated
and slower to download. That is, if we don't change tactics..."
http://royal.pingdom.com/2012/05/15/web-designers-svg/

[Section one ends.]

++ SECTION TWO:

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