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


[Issue ends.]