[webdev] Web Design Update: November 28, 2006

Laura Carlson lcarlson at d.umn.edu
Tue Nov 28 06:16:34 CST 2006

- Volume 5, Issue 23, November 28, 2006.

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


SECTION ONE: New references.
What's new at the Web Design Reference site?
New links in these categories:

03: COLOR.
09: PHP.
11: TOOLS.
14: XML.

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

[Contents ends.]

++ SECTION ONE: New references.


Designing Forms for Keyboard Access
By Sarah Horton.
"Forms are what make web communication a dialogue rather than a 
monologue. Through forms, we converse-we pose questions, make requests, 
tell about ourselves. To engage in a web-based conversation, we must be 
able to fill out and submit forms. Otherwise, we're back to a 
monologue, and what fun is that?..."

Implicit and Explicit Form Label Test
By Trevor Morris.
"Does simply having the for attribute constitute explicit association? 
Or does nesting an input within a label mean an implicit association?"

Designing Data Tables
By Sarah Horton.
"In this article, I take a fresh look at table design, covering both 
the challenges of working within the constraints of the screen and the 
markup that can be used to help provide table structure."

Designing Accessible Audio
By Sarah Horton.
"...Accessible audio is a perfect illustration of the broad benefits of 
universal design because access to equivalent text is helpful for 
everyone. A text transcript can be read and indexed by software, making 
audio- and video-based content easier to find. Users who have technical 
issues with Web-based media (slow Internet access, software 
incompatibilities, and so on) can access the information via the text 
transcript. Also, a text transcript is an effective way to convey 
information, and may be more efficient than audio alone, since reading 
is faster than listening-meaning that people reading a transcript may 
understand the information better and faster. So how do you go about 
putting into text the information contained in an audio recording? Keep 
reading to find out, and to learn what to do with a transcript once you 
have one..."

Designing Accessible Text-Part 1: Structure
By Sarah Horton.
"Done right, web text has layers of meaning that are not visible on the 
page. With its roots in text encoding and Standard Generalized Markup 
Language (SGML), Hypertext Markup Language (HTML) offers designers a 
basic toolset of structural tags for use in categorizing document 
elements. We use these tags to assign significance to particular words 
and phrases, including headings, lists, and tables. Web pages with this 
functional layer are more than screen deep-they can be read and 
interpreted by users who never see the rendered screen. For example, we 
commonly differentiate page and section headings by using spacing and 
typographic emphasis (such as variations in weight, size, color, and 
typeface)-but this essential information is accessible only to users 
viewing the page. When headings are differentiated in the page code 
using heading tags, non-visual users can also gain access to the 
information hierarchy of the page..."

Designing Pages for Linear Access
By Sarah Horton.
"...When we talk about web design, we tend to focus on how aspects of 
the surface layer affect usability-color, type, layout. In this 
article, I look below the surface at how attention to source code 
design-specifically, document order-can improve linear access to web 

WCAG 2 Activity on Cognitive Disability
By Joe Clark.
"This page will act as a repository of documents on the WCAG Working 
Group's activities concerning cognitive disability (dyslexia and the 
like) under WCAG 2."

How-Tos and Demos
By University of Texas.
"Learn to build accessible forms, images, multimedia, data tables and 
more. See (and hear) examples and look at the code."

Access 2.0 Blog
By Paul Crichton.
"We'll be assessing the latest developments in and outside of the BBC, 
raving about the good, railing against the bad and reviling the fugly 
along the way. But en route, we'll be looking at real disabled people, 
how they use the net, how they want to use the net, and throwing in 
things that fascinate and interest us in terms of blue skies accessible 
tech thinking for the digital future."

What's New in JAWS 8.0
By Steve Faulkner.
"JAWS 8 is on its way, which is a good reason to take a look at its new 

User-Center, Standards-Driven Web Accessibility
By Jared Smith.
Jared's Refresh06 conference slides for his presentation are available 
in Acrobat and HTML formats.


