[webdev] Web Design Update: January 15, 2011

Sat Jan 15 05:19:15 CST 2011

+++ WEB DESIGN UPDATE.
- Volume 9, Issue 29, January 15, 2011.

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

++ISSUE 29 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: COLOR.
04: EVALUATION & TESTING.
05: EVENTS.
06: MISCELLANEOUS.
07: NAVIGATION.
08: STANDARDS, GUIDELINES & PATTERNS.
09: USABILITY.

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

[Contents ends.]

++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Death to Captchas
By Tim Kadlec.
"...In conclusion, captchas are inaccessible, inconsiderate and
frustrating. In addition, most captchas are not as secure as you would
like to believe. A far more elegant solution is to use some sort of
filtering system (like Akismet). Such a system can run behind the
scenes and work without complicating the user experience. It's time to
kill off captchas and stop punishing users for trying to interact with
our sites."
http://timkadlec.com/2011/01/death-to-captchas/

Alternatives to Captcha
By Tim Kadlec.
"...Just a warning ahead of time because I know people are going to
mention it-none of these solutions are 100% foolproof, just as
captchas are not 100% foolproof. I acknowledge that, but that's beside
the point. While it would be nice to use a system that detects and
eliminates 100% of the spam without any false positives, I don't think
that's a realistic expectation at this point in time. My goal is to
eliminate as much as spam as possible without negatively affecting the
experience of my users. So let's get started shall we?..."
http://timkadlec.com/2011/01/alternatives-to-captcha/

Distance Education Access Guidelines
By California Community College System.
"The California Community College System is committed to providing
equal access to education for students with disabilities. The
following guidelines represent the latest opinions and advice for
delivering accessible distance educational services."
http://www.htctu.net/dlguidelines/dlg_index.html

After Chronicle Story, a Tech Company Improves Accessibility for Blind Users
By Marc Parry.
"A company that sells a social-networking application to colleges is
improving the accessibility of its product after problems with the
software were spotlighted in a Chronicle report on flawed technology
that locks out blind users..."
http://chronicle.com/blogs/wiredcampus/after-chronicle-story-a-tech-company-improves-accessibility-for-blind-users/28891

Making a Difference by Thrusting Accessibility into the Public Sphere
By Blind Access Journal.
"After briefly reviewing the ASU on Facebook app as of Friday, Jan. 7,
I can report that significant improvements have already been achieved.
The 'Go to App' link can now be followed using keyboard navigation,
the website is more usable and I notice fewer images lacking
descriptions...The important point I hope readers will take away is
that advocating for accessibility does make a difference. One more
web-based application is now going to be accessible because a blind
person agreed to be part of an article published in a widely-reade
higher-education publication..."
http://blindaccessjournal.com/2011/01/making-a-difference-by-thrusting-accessibility-into-the-public-sphere/

Good Document Design is the Key to Accessibility
By John Sheridan.
"...The Portable Document Format (PDF), first created by Adobe Systems
in 1993, now in its ninth version, is very widely used for online
documents. While it has wide utility, its suitability for
accessibility purposes has been criticised. In 2010, AGIMO, working
with Vision Australia, and with the cooperation of Adobe, undertook a
study of the PDF format's accessibility capabilities. The study's
scope was focussed on the PDF format and was designed to increase
understanding of its strengths and weaknesses. The main points of the
Study are..."
http://agimo.govspace.gov.au/2010/11/30/good-document-design-is-the-key-to-accessibility/

Why do Drive-Through ATMs have Braille Keypads?
By Roger Johansson.
"...The same reasoning can be used to (try to) explain to people who
think of the Web as a purely visual medium why we as designers and
developers should do our best to make sure the sites and applications
we build can be used by people who for instance cannot see or cannot
use a mouse. Just as for people who do not have a disability, being
able to find information and use applications on the Web is - most of
the time - quick, easy, and time-saving compared to physically
visiting a bank office for a simple transaction, having someone read
today's newspaper for you, or placing a phone call (and waiting for
someone to answer) to find out when the next train leaves."
http://www.456bereastreet.com/archive/201101/why_do_drive-through_atms_have_braille_keypads/

+02: CASCADING STYLE SHEETS.

Only Use ems for the Total Width of Em-Based Layouts
By Roger Johansson.
"Using the em unit to specify the width of a website layout is one of
several ways of adding a bit of flexibility to your design. If you're
not familiar with em-based - or elastic - layouts, I wrote a bit more
about how they work a few years ago in Fixed or fluid width?
Elastic!..."
http://www.456bereastreet.com/archive/201101/only_use_ems_for_the_total_width_of_em-based_layouts/

CSS3 Transforms: Rotate, Skew, Scale & Translate
By Estelle Weyl.
Supported in Firefox 3.5+. Opera 10.5 and Webkit since 3.1, the
transform CSS property lets you modify the coordinate space of the CSS
visual formatting model. Using it, elements can be translated,
rotated, scaled, and skewed. In this tutorial, you'll learn to
manipulate an element's appearance using transform functions.
http://www.communitymx.com/content/article.cfm?cid=A9F61

