return to homepage Web Usability Web Accessibility
fire image

[Website Usability]
Web 2.0 Design Issues on A List Apart (www.alistapart.com)

According to Hunt's article, "Web 2.0 how-to design guide," the typical Web 2.0 sites have the common features: simplicity, central layout, fewer columns, separate top section, solid area of screen real-estate, simple nav, bold logos, bigger text, bold text introductions, strong colors, rich surfaces, gradients, reflections, cute icons, and star flashes. I am going to review a website called A List Apart (www.alistapart.com) based on the criteria that Hunt described.

A List Apart (ALA) is not related to American Library Association (ALA), but it is popular as much. A List Apart is a magazine for web developers, and it is written by them. The articles in this magazine are so popular that they often appear in web design manuals and lectures. The topics in this magazine are broadly divided into six categories: code, content, culture, design, process, and user science. Two articles are published every two weeks. It is currently the 268 issue, and more than 800 articles have been published since1999.

The overall website design follows simplicity. There is no unnecessary element: images are not overused, and decorative images and noises are minimized. The beautiful illustrations and screen shots in each article are used to communicate effectively and upgrade the quality of contents. Most pages in this site are not busy and place clean contents on white space. Unlike popular Web 2.0's central layout, the layout of this site isn't centered. Instead, it is floated to the left with fixed width (750px). Most pages are using two-columns, except two pages, which have three columns. An additional column in homepage and "About" page is properly used for promotional contents, such as crew list and coming events. For most pages, the two-columns are effectively used: the major column is for content area, and the right column is consistently used throughout the sites, providing search box and shortcuts to the major topics. The separate top section is visually distinct from the rest of page components by solid line and background color. The top section is used for branding and navigation, and it is located consistently throughout the site. Simple navigation is used for both global navigation and inline hyperlinks. The menu of global navigation is not overwhelmed (six choices), and each menu is clearly distinct by its name. Inline hyperlinks are differentiated from normal text with its simple color and rollover effect. Bold logo represents clear and strong brand image. It is located at the upper left corner of all pages along with enough white space. Interesting star-shaped label, star flash, is used next to the site logo. It shows the current issue number, suggesting a symbol of magazine.