10 Steps to CSS Success: Browser, User, Author
By Molly Holzschlag.
"CSS is a technical language. But, it's meant to address many aspects 
of presentation. In other words, it's a technology for designers-and 
therein lies the challenge with those who set out to learn it..."

Like Mother Like Child: A Look at Inheritance in CSS
By Molly Holzschlag.
"That we inherit certain features from our parents is a given. I look 
very much like my father did, and my coloring is more like his was as 
well. From my mother, I got a head of wild curly hair and my physical 
stature. Think for a moment what obvious features you've inherited from 
your parents-even your grandparents! If you have children, consider 
which features they've inherited, too. If there are any grandparent Web 
developers out there, well what a fantastic opportunity to see the 
power of inheritance in your family tree!..."

Using Specificity to Resolve Conflicts
By Molly Holzschlag.
"There have been countless times prior to learning about specificity 
that I found myself shaking my fist at myself, Web browsers, and at CSS 
itself. There I'd be, trying to figure out why a style rule that I'd 
checked and checked again wasn't being applied properly..."

Box Model Mastery
By Molly Holzschlag.
"Box Model Mastery takes a look at how to understand the box model, 
which is the browser's model as to how it generates boxes for elements. 
With CSS, you can then control those boxes by modifying their margins, 
borders and padding to obtain space and style as well as move the boxes 
around the page..."

Breaking Out of the Box: Using Abstract Thought to Inspire Progressive 
Web Design
By Molly Holzschlag.
"The Web standards movement of the past seven years has done a great 
deal to promote best practices in how we approach our site designs. 
However, the emphasis on code has been extreme: We've had to learn 
complex aspects of markup and CSS and while this knowledge has been 
critical, it's outside the interest area and even comfort zone of many 
designers, who want to focus on what they do best: convey information 

Transcendent CSS: Creating the Aesthetic Web
By Molly Holzschlag.
"For those folks working with Web standards, particularly CSS, the 
road's been a bit of a difficult one. We've faced a lot of challenges 
and continue to face them. But there's hope on the horizon, lots of 
hope. This hope has emerged from the hard work of many people who are 
attempting to transcend the technical problems and create great Web 
sites. Our joint goal is to create sites that are structurally sound, 
accessible, usable, and designed with aesthetic appeal for multiple 
platform use including screen, print, and wherever possible, mobile 

Wake Up and Smell the IE7!
By Simon Griffin.
"In the second part of his series, Simon Griffin delves into the 
specifics of what IE7 means for your page content and styling."

CSS Rounded Corners 'Roundup'
By Christian Watson.
"This collection of techniques to create boxes with rounded corners 
using CSS has become quite popular. The problem now is there are so 
many choices it's hard to know which one to choose."

Building Your First CSS Site
By Michael Koch.
"Get pointers on how to move from building table-based websites to 
building CSS sites..."

Comparison of CSS Layout Engines
By Wikipedia.
"The following tables compare CSS compatibility and support for a 
number of layout engines. Please see the individual products' articles 
for further information. This article is not all-inclusive or 
necessarily up-to-date. Unless otherwise specified in footnotes, 
comparisons are based on the stable versions without any add-ons, 
extensions or external programs."

How to Structure Large CSS Files
By Emil Stenstrom.
"Many methods exist to structure your CSS. This article tries to 
describe the method I use. I call it the 'Tree method', since it 
structures the CSS like...that's right, a tree structure. I want to 
stress that it isn't my invention; I just describe and give reasons for 
its rules..."

Inline Image Quotes
By Natalie Downe.
"I have been meaning to write about this technique for some time now. 
The aim is a block quote...with speech marks at the front and 
termination of the text but without the nastiness of inline images..."

+03: COLOR.

Designing Accessible Text-Part 3: Color
By Sarah Horton.
"Color is a powerful design tool, and one of the easiest ways to jazz 
up a Web site. Color adds visual interest, draws the eye, and 
communicates information to the user. On the Web, color is free, with 
thousands of colors available at the flick of a hex code. So color is 
great! But like all good things, color must be applied with caution. 
Designers often over- or misapply color to the point of reducing the 
usability of their designs..."

