+++ WEB DESIGN UPDATE.
- Volume 6, Issue 51, June 13, 2008.

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

++ISSUE 51 CONTENTS.

SECTION ONE: New references.
What's new at the Web Design Reference site?
http://www.d.umn.edu/goto/webdesign/
New links in these categories:

01: ACCESSIBILITY.
02: CASCADING STYLE SHEETS.
03: EVALUATION & TESTING.
04: EVENTS.
05: INFORMATION ARCHITECTURE.
06: JAVASCRIPT.
07: MISCELLANEOUS.
08: PHP.
09: STANDARDS, GUIDELINES & PATTERNS.
10: TYPOGRAPHY.
11: USABILITY.
12: XML.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

"About WCAG 2.0" Presentation
By Web Accessibly Initiative.
"Covers the benefits of WCAG 2.0, shortcuts for using WCAG 2.0, how it differs from WCAG 1.0, and other topics. Includes detailed speakers notes (pretty much a script) and presentation 'slides', in presentations format (ppt) and HTML."
http://www.w3.org/WAI/presentations/WCAG20_about/

Sucking on WCAG 2.0
By Steve Faulkner.
"While at @media I had the opportunity to meet up with Lachlan Hunt, who works at Opera and is a fellow W3C HTML5 working group member. He did a short interview with me for standardssuck.org, asking some questions about WCAG 2.0, the almost minted W3C specification, designed to provide guidance on how to build web sites and web applications that are accessible and usable by people with disabilities..."
http://www.paciellogroup.com/blog/?p=73

The Accessibility Checklist I Vowed I'd Never Write
By Aaron Cannon.
"...When I wrote the below checklist, I attempted to answer the question, "What concise pieces of advice can I give to designers that will have the greatest impact on accessibility in the majority of cases?'..."
http://northtemple.com/1608

Delivering Inclusive Websites: Part 1 of 3
By Jack Pickard. 
"This first part covers the intro, the guidelines and the minimum accessibility standard."
http://tinyurl.com/3euveo

Delivering Inclusive Websites: Part 2 of 3
By Jack Pickard. 
"This section will look at planning, procurement and testing accessibility."
http://tinyurl.com/4oz33x

Delivering Inclusive Websites: Part 3 of 3
By Jack Pickard. 
"This section will look at design, my conclusions, and the issue of enforcement."
http://tinyurl.com/44lj9r


+02: CASCADING STYLE SHEETS.

CSS Tabs - CSS Only 'DOM TABS'
By Ross Johnson.
"...There are several variations of 'dom tabs' out there, and lets be honest they work pretty well. If a user has javascript everything works as planned, and if not you can read all of the content as all laid out vertically. However you can accomplish the same effect using just CSS, saving you the javascript download and dependency..."
http://www.3point7designs.com/blog/2007/09/12/css-tabs-css-only-dom-tabs/

Clean and Pure CSS FORM Design
By Antonio Lupetti.
"...for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables..."
http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

Progressive Enhancement of Links using the CSS Attribute Selector
By Ted Drake.
"...CSS attribute selectors are the golden ring on the web development merry-go-round. They can be daunting to learn, addictive to use, but then disappointing when you realize they are out of your grasp when you test in Internet Explorer. We can, however, begin using them to add additional functionality based on your pre-existing, semantic code..."
http://www.last-child.com/css-attribute-selector/

Why CSS
By Elliotte Rusty Harold.
"The separation of presentation from content is one of the fundamental design principles of HTML. Separating presentation from content allows you to serve the same text to different clients and let them decide how to format it in the way that best suits their needs. A cell phone browser doesn't have the same capabilities as a desktop browser such as Firefox. Indeed, a browser may not display content visually at all. For instance, it may read the document to the user..."
http://cafe.elharo.com/web/refactoring-html/why-css/

CSS File Structuring/Keeping It Together
By Niels Matthijs.
"There are countless ways to structure your css file, and there is not one that's completely satisfactory. I promise to write some more in-depth articles about the issues of ordering your css, today I'll just be focusing on a very specific issue that ties in with my css profile styling management quest..."
http://www.onderhond.com/blog/work/css-file-structuring