Reset 2.0b2: Paring Down
By Eric A. Meyer.
"A few changes for beta 2 of the updated reset, presented here..."
http://meyerweb.com/eric/thoughts/2011/01/10/reset-2-0b2-paring-down/

What's the Difference?
By Chris Coyier.
"What's the difference between .container div { } and div.container { }?"
http://css-tricks.com/whats-the-difference/

The CSS Corner: CSS3 Media Queries
By Sharon Newman.
"As we announced with our second Platform Preview last year, IE9
supports CSS3 Media Queries. CSS3 Media Queries enable you to style
pages based on different display surface factors such as width,
height, orientation, resolution, etc. Developers can use these factors
to customize their sites for viewing on different devices such as a
small-screen netbook or a widescreen monitor. In this post, I talk
more about CSS3 Media Queries and the various scenarios they enable."
http://blogs.msdn.com/b/ie/archive/2011/01/12/the-css-corner-css3-media-queries.aspx

+03: COLOR.

9 Percent Of Men And .5% Of Women Are Colorblind
By Susan Weinschenk.
"...What colors you use in your photos, illustrations, maps, etc, can
become problematic if you are trying to communicate information via
the colors...If you are going to use color as a way to communicate -
then you need to have a redundant coding scheme, for example color AND
line thickness so that people who are color blind will be able to
decipher the coding without needing to see specific colors..."
http://www.whatmakesthemclick.net/2011/01/09/100-things-you-should-know-about-people-50-9-percent-of-men-and-5-of-women-are-colorblind/

You React To Colors Based On Your Culture
By Susan Weinschenk.
"...Some colors have similar meanings everywhere, for example, gold
stands for success and high quality in most cultures, but most colors
have different meanings in different cultures. For example, in the US,
white stands for purity and is used at weddings, but in other cultures
white is the color used for death and funerals..."
http://www.whatmakesthemclick.net/2011/01/12/100-things-you-should-know-about-people-51-you-react-to-colors-based-on-your-culture/

Web Safe Color Palette - Is It Still Relevant?
By Jennifer Farley.
"...These days, modern computers generally have at least 16-bit color
and often 24-bit color which allows millions of colors to be
displayed. Even modern phones, iPods and tablets can display more
colors than the monitors of the early 90s, so there really is no need
to stick with the web safe palette anymore (unless you're working for
a client with a REALLY old computer who insists everything looks good
on it). Today it's more important to look at the contrast in your
images rather than how many colors are used."
http://blogs.sitepoint.com/2011/01/12/web-safe-color-palette-is-it-still-relevant/

+04: EVALUATION & TESTING.

Protect Usability Tests from Yourself
By Emily Smith.
Whether you're testing an existing product, involved in a site
redesign, or working on a completely new site, your biggest challenge
is often yourself. Here are a few ways you might unintentionally cause
problems..."
http://blogs.sitepoint.com/2011/01/13/protect-usability-tests-from-yourself/

User Testing with Kids: Lessons from the Field
By Gabriel Adauto and Jacob Klein.
"Successful user testing requires a delicate balance of focus and
openness - that was one of our greatest takeaways from the classes we
took last year at the d.School..."
http://dschool.typepad.com/news/2010/10/user-testing-with-kids-lessons-from-the-field.html

+05: EVENTS.

Retreats 4 Geeks: HTML5 & CSS3
April 8-10, 2011.
Gatlinburg, Tennessee, U.S.A.
http://retreats4geeks.com/events/2011/html5-css3/

OSCON 2011
July 25-29, 2011.
Portland, Oregon, U.S.A.
http://www.oscon.com/oscon2011/

+06: MISCELLANEOUS.

Design Criticism and the Creative Process
By Cassie McDaniel.
"In every design project, at some point we quit what we're doing and
share our unfinished work with colleagues or clients. This begs the
question: Just what does the critique do for the design and the rest
of the project? Do critiques really help and are they necessary? If
so, how do we use their inconsistencies to improve our creative
output? Cassie McDaniel explores how critiques can help us navigate
complex processes and projects and collaborate effectively to create
original and engaging work."
http://www.alistapart.com/articles/design-criticism-creative-process/

How to Maintain a Website
By S.R. Emerson.
"Owning a website or blog has it's responsibilities. You can't just
upload it and forget it. Regular website maintenance is a must if you
want your site to be successful..."
http://www.webpagemistakes.ca/maintain-website/

+07: NAVIGATION.

Landmark Roles
By Jeremy Keith.
"...In HTML5 you can, for the first time, use ARIA roles and still
have a valid document. ARIA landmark roles add an extra layer of
semantics onto your document, distinguishing them as navigational
landmarks for assistive technology..."
http://adactio.com/journal/4267/

Search Engine Optimization (SEO) Pitfalls
By Gerry McGovern.
"Bringing someone to your website is just the first step. Unless they
complete a task you have wasted time and money...Always optimize for
the searcher (the customer), not the search engine."
http://www.gerrymcgovern.com/nt/2011/nt-2011-01-10-Search-marketing.htm

