[webdev] Web Design Update: November 6, 2010

[Laura Carlson]

+++ WEB DESIGN UPDATE.
- Volume 9, Issue 19, November 6, 2010.

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

++ISSUE 19 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: FLASH.
06: INFORMATION ARCHITECTURE.
07: JAVASCRIPT.
08: MISCELLANEOUS.
09: NAVIGATION.
10: PHP.
11: STANDARDS, GUIDELINES & PATTERNS.
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.

Accessible University 2.0
By Terrill Thompson.
"Accessible University (AU) is a fictional university home page
designed to demonstrate a variety of common web design problems that
result in visitors with disabilities being unable to access content or
features. AU was originally developed by AccessIT and is maintained by
AccessComputing, both projects based out of the University of
Washington. Use the AU site to 1. demonstrate common web accessibility
principles at trainings, presentations, and workshops on accessible
web design. 2. learn common web accessibility problems and solutions
in an easy-to-understand way..."
http://www.washington.edu/accesscomputing/AU/

Using VoiceOver to Evaluate Web Accessibility
By WebAIM.
"VoiceOver - external link is a screen reader program that comes on
new Mac computers, iPhones, iPads, and iPod touches. This article is
designed to help users who are new to VoiceOver learn the basic
controls for testing web content, and to serve as a reference for the
occasional VoiceOver user."
http://webaim.org/articles/voiceover/

Using the HTML title Attribute
By Steve Faulkner.
"The HTML title attribute is problematic. It is problematic because it
is not well supported in some crucial respects, even though it has
been with us for over 13 years. With the rise of touch screen
interfaces, the usefulness of this attribute has decreased. The
accessibility of the title attribute has fallen victim to a
unfortunate combination of  poor browser support, poor screen reader
support and poor authoring practices."
http://www.paciellogroup.com/blog/?p=718

Figures, Captions and alt Text
By Bruce Lawson.
"...Our question this week is about alternate text for images that are
captioned. I've gotten this wrong before (in print, embarrassingly),
as have two highly-clueful friends of mine. The man who set us right
will be your moderator and quizmaster this week, Steve Faulkner of The
Paciello Group, possibly the most respected accessibility agency out
there..."
http://html5doctor.com/html5-simplequiz-4-figures-captions-and-alt-text/

Accessibility Fundamentals: Vision Part 1
By Ryan Carson.
Video tutorial
http://thinkvitamin.com/user-science/accessibility-fundamentals-vision-part-1-video-tutorial/


+02: CASCADING STYLE SHEETS.

End Hover Abuse
By Cennydd Bowles.
"Hover states can provide subtle visual cues that help the user
understand how something works. A faint glow around a 'favourite'
star. An underline appearing underneath a link. But they should not be
used for anything else. Hovering does not demonstrate user intent..."
http://www.cennydd.co.uk/2010/end-hover-abuse-now

Things Worth Noting About CSS Attribute Selectors
By Louis Lazaris.
"..This article will go a little further and focus on some interesting
facts and bugs surrounding attribute selectors that you may not have
known..."
http://www.impressivewebs.com/attribute-selectors/

CSS Terms and Definitions
By Louis Lazaris.
"...here's a quick little list of common CSS terms, and what they
represent in CSS code."
http://www.impressivewebs.com/css-terms-definitions/

The 30 CSS Selectors you Must Memorize
Jeffrey Way.
"So you learned the base id, class, and descendant selectors - and
then called it a day? If so, you're missing out on an enormous level
of flexibility. While many of the selectors mentioned in this article
are part of the CSS3 spec, and are, consequently, only available in
modern browsers, you owe it to yourself to commit these to memory..."
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

The !important CSS Declaration: How and When to Use It
By Louis Lazaris.
"For the most part, the !important declaration has remained the same,
with only one change in CSS2.1 and nothing new added or altered in the
CSS3 spec in connection with this unique declaration..."
http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