Ten Years of CSS Pantheon
By Molly E. Holzschlag.
"It started as a bit of conversation and sparring between Daniel Glazman and I on Twitter. Then Daniel posted this list, which is just exceptional. I'm reposting here. Can anyone help with links and any missing persons? This is an awesome list and I'd like to fully expand it with links, etc..."
http://www.molly.com/2008/06/09/ten-years-of-css-pantheon/


+03: EVALUATION & TESTING.

Task Times in Formative Usability Tests
By Jeff Sauro.
"In this article I show that time-on-task can be used as a valuable diagnosis and comparative tool during formative evaluations."
http://www.measuringusability.com/formative-time.php

Eye Movement Patterns on Single and Dual-Column Web Pages
By S. Shrestha and J. Owens.
"This study examines eye movement patterns of users browsing or searching a 1-column and 2-column news article on a web page. The results show a higher number of fixations for information in the second column of an article than for the same information in the lower portion of a single column. In addition, the typical "F" pattern appeared in the left column of the 2-column layout, but not in the right column. Users also fixated more on other page elements, such as ads, when they were browsing than when they were searching."
http://www.surl.org/usabilitynews/101/column.asp


+04: EVENTS.

2008.dconstruct.org
September 5. 2008.
Brighton, United Kingdom.
http://2008.dconstruct.org/


+05: INFORMATION ARCHITECTURE.

Wireframes
By Chris Baker.
A wireframe is a simple visual model of a website (or CD-ROM if you want!), It is produced by a very quick and cheap method so that it can be used early in a project, for example during requirements analysis It might be made using PowerPoint, Visio, or hand-drawn pages, or in HTML, Flash or a specialized wireframe software. Wireframes are excellent for discussions within the project team, and can also be used for paper prototyping and simple usability tests. They provide a model of the website that is easier to understand than, say, a flowchart or long descriptive document. Long Documents Send People To Sleep, but even a primitive model of the website can be excellent in flushing out misunderstandings and 'unknown unknowns'." 
http://tinyurl.com/4w2zza


+06: JAVASCRIPT.

Same DOM Errors, Different Browser Interpretations
By Hallvord R. M. Steen.
"In this article I will explore the DOM, look at some common kinds of errors that are found in the DOM and how different debugging tools can be used to find such DOM errors and make sure that the DOM is interpreted consistently across browsers. Along the way, I'll introduce Opera Dragonfly, the new kid on the web development debugging block, and show how it performs..."
http://tinyurl.com/3n54wh

Trivial JavaScript
By John Resig.
"I've been chatting with the Free Software Foundation and they've posed a tricky question: What is trivial JavaScript? - or - What is not trivial JavaScript?..."
http://ejohn.org/blog/trivial-javascript/


+07: MISCELLANEOUS.

An Industry Defined by Accountability and Technology Will Suffocate Without Idiosyncrasy
By Richard Rutter.
"...If you are in any way interested in web design process, standards, guidelines, the 'right' tools for the job, and the role the tone of our writing plays in shaping the direction of what we do, then please read on. Whatever your view, this is a debate I'm happy to have..."
http://tinyurl.com/3pvdgc

Graphics Editor or Text Editor?
By Jon Hicks.
"Over on 37 Signals, there's an interesting post about why they don't use Photoshop, and prefer to go straight to HTML and CSS to create a UI. I agree with a lot of what Jason says here, especially point number 3 - you can never get text in a static comp to look the way it does on the web. (This is unless your name is Malarkey and you create your comp text by screenshotting text from the browser!) I would also add a couple more points in favor of going straight to HTML/CSS..."
http://www.hicksdesign.co.uk/journal/graphics-editor-or-text-editor

Web Designers Should Do Their Own HTML/CSS
By David Heinemeier.
The web is a world of constraints, the materials of HTML and CSS flex and give in ways that encourage particular styles. And being able to understand and bend within that scope is what makes a design feel native. Designers who work directly with the materials rather than through simulated environments like Photoshop are at a distinct advantage for making that happen.
http://tinyurl.com/6k635s