Easy Color Picking on the Mac
By Kevin Hale.


Eye-Tracking Studies at Google
By William Slawski.
"Even on a simple level, shouldn't the way someone looks at search 
results pages be different if the type of search was for different 
purposes? Say, for instance, a navigational search as opposed to an 
informational one, or a transactional one?"

+05: EVENTS.

Section 508 Monthly Lunch and Learn Sessions
Also participation through a teleconference hook-up.
Washington, D.C.  U.S.A.

Accessible On-Line Services, A Benefit For All
January 29, 2007.
Paris, France

Engineering Interactive Systems 2007
March 22-24, 2007.
Salamanca, Spain

International Conference on Information and Communication Technology 
and Accessibility
April 12-14, 2007.
Hammamet, Tunisia


Video: Douglas Crockford: 'Advanced JavaScript'.
"...Those who enjoyed Douglas's deep-dive into the DOM may be 
interested also in his 'Advanced JavaScript' presentation, now publicly 
available on Yahoo..."

The Re-emergence of JavaScript
By Faruk Ates.
"It's been almost 10 years since the days of "DHTML madness," a time 
when the term DHTML-dynamic HTML, referring to JavaScript-was used by 
every marketeer jumping in on the booming Internet industry. DHTML was 
going to "push the Web forward" and as such, every company that claimed 
to use it was likely to receive good amounts of venture capital. Then 
the big Internet boom went bust. Over the years that followed, 
JavaScript earned itself a terrible reputation. This lousy rep was due 
in large part to the countless "plug-and-play" scripts that brought 
interaction to Web sites..."

Names and IDs
By Jeremy Keith.
"With Internet Explorer 7 out the door with greatly improved CSS 
support, the IE development team can now turn their attention towards 
improving the browser's JavaScript..."

Important Facts About JavaScript and Related Technologies
By Christian Wenz.
"This chapter presents not only the most important facts (and phrases) 
regarding JavaScript, but also related technologies, especially XML 
handling with JavaScript."

AJAX Tips and Tricks
By Kris Hadlock.
"If you're developing in AJAX, author Kris Hadlock has a few tricks you 
can use to avoid common issues and speed up your AJAX development time. 
This article shows you how to prevent cached AJAX requests, debug AJAX 
code with FireBug, and create a database connection."


Interview with Patrick H. Lauke
By Dennis Lembree.
"This is the transcript of my interview for Web Axe - Practical Web 
Design Accessibility Tips, conducted by Dennis Lembree."


Designing Navigation with Lists
By Sarah Horton.
"On the surface, navigation appears to have been overlooked by the 
originators of the web. There is no NAV tag to mark a navigation block 
and no LINK tag to identify individual links. But let's take a step 
back and think more broadly about navigation. What is navigation if not 
a list of links? And don't we have tags for marking up lists? Of course 
we do-our friends, UL and LI..."

Avoiding the 5 Most Common SEO Mistakes
By Johnathon Smith.
"Are your SEO efforts hampered by any of the 5 most common SEO 
mistakes? They're not difficult to rectify ... once you know what they 
are! Johnathon explains them clearly, and shows you how to correct 
them, in this hands-on tutorial."

+09: PHP.

Adding Functionality: Scripted CSS
By Dave Shea.
"CSS was originally designed as a styling language, with an emphasis on 
keeping the syntax simple and as non-programmatic as possible. Doing it 
this way encouraged adoption by designers who didn't get programming, 
while limiting those of us who want to take it further. Luckily, we can 
mix and match server-side scripting with CSS for powerful results. 
While this article will use PHP for the examples, I'll try and explain 
the basic concepts in a general enough fashion that you can adapt the 
principles for ASP, Cold Fusion, or any other server-side language..."

Database-Enabled Ajax with PHP
By Kris Hadlock.
"Ajax has taken the Web to a new level by offering an intuitive 
interactive model that rivals the desktop. To compete with desktop 
applications, you'll learn how to create database-enabled Ajax requests 
using PHP and MySQL."