How to Prevent a Float Drop in IE6
By Thierry Koblentz.
"Even though this behavior is often called a "float drop" or a 'drop
float', the column that drops does not have to be a float...it only
has to be wider than the space allocated for it. Note that this is by
spec and it's a common behavior across browsers; if a column is 'too
wide', then it will drop..."
http://www.yuiblog.com/blog/2010/10/28/css-quick-tip-how-to-prevent-a-float-drop-in-ie6/


+03: EVALUATION & TESTING.

Why Focus Groups Don't Work
By Gerry McGovern.
"The biggest problem in getting to know our customers is that they
don't know themselves."
http://www.gerrymcgovern.com/nt/2010/nt-2010-11-01-Focus-groups.htm

Making User Testing Happen
By Paul Boag.
"We all know we should be doing more usability testing than we are.
Fortunately there are some great tools available to make the job
easier..."
http://boagworld.com/usability/testing-tools


+04: EVENTS.

WebAIM Training
March 2-3, 2011.
Logan, Utah, U.S.A.
http://webaim.org/training/

UX London
April 13-15, 2011
London, United Kingdom.
http://2011.uxlondon.com/


+05: FLASH.

Meeting WCAG 2.0 with Flash
By Andrew Kirkpatrick.
"Today the W3C published an update to the Techniques for WCAG 2.0
document and the Understanding WCAG 2.0 document. The Techniques
document now includes techniques for Flash content and helps define a
way for authors to comply with WCAG 2.0."
http://blogs.adobe.com/accessibility/2010/10/meeting-wcag-2-0-with-flash.html

10 Flash Things You Can't Do With HTML5
By Travis King.
"...So with HTML5 adoption still a way off, what are some things that
Flash can do better than HTML5? Come along as we showcase 10 examples
from the ActiveDen marketplace demonstrating why Flash is not quite
dead..."
http://active.tutsplus.com/articles/roundups/10-flash-things-you-can%E2%80%99t-do-with-html5/


+06: INFORMATION ARCHITECTURE.

Wireframing: Tips, Tools, and Techniques Part 1
By Neal McGann.
"Wireframes are an indispensable part of the website creation process.
They provide a quick and easy means of communicating aspects of the
site, ranging from information architecture to page layout, and they
allow everyone involved to consider and, hopefully, agree upon all the
fundamental aspects of the design."
http://www.uxbooth.com/blog/wireframing-tips-tools-and-techniques/

UX Card Sort
By George Miles.
"If you are an Information Architect, User Experience Designer,
Interaction Designer or similar and your job is designing digital
interactive (web)sites, services or products then join in with the UX
Card Sort! This card sort is a way of creating insight into what UX
professionals have in common and what the differentiators are, based
on your daily professional activities instead of discussing what a
label such as IA/UXD/ID etc. should contain. The Card Sort does start
though with the request to enter your job title as that might already
identify existing clusters with a common label."
http://uxsurvey.wordpress.com/2010/11/02/ux-card-sort-now-online/


+07: JAVASCRIPT.

Javascript Accessibility Guidelines
By Hall of Bright Carvings.
"Purpose: The nature of the internet is that not everyone will receive
JavaScript in the way intended. Therefore JavaScript should be applied
in a way that enhances the page, rather than requiring it..."
http://www.hallofbrightcarvings.com/js-accessibility-guidelines/

How Many Users Support JavaScript?
By Adrian Roselli.
"...The takeaway from this entire back-and-forth is that there are
still users without JavaScript support, for a variety of reasons, and
they are a significant number of users. Neglecting them as you build
web sites and applications is short-sighted and just bad practice.
This has been true for over 15 years, so it's reasonable to expect it
will be true for years to come."
http://blog.adrianroselli.com/2010/11/how-many-users-support-javascript.html


+08: MISCELLANEOUS.

Design is Choice
By Dmitry Fadeyev.
"...It's impossible to create a simple product or a simple interface
if every need and feature request is met-doing that that leads to
clutter and bloat. Good design is about choice, and choice isn't just
about saying 'yes' to that one thing, it's about saying 'no' to
everything else, too."
http://www.usabilitypost.com/2010/10/31/design-is-choice/