Design Isn't About Tools
By Mark Boulton.
"The other day, 37Signals wrote about Why they skip Photoshop. Fine. I think that suits them and their workflow, considering they don't do client work and have an established UI style on which to draw. Jeff does a much better job of summarizing my thoughts on the subject that I could. As does Jon So, yesterday, we see this post on SVN, presumably as a follow up. Is it an inflammatory post? Or, do they have a point?..."
http://www.markboulton.co.uk/journal/comments/design_isnt_about_tools/

Web Accessibility Interview with Shawn Henry (podcast)
By Bill Cullifer.
"In this seven minute audio and flash delivered podcast, I've asked Shawn to summarize her e-mail and to provide us with the links to resources that will assist us in better understanding the topic from an international point of view."
http://tinyurl.com/3snt3u

Video: Live at An Event Apart New Orleans, Eric Meyer on Generated Content
"Onstage at An Event Apart New Orleans, 2008, event co-founder and CSS expert Eric Meyer explains why the W3C's recommendation to allow browsers to insert quotation marks doesn't actually make a whole lot of sense."
http://tinyurl.com/3ec3z2


+08: PHP.

Debugging: A Beginner's Guide
By Ben Smithers.
"Everyday the forums see probably hundreds of topics posted where the problem is a fairly simple error. These generally fall in 4 categories..."
http://www.phpfreaks.com/tutorial/debugging-a-beginners-guide

Better Array Syntax for PHP: Here's Your Chance to Weigh In
By Nate Abele.
"Nate Abele has posted a request for opinions on a topic that's been lighting up the PHP mailing lists (and other social media) lately - the alternative array syntax for PHP..."
http://tinyurl.com/6c542n


+09: STANDARDS, GUIDELINES & PATTERNS.

HTML 5, W3C Working Draft 10 June 2008 
By Ian Hickson and David Hyatt.
"This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability."
http://www.w3.org/TR/2008/WD-html5-20080610/
Comment at:
mailto:public-html-comments@w3.org

HTML 5 Differences from HTML 4 
By Anne van Kesteren.
"HTML 5 defines the fifth major revision of the core language of the World Wide Web, HTML. "HTML 5 differences from HTML 4" describes the differences between HTML 4 and HTML 5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML 5 specification is still actively in development. When in doubt, always check the HTML 5 specification itself."
http://www.w3.org/TR/2008/WD-html5-diff-20080610/

HTML 5 Publication Notes
W3C Working Group Note 10 June 2008
By Michael(tm) Smith.
"This document provides supplemental information on the 10 June 2008 working draft of the HTML 5 specification [HTML5]. It primarily documents changes that have been made to the HTML 5 draft specification since the time of its 22 January 2008 publication as a First Public Working Draft..."
http://www.w3.org/TR/2008/NOTE-html5-pubnotes-20080610/

The Next-Gen Web: HTML5 - Will We Ever See A Real Standard?
By Nik Cubrilovic.
"Last week we looked at how some browsers and plug-ins were adopting storage-related API's that are a part of the new HTML5 draft specification. While Gears, Opera and Webkit have implemented structured storage API's, the remainder of the HTML5 spec currently remains mostly unimplemented and also in a state of flux. HTML5 is a super-sized effort to bring all the browsers under a single, standard markup language and set of API's - but with Microsoft, Adobe and others racing ahead with their own next-gen web technologies, will we ever see a real HTML5 standard?..."
http://tinyurl.com/5fqg7v

W3C TAG Settles on ARIA Syntax for HTML 5
By Shawn Medero.
"W3C Technical Architecture Group (TAG) passed down their recommendation and ended up supporting the original aria- solution present in HTML 5 and already implemented in several user-agents and JavaScript toolkits..."
http://db79.com/2008/w3c-tag-aria-html-5


+10: TYPOGRAPHY.

Moving CSS Typography Forward
By Richard Rutter.
"A few weeks ago, Jason Teague announced that he is resuscitating the CSS 3 Fonts and Web Fonts modules. This is great news as the Fonts module has laid dormant for an unbelievable four years. Jason wrote that he had 'decided to take on the four issues which were going seemingly unnoticed by the rest of the group, but I believe will have a profound impact on the work we do as Web designers'. And in doing so, Jason has asked for input from web designers as to what features should appear in the Fonts module. (I'm not going address features which should appear in the CSS 3 Text module)..."
http://www.clagnut.com/blog/2145/