Securing PHP Include Files
By Mike Cherim.
" One of the great things about the PHP server-side scripting language 
is the ability to 'include' files. Using includes you can share files 
across several pages. For example, if you're not using a functions 
library to handle global page sections, you can create a file called 
header.php, put some variable hooks in it to handle a dynamic title, 
keyword set, and description, then use this one file for all your web 
pages. This can save a tremendous amount of initial work when creating 
a site, plus it can greatly reduce maintenance down the road if you 
want to make changes. But the web being what it is, it is possible to 
access some includes directly and thus you may want to secure them..."

Debugging and Performance
By George Schlossnagl.
"Debugging is an important part of coding. One way to make the 
debugging process easier is to write quality code to begin with. This 
article, the first of two parts, will point out some of the most common 
coding errors, and help you identify problems in your code. It is 
excerpted from chapter 12 of Zend PHP Certification, written by George 
Schlossnagle et al."


Jeffrey Zeldman On Why To Incorporate Web Standards
By Jeffrey Zeldman.
"Web standards hold the key to accessible, cost-effective web design 
and development, but you wouldn't know it from surveying most big 
commercial sites. In this chapter, CSS guru Jeffrey Zeldman explores 
some of the reasons web standards have not yet been incorporated into 
the normative practice of all design shops and in-house web divisions, 
and are not yet obligatory components of every site plan or request for 
proposal. If you need help selling standards to your colleagues, this 
chapter is for you."

The Road to the Semantic Web
By Alex Iskold.
"John Markoff's recent article in NY Times has generated an interesting 
discussion about Web 3.0 being the long-promised Semantic Web. For 
instance, a short post on Fred Wilson's blog had a lot of lengthy 
comments attempting to define Web 1.0, Web 2.0 and Web 3.0. Some people 
think that the Semantic Web is about AI, some claim that it is more 
about semantics, while others say that it is about data annotation. All 
agree however, that we will all be wonderfully more productive and 
simply happier when it arrives. Lets take a look at the ingredients, 
definitions and approaches to the Semantic Web so that we can recognize 
it when it is finally here."

The Business Benefits of Microformats
By Simon Collison.
"...I have only recently realized that Microformats are something that 
Mr. Client (or Mrs. Client) not only understands, but also loves, 
needs, wants and will tell his/her associates about. This is a 
cast-iron business benefit and a serious commodity..."

Microformats: Tomorrow's Web Today
By Molly E. Holzschlag.
"Despite the buzz about Web 2.0 and next-generation web applications, 
Informit readers will find it interesting that the original second 
generation vision for the Web has very little to do with the current 
perspectives and positions on Web 2.0. The Semantic Web is the term 
used to describe Tim Berners-Lee and the World Wide Web Consortium's 
work in encouraging the Web to its next level..."

Microformats: Understanding Elemental Microformats
By Molly E. Holzschlag.
"Remember playing with blocks as a kid? One of the pleasures of my 
childhood was competing with my brothers to see who could build the 
biggest, tallest, coolest structure using blocks. In later years, the 
game Jenga, with which many readers will be familiar, took the place of 
building blocks, but still with the same essential concept in mind..."

+11: TOOLS.

By Alex Shiels.
"Textile takes plain text with *simple* markup and produces valid 

Daily Color Scheme
By Walter Tamboer.
"Daily Color Scheme.com is all about color. Every day color. We serve a 
new colorscheme every day of the year, to keep the designers head 
fueled with inspirational and usable color schemes."

Hex Color Picker
By wafflesoftware.
"Lets you get and edit hexadecimal HTML color codes in the standard Mac 
OS X color panel."


Designing Accessible Text-Part 2: Text Size
By Sarah Horton.
"Designing web text is fundamentally different from designing text in 
print. With printed documents, words are set in ink, meaning that 
designers must choose a text size that's readable by most readers. 
People who cannot read text as printed use reading aids such as glasses 
or document enlargers, or alternate versions such as audio or 
large-print formats. In print, designers are responsible for setting 
text size, whereas on the Web, designing text is a collaboration 
between designer and user..."

