+++ 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@d.umn.edu 


[Issue ends.]