10 Examples of Beautiful CSS Typography and How They Did It
By Ross Johnson.
"Lately I have been very interested in how far we can take Typography only using CSS. Sure you can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites - especially ones driven by a CMS..."
http://tinyurl.com/3fdq65

Examining the Legibility of the Number One and the Division Symbol
By D. Fox, B. Chaparro, and E. Merkle.
"This article continues the investigation of the legibility of onscreen typefaces and the influence of individual character features on correct identification. Specific attributes of alphanumeric characters and symbols shown to be the least legible were measured and analyzed using a statistical method called classification tree analysis. Results from this analysis for the number one and the division symbol are discussed."
http://www.surl.org/usabilitynews/101/legibility.asp


+11: USABILITY.

Writing Style for Print vs. Web
By Jakob Nielsen.
"Linear vs. non-linear. Author-driven vs. reader-driven. Storytelling vs. ruthless pursuit of actionable content. Anecdotal examples vs. comprehensive data. Sentences vs. fragments."
http://www.useit.com/alertbox/print-vs-online-content.html

The Wheres and Whens of Users' Expectations
By Jared Spool.
"...When creating great experiences, it's not so much about doing what users expect. Instead, it's about creating a design that clearly meets their needs at the instant they need it..."
http://www.uie.com/articles/user_expectations/

International Address Fields in Web Forms
By Luke Wroblewski.
"As enablers of online conversations between businesses and customers, Web forms are often responsible for gathering critical information-email addresses for continued communications, mailing addresses for product shipments, and billing information for payment processing to name just a few. So it shouldn't come as much of a surprise that one of the most common questions I get asked about Web form design is: 'How do I deal with international addresses?'..."
http://uxmatters.com/MT/archives/000295.php

What's the Right Order?
By Tom Tullis.
"After some questions about the most appropriate order for these buttons on a web application came up on a usability-related email distribution list, I decided to conduct an online survey of usability and user experience professionals to see what order they think is best." "
http://measuringuserexperience.com/SubmitCancel/index.htm


+12: XML.

Why XHTML
By Elliotte Rusty Harold.
"XHTML is simply an XML-ized version of HTML. Whereas HTML is at least theoretically built on top of SGML, XHTML is built on top of XML. XML is a much simpler, clearer spec than SGML. Therefore, XHTML is a simpler, clearer version of HTML. However, like a gun, a lot depends on whether you're facing its front or rear end..."
http://cafe.elharo.com/web/refactoring-html/why-xhtml/


[Section one ends.]


++ SECTION TWO:

+13: What Can You Find at the Web Design Reference Site?

Accessibility Information.
http://www.d.umn.edu/goto/accessibility

Association Information.
http://www.d.umn.edu/goto/associations

Book Listings.
http://www.d.umn.edu/goto/books

Cascading Style Sheets Information.
http://www.d.umn.edu/goto/css

Color Information.
http://www.d.umn.edu/goto/color

Dreamweaver Information.
http://www.d.umn.edu/goto/dreamweaver

Evaluation & Testing Information.
http://www.d.umn.edu/goto/testing

Event Information.
http://www.d.umn.edu/goto/events

Flash Information.
http://www.d.umn.edu/goto/flash

Information Architecture Information.
http://www.d.umn.edu/goto/architecture

JavaScript Information.
http://www.d.umn.edu/goto/javascript

Miscellaneous Web Information.
http://www.d.umn.edu/goto/misc

Navigation Information.
http://www.d.umn.edu/goto/navigation

PHP Information.
http://www.d.umn.edu/goto/php

Sites & Blogs Listing.
http://www.d.umn.edu/goto/sites

Standards, Guidelines & Pattern Information.
http://www.d.umn.edu/goto/standards

Tool Information.
http://www.d.umn.edu/goto/tools

Typography Information.
http://www.d.umn.edu/goto/type

Usability Information.
http://www.d.umn.edu/goto/usability

XML Information.
http://www.d.umn.edu/goto/xml

[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/goto/webdevlist
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.]