Highlights of Week 32/2010
- Real Time Web Analytics Services – Best of (by hongkiat) - which web analytics service do you use?
- Guidelines for URI Design (by Jacob Gillespie) - URI structure is primarily important for user recognition and easy of use, search engine optimization is nice too.
- 8 Ways to Make Your Website Mobile Friendly (by Joel Reyes) - isn't it sweet that our mobiles will drive us towards better web development also? Something we should have been doing for a long time already?
- The ADA and the Web: Concerns and Misconceptions (by Jared Smith) - Is an accessibility law for e-commerce coming? Will this take the look of the web back to 1990? Jared has some nice Q&A there...
- Stop Designing Aesthetics, Start Designing Emotions (by John O’Nolan) - Design for emotions, definitely not a new concept but usually poorly covered. John takes a good stab on it.
- 5 Small Biz Web Design Trends to Watch (by Grace Smith) - Minimalism, Unique Photography, Bold Typography, Clear Calls to Action, A/B Testing - what more to say?
- iPad User Experience Guidelines (by UX Magazine) - with the source doc at Apple's Human Interface Guidelines for the iPad
Design Guidelines: 404 Error Pages
The 404 or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with the server but either the server could not find what was requested, or it was configured not to fulfill the request and did not reveal the reason why.
Possible Reasons
Possible reasons for 404 error pages can be
- click on a broken link
- the page has been deleted
- mistyped URL
Depending on your internet service provider (ISP) the standard 404 page can vary greatly in terms of visual display and information on the error itself. In order to not loose visitors it's strongly suggested to create a custom 404 page. A good custom 404 page will help people find the information they're looking for, as well as providing other helpful content and encouraging them to explore your site further.
Design Guidelines for 404 Pages
A good 404 error page conveys a right message and leads the visitor to where he intends to go:
- Tell visitors clearly that the page they're looking for can't be found.
- Use language that is easy to understand, non-technical, friendly and inviting.
- Display an error message that explains what could have gone wrong.
- Offer means to recover (e.g. list site's naming conventions, spell check functionality, most common problems).
- Offer links to other important links of the site (e.g. most popular, homepage, FAQ).
- Provide a way for users to report a broken link (easy form, email the webmaster).
- Do not display ads.
- Avoid redirection of 301 and 302.
Other Considerations
No matter how beautiful and useful your custom 404 page, you probably don't want it to appear in Google search results. In order to prevent 404 pages from being indexed by Google and other search engines, make sure that your webserver returns an actual 404 HTTP status code when a missing page is requested.
Got a nice 404 page?
Send me screenshots of your 404 error pages - I'd love to see them!
Thx to Claude Betancourt who sent me this 404 page (Figure 1) of Dow Jones Indexes telling me that "behind the scenes we capture all CGI and request scope variables, log it and email the admins to correct the error if necessary." Nicely done!
Another nice one with a funny little video:
References
- Frickey, D.; A More Useful 404; http://www.alistapart.com/articles/amoreuseful404
- 404 Error Pages; 404 Error Pages; http://www.404errorpages.com/
Understand Web Content Accessibility Guidelines & Section 508
So you know what Accessibility is and how it improves your ROI and why everybody benefits. Now what exactly is Section 508 and how does it correlate with W3C's Web Content Accessibility Guidelines (WCAG 1.0)? And most important, how can you create an accessible.htm that complies with these standards?
Overview: WCAG & Section 508

The main institutions involved (as shown in the illustration above) are:
- GSA (U.S. General Services Administration) represented by the IT Accessibility and Workforce (ITAW) who is the governments principal advocate and coordinator for Section 508 implementation. Other agencies and organizations may offer similar information, but ITAW is recognized as the governmentwide policy resource for Section 508.
- World Wide Web Consortium (W3C) represented by the Web Accessibility Initiative (WAI) who developed the Web Content Accessibility Guidelines 1.0 that was approved in May 1999 and is currently the stable and referenceable version.
- Users that visit websites. In the illustration I mention Government websites as the institution with the biggest need, that is because the Accessibility Guidelines are mandatory for governmental implementations.
Before I continue to explain how the WCAG relate to the Section 508 Standards it is important to get a grasp of what the respective guidelines propose and which checkpoints are included.
Checkpoints: Section 508 Standards
The purpose of Section 508 Standards is explained by Authority 29 U.S.C. 794d: “The purpose of this part is to implement section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. 794d). Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.”
| Checkpoint | Description | 508 |
|---|---|---|
| Non-text elements | A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). | (a) |
| Multimedia presentation | Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. | (b) |
| Color | Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. | (c) |
| Style Sheets | Documents shall be organized so they are readable without requiring an associated style sheet. | (d) |
| Server-side image maps | Redundant text links shall be provided for each active region of a server-side image map. | (e) |
| Client-side image maps | Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. | (f) |
| Data tables | Row and column headers shall be identified for data tables. | (g) |
| Markup & tables | Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. | (h) |
| Frames | Frames shall be titled with text that facilitates frame identification and navigation. | (i) |
| Flickering | Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. | (j) |
| Text-only page | A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. | (k) |
| Scripting languages | When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. | (l) |
| Applets, plug-ins or other applications | When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). | (m) |
| Electronic forms | When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. | (n) |
| Navigation links | A method shall be provided that permits users to skip repetitive navigation links. | (o) |
| Timed response | When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. | (p) |
Checkpoints: Web Content Accessibility Guidelines
The guidelines as described by the W3C explain how to make Web content accessible to people with disabilities. “The guidelines are intended for all Web content developers (page authors and site designers) and for developers of authoring tools. The primary goal of these guidelines is to promote accessibility. However, following them will also make Web content more available to all users, whatever user agent they are using (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.). Following these guidelines will also help people find information on the Web more quickly. These guidelines do not discourage content developers from using images, video, etc., but rather explain how to make multimedia content more accessible to a wide audience.”
| # | Description |
|---|---|
| 01. | Provide equivalent alternatives to auditory and visual content. |
| 02. | Don't rely on color alone. |
| 03. | Use markup and style sheets and do so properly. |
| 04. | Clarify natural language usage. |
| 05. | Create tables that transform gracefully. |
| 06. | Ensure that pages featuring new technologies transform gracefully. |
| 07. | Ensure user control of time-sensitive content changes. |
| 08. | Ensure direct accessibility of embedded user interfaces. |
| 09. | Design for device-independence. |
| 10. | Use interim solutions. |
| 11. | Use W3C technologies and guidelines. |
| 12. | Provide context and orientation information. |
| 13. | Provide clear navigation mechanisms. |
| 14. | Ensure that documents are clear and simple. |
Considerations when implementing for Section 508 Compliancy
Section 508 has three Levels of priority: Level 1, Level 2 and Level 3. WCAG has also three levels of priority, but they are slightly different and named A, AA, AAA. This is an important distinction especially when testing with automated tools like Bobby because - and be aware of this - Level A compliancy NOT EQUALS Level 1 compliancy. Here is why:
When the ITAW handed Paragraph 1194.22 to the WAI (step 1) and after the WCAG 1.0 were completed and handed back to the ITAW (step 2) the Access Board released a Note to §1194.22:
- The Board interprets paragraphs (a) through (k) of this section as consistent with the following priority 1 Checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0) (May 5, 1999) published by the Web Accessibility Initiative of the World Wide Web Consortium:
Section 1194.22 Paragraph WCAG 1.0 Checkpoint (a) 1.1 (b) 1.4 (c) 2.1 (d) 6.1 (e) 1.2 (f) 9.1 (g) 5.1 (h) 5.2 (i) 12.1 (j) 7.1 (k) 11.4 - Paragraphs (l), (m), (n), (o), and (p) of this section are different from WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1 checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to comply with this section.
Item 2 is especially important because it means that a discrepancy between WCAG and Section 508 exists that requires a Section 508 Level 1 conformant site has to meet more than just Level A of the WCAG.
Step 3 and step 4 complete the process to create accessible.htm - it is basically up to you to apply the guidelines and produce accessible code.
Best Practices for Accessiblity
Follow my Best Practices blog entries to get more in-depth knowledge on what exactly you need to do to meet all the Section 508 compliancy checkpoints as outlined by the WCAG. Blog entries available so far:
References
- Section 508 Standards; Authority: 29 U.S.C. 794d; http://www.section508.gov/index.cfm?FuseAction=Content&ID=12
- Chisholm, W., Vanderheiden, G., Jacobs, I. (editors); Web Content Accessibility Guidelines 1.0; http://www.w3.org/TR/WCAG10/
Visual Web Design
First impressions matter! Luke Wroblewski, an excellent speaker with original insights which I had the pleasure to hear at last year's UI-12 (User Interface 12) in Boston, states in his latest article that users coming to your site from a search engine will do one of three things:
- Look over the page and determine it is not relevant to their goal
- Look over the page and determine it might be relevant to their goals then quickly scan the page for the information they need
- Look over the page, quickly scan the page, find the information they need and then stay awhile.
All this happens within seconds. Therefore it is necessary to translate the first impressions (what am I looking at? functional role present?) into meaningful interactions, i.e. scanability, further (inter)action, which leaves us with the following
Guidelines for Visual Web Design
- Set initial expectations by communicating what kind of information it provides.
- Provide a way to quickly scan that information in order to locate something of value.
- Allow people to immerse themselves in the information they want and explore other relevant information when they choose to.





