In 2004 Russ Weakley of Max Design presented a Web standards checklist to the Web Standards Group. I was on the mailing list and found the checklist invaluable as a guide for developing and testing web sites. The online version is perhaps the most useful, since it has links and reference materials, but I’ve often used the PDF version that Russ made available since I could print a new version for each project.
For several years I would either print the PDF and reference the checklist on paper, or open it in Illustrator, edit new layers of “checked” boxes and notes, and save it as a PDF again.
Now I’ve moved the checklist to a much easier format to work with on a regular basis: outline template in OmniOutliner. (OmniOutliner’s free version comes bundled with default software packages on Mac OS X.)
This allows me to quickly check off items without the clunky Illustrator editing. The plain-text export is handy for emailing or clean printing, and you can export as HTML if you like. OmniOutliner also has “notes” areas for adding text underneath each item, which is great for including reasons for not checking off a point, or if you need to jot down a few to-do items regarding an item.
A big thanks for Russ for developing this checklist—it’s been an integral part of my workflow. I hope you can use this outline-style “Web Standards Checklist” and that it speeds up your web site development and testing.
To use the outline, download the template file and open it in OmniOutliner. Then “Save As” to start a checklist; this gives you a new checklist for every web site project.
Download:
“Web Standards Checklist” as OmniOutline Template (Note: Includes minor changes to spelling, punctuation, and style.)
Original “Web Standards checklist”[sic] from Max Design as OmniOutline Template (Note: I didn’t change any text or fix typos in this version—it’s straight from the original PDF.)
As with his books, Edward Tufte suggests that your designs should be self-revealing. That is, they should practice what they preach. For example, his books on visual design are well-designed.
Not only that, but his presentation on presenting information, “Presenting Data and Information,” was very well presented. I was very impressed at the end of the day when his last point was “Finish Early,” and he said it three minutes before we were supposed to be done. What a great way to teach…
I highly recommend this conference by Edward Tufte, no matter what arena you work in. Check the E.T. web site for details on when/where to attend.
I attended the seminar on May 24th, 2007 in Crystal City, VA. I found the best way to take away his message was to encode small ideas as sentences.
Display of data should be driven by its content, not by what you are “good” at.
Use all the levels that it takes to explain the meaning of the content (not just one level).
Details matter: annotate relationships between items (it helps your credibility with the audience).
Model of a good diagram is a good map; maps generally don’t have non-essential information.
Don’t put boxes around things—instead, use that room to display information.
Provide “reasons to believe” such as a credibility statement. An example is a disclaimer such as, “This is the best we know until better evidence comes along.” Always leave the door open and be open to improvements.
Rich supergraphics supersede just generic bullet lists (E.T. doesn’t like the bullet “reveal” technique commonly used in PowerPoint presentations).
Aim for rich content and very simple design. This will maximize content reasoning time and minimize design “figuring out” time (decoding, fooling around, and figuring out time for people viewing your work).
Tables will outperform graphics for small datasets (less than 300 numbers). Example of sports pages and financial data (mutual fund page): these should be our models (you won’t find zebra strips or fancy icons there).
“Don’t get it original, get it right”: use excellent but conventional templates.
Research is more important and appropriate than creative work. Know your content!
Design standard: at least do no harm to the content.
Follow the metaphor of teaching and educating people through the content and design; use elite newspapers as examples: NY Times Thursday science articles for example.
The principles of analytical design are based on the principles of analytical thinking (and also therefore tied to nature’s laws)
The goal of information design is to aid thinking
Show important information side-by-side (avoid the flip, flip of back and forth movement to compare things visually). For example, the medical bill chart with annotated sidenotes is a good template for reports (explains the data with side-by-side notes).
Good quote: “If you look after truth and goodness, beauty looks after herself.”
Sparklines: based on the idea that graphics are no longer important; they are the same as letters and numbers.
“Nature” magazine: best statistical graphics available (also see “Science”).
Content matters most of all.
Many web designers implement “skip links” on their sites in order to aid visitors with alternate devices like mobile phones or screen readers. The links act as a way to navigate quickly to main parts of the page; if implemented correctly, they can be a good step towards keeping a web site accessible.
How to implement these links is a hot topic of discussion among web professionals. I recently received this question regarding skip links and whether to show them or hide them in a given layout.
Hi, I just wanted to ask you a quick question about accessibility for this site I am working on… I was going to use the display:none CSS attribute for my skiplinks, but according to this site, it’s not ideal because users that use a keyboard but that are not blind (i.e., have to use TAB to get around) can’t see it and therefore can’t use it. Also, apparently, some screen readers don’t read them. So, that option aside, I’ve come up with a potential solution. This would be to put a small downward-facing arrow at the top right, with the ALT tag[sic] describing its use. It’s visible, and relatively unobtrusive. In your experience, is using display:none an industry standard, and is what the site said a concern? What do you think would be the best solution?
My experience has been that a well-designed HTML document doesn’t need skip links at all. If you do need it, for a very busy or long page with lots of content, then it is a great way to aid site visitors.
On some of the sites I have worked on I’ve included a “Skip to navigation” link and tried to put the main content first in the source. For example, see my Travel/RV blog and turn off CSS. The skip link is under the page title but just on top of the main content. For other sites, like here on simpledream, the skip link text is “Skip to content” and is located just above the global navigation menu.
To hide or not to hide? This is very much a personal preference. Lots of accessibility experts claim all skip links should be visible (always). My preference is to hide them from sighted folks. Most designers or visually-oriented developers will follow the hidden approach unless they can come up with a creative way to show the visible skip link. As a general rule, and as you pointed out, hidden skip links only benefit screen readers and other alternate browsers and don’t provide an option for sighted keyboard users.
If I’m going to hide, what CSS rules to use? I’ve used “display:none” on almost every site, but I am now leaning towards a better approach. For example, setting the “text-indent” to ”-9999px” or something similar (I’ve also used “width: 0; height: 0; overflow: hidden;” before with similar results). This keeps it visible in screen readers and alternate browsers that understand CSS. I think it’s valid to say that “display:none” is not the best solution for hiding the links since it’s possible that some screen readers will ignore them.
What’s the best solution? It really depends! Like a lot of web design and development issues, the best solution depends on the web site itself, especially its audience and purpose. For example, if a site expects lots of mobile device visitors, the visible skip links at the very top of the page will be ultra-important. It’s really useful on a mobile device (such as a cell phone) to be able to use a skip link to navigate rather than having to endlessly scroll. As mobile access gets more popular each day, this is an important consideration.
If you want the site to be clutter-free and clear, I would recommend hiding the skip link. If accessibility is more important than the look of the layout, then the arrow idea is superb. Go for it!
In a scenario where the main content of the page comes first in the HTML source, then you may be alright without a visible skip link since the important content will be right there for the visitor to read.
If you would like to read other opinions and explore test cases:
An important part of web design is making sure your content works for as many people as possible. To achieve this goal, make sure to use appropriate text for your links.
When calling the user to action, use brief but meaningful link text that:
Read more about meaningful link text on the W3C web site.