Why "The Customer is Always Right" is Wrong
By Mark Hurst.
"...It's not that the customer is always right. Rather, we should try,
as best we understand it, to do right by the customer."
http://goodexperience.com/2010/11/why-the-customer-is-a.php

Art Direction and Design
By Dan Mall.
"Glorifying the supposed arrival of art direction on the web is one of
the latest trends in interactive design...Sadly, many designers don't
understand the difference between design and art direction; sadder
still, many art directors don't either: Art direction gives substance
to design. Art direction adds humanity to design."
http://www.alistapart.com/articles/art-direction-and-design/

Mobile Web Design Tips: Mobile Should Come First
By Luke Wroblewski.
"I'll just come out and say it: websites and web applications should
be designed for mobile first..."
http://www.techradar.com/news/internet/mobile-web-design-tips-mobile-should-come-first-719677


+09: NAVIGATION.

The 7 Sins of Inaccessible Blogs
By Glenda Watson Hyatt.
"...Write hypertext links that are informative when read out of
context. For example, instead of writing 'To download the ebook, click
here' where 'click here' is the hyperlink, consider writing 'Download
the ebook' where the three-worded phrase is the hyperlink..."
http://blogaccessibility.com/the-7-sins-of-inaccessible-blogs/

Sin #2 of Inaccessible Blogs: Using Consecutive One-Worded Links
By Glenda Watson Hyatt.
"...When providing several links in a row, consider the words you use
for the links, and how these links can be defined in a clearer way. Do
the links provide a clue as to where your readers, with or without
impairments, will end up if they click?..."
http://blogaccessibility.com/sin-2-of-inaccessible-blogs-using-consecutive-one-worded-links/

The Door to Accessibility: How Widely You Open It Is Your Choice
By Glenda Watson Hyatt.
"...By rewording your hyperlinks so they make sense out of context,
you are increasing your blog from a minimal level to an optimal level
of accessibility (in terms of links)..."
http://blogaccessibility.com/the-door-to-accessibility-how-widely-you-open-it-is-your-choice/

Breadcrumb Navigation with CSS Triangles
By Chris Coyier.
"Did you know you can make triangles with pure CSS? It's pretty easy.
You just make a block level element with zero width and height, a
colored border on one side, and transparent borders on the two
adjacent sides. They are fun for all kinds of things, like little
arrow sticking out from speech bubbles, navigation pointers, and more.
Often times these are just visual flourishes, undeserving of dedicated
markup. Fortunately, pseduo elements are often a perfect fit. That is,
using :before, :after, or both to create these block level elements
and place the triangle. One neat use that came to mind in this vein:
breadcrumb navigation..."
http://css-tricks.com/triangle-breadcrumbs/


+10: PHP.

Four Sane Solutions for PHP Debugging
By W. Jason Gilmore.
"...these four solutions are guaranteed to have an immediate impact on
your productivity..."
http://www.phpbuilder.com/columns/PHP-Debugging/Jason_Gilmore11042010.php3


+11: STANDARDS, GUIDELINES & PATTERNS.

HTML5 Syntax Guidelines
By Roger Johansson.
"...Use lowercase for all element and attribute names.  Explicitly
include all start and end tags, including the optional tags. Quote all
attribute values and use double-quoted syntax (name="value")..."
http://www.456bereastreet.com/archive/201011/html5_syntax_guidelines

HTML Working Group Update
By Janina Sajka, Maciej Stachowiak, Mike Smith, Paul Cotton, Philippe
Le Hegaret, Sam Ruby.
Presentation slides.
http://www.w3.org/2010/Talks/1102-html-plh/

Five Things Carrots Can do that HTML5 Can't
By Bruce Lawson.
"I saw the marvellous 10 Flash Things You Can't Do With HTML5 and it
made me realise that HTML5 is rubbish. In fact, it's not even as good
as a humble carrot. Here are five things carrots can do that HTML5
can't, presented by Dr Archimedes Einstein."
http://www.brucelawson.co.uk/2010/five-things-carrots-can-do-that-html5-cant/