Designing Accessible Text-Part 4: Typeface
By Sarah Horton.
"Of the attributes that influence the accessibility of Web text, 
typeface plays the smallest role-not quite a member of the chorus, but 
certainly a bit part. While color and size determine the possibility of 
reading, typeface influences the quality of the reading experience. For 
instance, some typefaces are more difficult to read than others, and a 
fantasy font like Impact or Desdemona is likely to lose its charm when 
used to set large blocks of text. While we might not enjoy reading 
under such conditions, it's unlikely that we would be unable to read 
due to such an unwise choice of typeface. Nevertheless, quality of 
experience does figure in to universal usability. Read on to explore 
the fine art of choosing typefaces in the constrained environment of 
the Web, and to learn best practices for coding typefaces that can be 
easily modified by users."


Choices = Headaches
By Joel Spolsky.
"Every time you want to leave your computer, you have to choose between 
nine, count them, nine options: two icons and seven menu items. The two 
icons, I think, are shortcuts to menu items. I'm guessing the lock icon 
does the same thing as the lock menu item, but I'm not sure which menu 
item the on/off icon corresponds to."

Windows Vista Off Button Usability Issues
By Jesper Ronn-Jensen.
"Below is my argument that some user interface widgets are introduced 
only because of buggy software. First let's have a look at Windows 
Vista. Joel Spolsky is picking on the 24 people that designed the Off 
button in Windows Vista: Choices = Headaches."

Paradox of Choice - Barry Schwartz Video
By Jesper Ronn-Jensen.
"The most influential talk I have heard this year is Barry Schwartz on 
the paradox of choice. I cannot recommend this talk enough, so I was 
thrilled to see that Barry did a similar talk that's available on 
Google Video..."

Designing Usable Forms
By Sarah Horton.
"A whole book could be written on form design. This article touches on 
only two of the many form usability issues-namely, those associated 
with element labeling and menus. More form usability information can be 
found in a related Web Design Reference Guide article on designing 
forms for keyboard access..."

Designing Flexible Layouts
By Sarah Horton.
"Flexibility is one of the more vexing aspects of designing for the 
web. The hours we spend tweaking colors and fonts-only to have users 
come along and apply their own settings to our pages. Humph! And when 
we see our designs compromised-for example, by large text or a narrow 
browser window-all we can do is mutter, "Well, it looks great on my 
computer." Now, we could avoid unpleasant surprises by creating sites 
that are image based. Images are largely impervious to user 
modification, and many sites, including those of Apple and J.Crew, rely 
on images almost exclusively. This approach provides a measure of 
design integrity, but at significant cost. Users who can't access 
images, or who must make modifications in order to access content, 
cannot use these sites. And when push comes to shove, a compromised but 
usable design is better than an unusable one..."

Resolution vs. Browser Size vs. Fixed or Adaptive width
By Roger Johansson.
"...By all means if you want to make your design look its best at a 
certain width, optimize it for that width. But in most cases there is 
little reason to lock down the design to a pixel width..."

Fixed and Fluid, myth and meme
By Mike Davies.
"Are there any accessibility-based reasons for choosing a 
variable-width layout over a fixed-width layout?..."

+14: XML.

The Feedback on HTML
By Anne Van Kesteren.
"WHATWG 2.0: blog, Wiki and IRC!"

[Section one ends.]


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

Accessibility Information.

Association Information.

Book Listings.

Cascading Style Sheets Information.

Color Information.

Dreamweaver Information.

Evaluation & Testing Information.

Event Information.

Flash Information.

Information Architecture Information.

JavaScript Information.

Miscellaneous Web Information.

Navigation Information.

PHP Information.

Sites & Blogs Listing.

Standards, Guidelines & Pattern Information.

Tool Information.

Typography Information.

Usability Information.

XML Information.

[Section two ends.]



WEB DESIGN UPDATE is available by subscription. For information on how 
to subscribe and unsubscribe please visit:
The Web Design Reference Site also has a RSS 2.0 feed for site updates.


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:


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

More information about the Webdev mailing list