[webdev] Web Design Update: June 13, 2008

[Laura Carlson]

+++ 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://tinyurl.com/52kkv6

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 (Editors).
"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 at 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 at d.umn.edu


[Issue ends.]