HTML5 and Search Engine Optimisation
by Bruce Lawson.
"Through our handy Ask The Doctor service, we get a lot of e-mails
asking us about HTML5's effect on Search Engine Optimisation (SEO).
While we can't answer in great detail (Messrs Google, Yahoo, Bing, and
their friends haven't sent us in-depth details of their algorithms),
we've rounded up some useful facts from Google, the world's most
dominant search engine."
http://html5doctor.com/html5-seo-search-engine-optimisation/

Findability and The Information Paradox
By Tom Johnson.
"Last year I started a series on organizing content that spanned
nearly 30 posts. I want to return to this thread with a summary of why
findability becomes an issue for technical writers, and what the
information paradox is that we encounter. Then, in an usual ethical
twist, I'll explain why findability might not actually be an issue..."
http://idratherbewriting.com/2011/01/12/findability-and-the-information-paradox/

+08: STANDARDS, GUIDELINES & PATTERNS.

The Design of Datalist
By Jeremy Keith.
"One of the many form enhancements provided by HTML5 is the datalist
element. It allows you to turn a regular input field into a
combo-box..."
http://adactio.com/journal/4272/

Why the Web Needs WebM
By Anne van Kesteren.
"The other day Google announced it will remove H.264 codec support
from Chrome. I think this is great news. Like Mozilla removing support
for the spacer element, but much bigger..."
http://annevankesteren.nl/2011/01/why-webm

Get Familiar With HTML5!
By Chris Mills.
"This article gives you an overarching introduction to HTML5,
explaining how it came about, why it is good for the Web, and what
features it has."
http://dev.opera.com/articles/view/get-familiar-with-html5/

Your HTML5 Questions #15
By Richard Clark.
"The clinic is busy as ever with more HTML5 ills. This week, we'll
cover marking up Wikipedia infoboxes, anchors in <hgroup>, <figure>
for avatars, header(s), and how to use <code> and <pre>..."
http://html5doctor.com/your-questions-15/

+09: USABILITY.

Well-Designed Error Messages
By Jessica Enders.
"After summarising the principles of well-designed error messages, we
walk through a positive example from a live website."
http://formulate.com.au/articles/well-designed-error-messages/

The Dark Side of Usability
By Dmitry Fadeyev.
"By crafting simple and user-friendly interfaces we relieve our users
of the need to think - or more accurately, to think about the more
trivial and mechanical parts of the task, things which can be
outsourced to the machine. But by doing so we are at risk of
indadvertedly surrendering more than we planned for, as we are lured
into thinking that interface will do our work for us-and so we spend
less time thinking about the problem, less time planning."
http://www.usabilitypost.com/2011/01/10/dark-side-of-usability/

Is the Button Dead? The Rise of the Gesture
By Suzanne Ginsburg.
"Not long ago, I followed a thread on Twitter that started with the
statement, 'On a touch screen, buttons are a hack.'  It was followed
by a few heated responses such as my favorite, 'You'll pry my buttons
out of my cold, dead hands.'  I leaned back in my chair, rested my
hands on my keyboard, and pondered my 140 character reply. 'Buttons
are sometimes a lazy touch designer's easy way out,' I thought, 'but
sometimes they're a necessity.'  Not having a pithy answer, I scrolled
past the slew of posts and carried on with my day.  Weeks later, with
the thread still lingering in the back of my mind, I decided to
explore the topic in greater depth.  In this post, I try to explain
when gestures are more appropriate than buttons or other GUI
(graphical user interface) elements. Although the recommendations can
be applied to a variety of touch screens-kiosks, tables, walls-for the
sake of brevity, the examples will focus on applications for
multi-touch mobile devices and tablets..."
http://www.touchytalk.com/?p=76

Why Your Form Buttons Should Never Say Submit
By Anthony.
"When you see a Submit button on a form, what comes to your mind? One
could easily reason that clicking the button submits the userís
information into the system for processing. A Submit button describes
what the system does well, but it doesnít describe what the user does
at all..."
http://uxmovement.com/forms/why-your-form-buttons-should-never-say-submit

Is Web Copy Ruining Your Design?
By Rick Sloboda.
To attain an effective website, design and copy need to reinforce each
other. The web designer and web copywriter must support the same
objectives, address the same audience, and project the same brand
characteristics. When in tune with each other, designers and
copywriters can create more robust websites that gain credibility and
trust, and achieve desired objectives, goals and conversion rates."
http://sixrevisions.com/content-strategy/is-web-copy-ruining-your-design/

A Simpler Page
by Craig Mod.
"Want to design a book? There are mountains of beautifully designed
examples to inspire you. But what about digital books? How do you
create elegantly typeset, gloriously balanced reading experiences when
tablets render type differently and support different fonts, text can
extend in every direction, and type can change size? Craig Mod
(Flipboard, Art Space Tokyo) addresses these questions and presents
the initial release of Bibliotype, an HTML baseline typography library
for tablet reading."
http://www.alistapart.com/articles/a-simpler-page/

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