+12: USABILITY.

Fashionable Web Forms - Traps and Tips
By Jessica Kerr.
"...If a certain form-design technique is well established, there's a
good chance it has been thoroughly tried and tested. For instance, we
usually place labels above or to the left of text boxes because that
placement facilitates the fastest, easiest interaction with a form for
users. And trust me, users much prefer to get form filling done
quickly and effortlessly rather than to have a painful experience
using a form that's pretty. Use this knowledge to your advantage. The
key to designing highly usable forms is to make sure whatever widgets
or methods we adopt, old or new, they are fit for their purpose. As
for any task, choosing the right tools for the job-in this case, form
filling-makes the job much easier..."
http://www.uxmatters.com/mt/archives/2010/11/fashionable-web-forms-traps-and-tips.php

Usability for Handheld Devices Versus Computers
By Shanshan Ma.
"Users confront very different usability challenges on handheld
devices from those they encounter when interacting with a Web site on
a computer. As usability professionals, we need to consider whether a
device is for one-hand or two-hand use. As we observe users
interacting with handheld devices, it is more beneficial to think
about a device's usability systematically instead of focusing on the
use of individual buttons.
http://www.uxmatters.com/mt/archives/2010/11/usability-for-handheld-devices-versus-computers.php

10 Usability Crimes You Really Shouldn't Commit
By Line25.
"Over time certain conventions and best practices have been developed
to help improve the general usability of websites during their design
and build. This roundup of ten usability crimes highlights some of the
most common mistakes or overlooked areas in web design and provides an
alternative solution to help enhance the usability of your website..."
http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit

Photos as Web Content
By Jakob Nielsen.
"...Users pay attention to information-carrying images that show
content that's relevant to the task at hand. And users ignore purely
decorative images that don't add real content to the page. So much
fluff - of which there's too much already on the Web..."
http://www.useit.com/alertbox/photo-content.html

Why Jakob Nielsen Got it (Mostly) Wrong
By W Craig Tomlin.
"...Alphabetical listings, aka A-Z listings, are incredibly powerful
and useful sorting systems and can be an information architect's best
friend. On a side note, the actual term to use when defining ordered
listings of items (such as in A-Z listings) is 'collation,' as defined
by WikiPedia. What is missing in my opinion from Nielsen's article is
identification of the parameters that should be evaluated prior to
making the decision about what type of listing (A-Z or otherwise) to
use."
http://www.usefulusability.com/jakob-nielsen-got-it-mostly-wrong/

Text Matters
By Tom Johnson.
"I've noticed something lately. If you redesign your website, almost
no one comments. If you make a cool graphic, almost no one comments.
If you make a screencast or video, almost no one comments. But if you
write a good post (which is 95% text), you get a ton of comments. I've
seen this happen over and over. Why is that?..."
http://idratherbewriting.com/2010/11/05/text-matters/


+13: XML.

XHTML in IE9
By Tony Ross.
"IE9 is the first version of Internet Explorer to natively support
XHTML. For those not familiar, XHTML is the XML serialization of HTML.
Among other benefits, XHTML can help maintain cleaner markup due to
its fail-fast nature in the face of parsing errors..."
http://blogs.msdn.com/b/ie/archive/2010/11/01/xhtml-in-ie9.aspx

XHTML Is Dead, Long Live XML-Valid HTML5
By Tantek Celik.
"...Getting back to Tim's points, I have no problem with "including
quotes around attribute values and slashes in empty tags" and in fact
have found that doing so, and validating as such, catches more errors
sooner for me and thus I (as many web developers do) find it
beneficial to code with such XML strictness. In general the practice
of coding "compatible XHTML", based on the informative Appendix C. of
the XHTML 1.0 spec, has been fairly well accepted by modern web
developers as a best practice. But there are other aspects of XHTML
that have no discernible benefit, for example..."
http://tantek.com/2010/302/b1/xhtml-dead-long-live-xml-valid-html5


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