[webdev] Web Design Update: August 25, 2011

Thu Aug 25 06:32:40 CDT 2011

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 09, August 25, 2011.

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

++ISSUE 09 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: NAVIGATION.
08: STANDARDS, GUIDELINES & PATTERNS.
09: TOOLS.
10: TYPOGRAPHY.
11: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Responsive Data Tables and Screen Reader Accessibility
By Jason Kiss.
"I wondered, assuming that the CSS-generated column headers were read
by screen readers, if the screen readers would repeat the header text
when navigating the table using their table navigation commands, once
for the actual column header in the HTML, and once for the
CSS-generated header text."
http://www.accessibleculture.org/blog/2011/08/responsive-data-tables-and-screen-reader-accessibility/

Keyboard Accessibility Quick Tip
By Emily Coward.
"A quick accessibility tip to help you make sure your web pages aren't
reliant on someone using just a mouse and can be operated by someone
using a keyboard instead..."
http://www.nomensa.com/blog/2011/keyboard-accessibility-quick-tip/

Create Dynamic Form Labels with ARIA
By Ted Drake.
"...This post, however, will show how ARIA can make a dynamic form
more responsive to a user. We have a contact input form for the user
to add an email address type and value. We're going to use ARIA and
JavaScript to give that text input a type-specific label by grabbing
the information from the option previously selected. It's actually
quite simple and ingenious..."
http://yaccessibilityblog.com/library/dynamic-form-labels-aria.html

Inline Styles and Why They are Considered Harmful for Accessibility
By Dan Stringer.
"...If styles are embedded directly into HTML elements using the style
attribute the HTML can become hard to read (and thus maintain) and can
present accessibility issues for some visitors to your website. The
following sections attempt to identify some of the issues associated
with inline styles..."
http://www.nomensa.com/blog/2011/inline-styles-and-why-they-are-considered-harmful-for-accessibility/

+02: CASCADING STYLE SHEETS.

Some Thoughts on Responsive Web-Design and Media Queries
By Jon Phillips.
"Like a lot of web-designers and developers, I'm quite excited about
responsive web-design. It seems to be the answer to a lot of the
problems we've been facing in terms of transforming our websites that
were built for the desktop to work and look great on mobile devices
and tablets. Say goodbye to fixed-width layouts..."
http://blog.jonphillips.ca/2011/08/18/thoughts-on-responsive-webdesign/

Improve Responsive Designs and Re-Use Images With CSS3's
Background-Size Property
By Neal Grosskopf.
"...I've been aware of the CSS3 property background-size for quite
awhile now but I could never think of a useful scenario to implement
it. I was working on a project at work that listed out social media
icons two times on the same page, but in different sizes. I thought to
myself "gez, it would be nice if I could just re-use the same CSS
sprite twice for the same set of icons?" With CSS this is possible..."
http://www.nealgrosskopf.com/tech/thread.php?pid=78

Line-height in Input Fields
By Roger Johansson.
"So the other day I was trying to get text input fields to have the
same height across browsers. I figured I could use the line-height
property for this, but no such luck. Well, it does work in WebKit
browsers, but not in Firefox..."
http://www.456bereastreet.com/archive/201108/line-height_in_input_fields/

Sizing with CSS3's vw and vh Units
By Jonathan Snook.
"...With vw/vh, we can size elements to be relative to the size of the
viewport. The vw/vh units are interesting in that 1 unit reflects
1/100th the width of the viewport. To make an element the full width
of the viewport, for example, you'd set it to width:100vw...."
http://snook.ca/archives/html_and_css/vm-vh-units

On Risk-Taking, Mirroring, Layouts, Resets, and Hacks
By Jens O. Meiert.
"A collection of CSS-related posts I published on Google+. I don't
exactly know how to deal with those yet."
http://meiert.com/en/blog/20110824/css-on-risk-taking-mirroring-layouts-resets-and-hacks/

CSS Selectors: Just the Tricky Bits
By Joshua Johnson.
"div > p + div[id*='header'] - If you saw this jumbled mess of
selectors in someone's CSS, could you decipher it? If not, then you'll
want to read this primer on funky CSS selectors that you should
know..."
http://designshack.co.uk/articles/css/css-selectors-just-the-tricky-bits/

Functional CSS Tabs Revisited
By Chris Coyier.
"The idea of "CSS Tabs" has been around for a long time. If you Google
it, a lot of what you get is styled CSS tabs, but less stuff on the
building of an actually functional tabbed area. At least, functional
in the sense as we think of tabbed areas today: click a tab, see a new
content area with no page refresh..."
http://css-tricks.com/13758-functional-css-tabs-revisited/

+03: EVALUATION & TESTING.

A Primer on A/B Testing
By Lara Swanson.
"Data is an invaluable tool for web designers who are making decisions
about the user experience. A/B tests, or split tests, are one of the
easiest ways to measure the effect of different design, content, or
functionality, helping you create high-performing user experience
elements that you can implement across your site. But it's important
to make sure you reach statistically significant results and avoid red
herrings. Lara Swanson shows us how to do that."
http://www.alistapart.com/articles/a-primer-on-a-b-testing/

+04: EVENTS.

Zend PHP Conference 2011 (ZendCon)
October 17-20, 2011.
Santa Clara, California, U.S.A.
http://zendcon.com/

+05: JAVASCRIPT.

Understanding Prototypes in JavaScript
By Yehuda Katz.
"For the purposes of this post, I will be talking about JavaScript
objects using syntax defined in ECMAScript 5.1. The basic semantics
existed in Edition 3, but they were not well exposed..."
http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

Fixing The JavaScript typeof Operator
By Angus Croll.
"n this article I'll give a brief overview of typeof before
introducing a tiny new function which is a fully-loaded, more reliable
alternative that works directly with the language internals..."
http://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/

+06: MISCELLANEOUS.

Web Accessibility with Dennis Lembree (podcast)
By Simon Pascal Klein.
"I catch up with Design Festival author Dennis Lembree this week to
chat about web accessibility, podcasting, and an accessible Twitter
front end he wrote called EasyChirp..."
http://designfestival.com/design-festival-podcast-15-web-accessibility-with-dennis-lembree/

The Web Comes of Age (Video)
By Jeffrey Zeldman.
Jeffrey Zeldman's "Design It  Build It" (DIBI) keynote address.
http://www.zeldman.com/2011/08/24/the-web-comes-of-age-dibi-keynote-address-by-jeffrey-zeldman/

Graceful Degradation And How It Tricks You
By Niels Matthijs.
"...The problem with graceful degradation is that currently everyone
is using the concept to their own advantage, so it lost much of its
initial value over the past few years...."
http://www.onderhond.com/blog/work/graceful-degradation-pitfalls

+07: NAVIGATION.

Categories, Facets-and Browsable Facets?
By Jaimie Sirovich.
"In my explorations of taxonomies-especially taxonomies for ecommerce
sites-the case I find the most frustrating is what I, for lack of a
better term, have christened the browsable facet."
http://www.uxmatters.com/mt/archives/2011/08/categories-facetsand-browsable-facets.php

Links and Classes to Wrap or Not to Wrap
By Niels Matthijs.
"Sometimes it's the little things that keep me up at night. Silly
structural or semantical tidbits that don't really seem all that
important, but return to haunt me time and time again. Never taking
the proper time to figure them out can lead to years of doubt and
uneasiness, until it finally grows into this "thing" that just needs
resolving. So if the following article seems a little ... obsessive,
you know where it's coming from. Just bear with me..."
http://www.onderhond.com/blog/work/links-and-classes-div-wrapping

+08: STANDARDS, GUIDELINES & PATTERNS.

HTML5 Accessibility Chops - The figure and figcaption Elements
By Steve Faulkner.
"The figure and figcaption elements are 2 of the new elements in
HTML5. Together they provide the promise of being able to mark-up,
with meaning, the structure and relationship between a piece of
content and associated content that acts as a descriptive label.
Currently as implemented in browsers the semantics of figure and
figcaption are practically non existent..."
http://www.paciellogroup.com/blog/2011/08/html5-accessibility-chops-the-figure-and-figcaption-elements/

The State of HTML Validation
By Tristan Louis.
"There's been a lot of talk about HTML5 recently and, in some geek
circles, there have been snickers when companies have done a poor job
of implementing it. But what is the true state of html5. To find out,
I decided to check whether the top sites on the internet had
implemented it and how successful they were in doing so."
http://www.tnl.net/blog/2011/08/21/the-state-of-html-validation/

Who's Validating the Validators? Reassessing HTML 'Compliance'
By Scott M. Fulton, III.
"Yesterday, Tristan Louis, my friend and colleague (and I reserve that
phrase specifically for friends and colleagues, that's not a
euphemism) published on his TNL.net blog the results of his own
study..."
http://www.readwriteweb.com/hack/2011/08/whos-validating-the-validators.php

+09: TOOLS.

Responsive Design Testing in the Browser
By Matt Kersley.
http://mattkersley.com/responsive/

+10: TYPOGRAPHY.

Little-Known CSS3 Typographic Features
By Louis Lazaris.
"The CSS3 fonts module has a number of interesting CSS3 properties and
features. Browser support for many of these is pretty limited right
now, but I thought I'd summarize some of these features here..."
http://www.impressivewebs.com/little-known-css3-type/

+11: USABILITY.

Golden Grid System
By Joni Korpi.
A fluid-width grid system composed out of 18 even columns, two of
which are used as outer margins, leaving 16 columns for use in design,
which in turn can be combined into 8 columns or 4 columns.
http://goldengridsystem.com/

The Difference Between UI and UX
By Shawn Borsky.
"In today's creative and technical environment, the terms UI ('User
Interface') and UX ('User Experience') are being used more than ever.
Overall, these terms are referring to specialties and ideas that have
been around for years prior to the introduction of the abbreviated
terminology. But the problem with these new abbreviations is more than
just nomenclature. Unfortunately, the terms are quickly becoming
dangerous buzzwords: using these terms imprecisely and in often
completely inappropriate situations is a constant problem for a
growing number of professionals, including: designers, job seekers,
and product development specialists. Understanding the proper
separation, relationship and usage of the terms is essential to both
disciplines."
http://designshack.co.uk/articles/graphics/the-difference-between-ui-and-ux/

3 Ways to Make Checkboxes, Radio Buttons Easier to Click
By UX Movement.
"Checkboxes and radio buttons are an essential part of forms. But most
of the time, they're not easy to click. This is because their click
targets are small. The smaller a click target is, the more difficult
it is to click it."
http://uxmovement.com/forms/ways-to-make-checkboxes-radio-buttons-easier-to-click/

Why Rounded Corners are Easier on the Eyes
By UX Movement.
"Rounded corners are used so much today that they're more of an
industry standard than a design trend. They're not only found on
software user interfaces, but hardware product designs as well."
http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/

Add to Cart: 5 Ways to Improve Shopping on the Mobile Web
By Shanshan Ma.
There are many variables to consider when optimizing a shopping
experience for a mobile platform. Plus, with new technologies and
mobile devices such as the iPad coming to the market, consumers now
have more opportunities to shop on the go. For this reason, creating
intuitive mobile shopping experiences is becoming increasingly
important to driving an ecommerce store's revenue and improving its
bottom line.
http://www.uxmatters.com/mt/archives/2011/08/add-to-cart-5-ways-to-improve-shopping-on-the-mobile-web.php

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