lab188

Monday, August 21, 2006

13styles, a free CSS menu generator

While I like to build CSS menus from scratch so I know what is going on, sometimes I just need something built quickly. The free (so far) service from 13styles may be worth the sign-up.

Tuesday, August 15, 2006

CSS file frameworks

Nice approach to starting a CSS file from Mike Cherim’s blog. This approach will help me to stay consistent for starters. This will help when I look at a file from six months ago, and wonder, “What was I thinking? . . .”

Friday, August 04, 2006

Back to the future with the Chiefs web site

Jeffrey Zeldman’s redesign of the Chiefs web site two years ago was a marvelous job of standards-driven design. The latest redesign, by Kansas City firm VML, takes a step backwards, standards-wise.

Introduction

Analyzing a single web site for usability can be instructive. Web sites change with business cycles, trends in web design, advances in technology such as AJAX, and sometimes only for the sake of a new look. This analysis will focus on a single web site, but with two iterations. The first version was very visitor-friendly, while the “newer” version took a step backwards in usability and design.

Background

The web site of the Kansas City Chiefs was rebuilt and launched in September, 2004. Leading up to that time, Sprint, also headquartered in the Kansas City area, generated a great deal of buzz in the web design community. Sprint rebuilt their site using Cascading Style Sheets to unify the look and feel of the various Sprint divisions. Leading up to September 2004, Jeffrey Zeldman dropped a hint in his blog, The Daily Report, that he was in Kansas City meeting with a potential client for a redesign. Mr. Zeldman’s firm’s clients tend to be high profile, so the list of Kansas City-based firms that could attract his firm was fairly small.
His redesign of the site was a combination of front-end design with the visitor in mind, with back-end work for the developer and maintainer of the site in mind. I used the site in my HTML, Dreamweaver, and Cascading Style Sheet classes as an example of well-written code, great design, and visitor friendliness.
Then the site design changed drastically. I now use the site as a before and after example, with the after version being less visitor friendly and less developer friendly.

I’ll examine these areas:

* Navigation
* Layout
* Code
* Accessibility
* Graphics
* Visitor experience

Kansas City Chiefs, current site

Previous KC Chiefs site, developed by Jeffrey Zeldman’s firm

Navigation

Putting the sites side by side in separate browser windows illustrates the difference in navigation. The current site demotes site navigation to a narrower strip at the very top edge of the browser window, compared to the previous version. The previous version tied the branding and logo of the organization into the navigation bar. The previous version used color contrast as well as text sizing to emphasize the areas of the site while tying the navigation into the entire site design.

The current version’s navigation bar almost seems to be an after-thought, with small text sizing and a long string of links that does not differentiate between primary and secondary content. Javascript drop-down menus, while capturing a depth of navigation in a small space, cause flickering effects if the visitor moves across the menus quickly. And accessbility suffers as well with these types of menus, as I describe in the accessibility section.

Layout

The previous site used a three column layout with an approximate 750 pixel width. This width fits in a full-screen browser window using 800 x 600 resolution. The subtle side-effect is the visitor does not have to scroll horizontally, while a visitor using a higher resolution sees the same content centered on the page, with the short line lengths retained for easy reading. The three column layout spotlighted important content in the left column, while providing room for secondary content in the two smaller width columns on the right.

The visitor could easily discern the difference between the content areas. The use of a rough 2/3:1/4:1/4 column width ratio allows the site visitor to scan easily and quickly for content without having to hunt.

The current site uses an approximate 900 pixel width layout. Viewed at 800 x 600 resolution, the site now requires left-to-right scrolling to view the content. Using 800 x 600 resolution also cuts off the top navigation on the right hand side, as well as chopping off the cells at the bottom of the screen. The layout also penalizes the visitor with a confusing grid of cells in the lower third of the layout. Test the difference by scanning the previous version and the current version. The content at the bottom of the layout has no focus, no balance, and is difficult to scan. The current layout forces the visitor to track around the page for content.

Code compared

The previous version of the Chiefs site used Cascading Style Sheets to control the layout, look, and feel of the site. The site loaded quickly and subsequent pages loaded quickly by using the cached style sheet on the visitor’s computer. The total file size including scripts, images, styles sheets, and text content was 59k. Visitors on dial-up modems constitute approximately 30% of the general internet connected population. A web page size of 30k to 40k will load in 10 seconds or less for a dial-up connection. A 59k file size for the first page load provides visitors with a slow connection with an adequate experience, while visitors with a high-speed connection get a bonus of an especially fast loading page.

The current version of the Chiefs home page yields a file size of 210k, penalizing dial-up users.

The use of CSS (Cascading Style Sheets) in the previous site tied together HTML that was lean, efficient, easy to analyze, and contributed to the small file size. The use of multiple style sheets allowed the site visitor to easily change font size without having to change their browser settings. This font sizing tool, noted by the two “A” figures in the upper right gray area of the page, also resized the text within the context of the layout. The visitor could change the font size to a more comfortable reading size without breaking the layout. Even if the site visitor changed the font size in the browser rather than using the on-page controls, the layout stayed consistent and easy to navigate.

Likewise, the style sheets were also straight-forward, well-commented, and easy for a developer to examine. The style sheet driven layout avoided the use of tables. Removing nested tables from the layout reduced the amount of HTML, reduced file size, and reduced download time.

The current site suffers from a number of coding problems. Multiple inline styles combined with tables makes the code comparatively difficult to read and understand. Combining tables, style sheet classes, inline styles, and !important rules creates a mish-mash of code that would be much more difficult to manage and maintain. Changing the font size in the browser destroys the layout and causes the page to be almost unusable.

The previous version of the site passed the World Wide Web Consortium’s HTML validator with no errors. While this would be invisible and mostly irrelevant to site visitors, successful validation is an indicator of well-crafted HTML that will not present problems to visitors using different browsers or different devices to access the content. Passing validation successfully also requires a valid DOCTYPE in the <head> of the page, which the previous site used.
W3C’s validation page for the previous version.

The current version uses no DOCTYPE declaration in the home page and validation fails. This causes the page to fall back to old-style HTML 4.01 Transitional rules that renders the code and the CSS as if a 1998 vintage web browser were delivering the page. And the page has XHTML and HTML syntax mixed, so validation would be inconsistent regardless of the DOCTYPE.

W3C’s validation page for the current version.

Accessibility

The previous version reads well with images disabled. ALT text is provided where appropriate. When the style sheets are disabled, the default style allows a visitor to read the text in the order of content on the page.

The current version provides no ALT attributes for the image content, so a screen reader, or a visitor viewing the site with images turned off, sees very little content. The page is almost unusable, with only the Flash content visible. A blind or low-vision visitor would also miss the Flash content. Since much of the current site’s content is Flash or video-based, visitors with alternate browsers, such as cell phones, PDAs, or screen readers would be denied access to the content. Intentional or not, this type of design misses capturing a share of the audience.

Turning off style sheets generates an almost unusable page. Had the designers used style sheets appropriately, the text content of the page would still be accessible, even with style sheets disabled.

Many visitors print web pages, and the previous version used print style sheets to render text content on a standard 8.5" x 11" sheet. The print content was styled for print, with the print style sheet controlling the final result. Since a print style sheet was used, the visitor could be assured of printing the content viewable as text, and hiding the non-print content, such as Flash movies. If you are viewing the previous version of the site, choose the File menu in the browser, then Print. Perform the same exercise on the current version and compare the results.

The current version abandoned the print style sheets. Printing the page delivers some images and no text for the visitor.

The current version uses Javascript to control navigation menus. Any visitor that blocks Javascript, or uses any other method to view the web page other than a standard monitor and web browser combination will find the navigation blocked.

The previous site makes the menu system and navigation available regardless of the method used to view the page.
Graphics

Images on both sites are of high quality. The problem with the current site is the relative weight of each image is close to the other images. Therefore, no one image stands out or draws the visitor’s attention. All of the images and Flash animation draw the visitor’s attention away from the rest of the content. This results in a poor experience of the brand itself.
Conclusion

The previous version of the site offered a consistent visitor experience that loaded quickly and adjusted to the visitor’s environment. The standards-driven approach generated a site that offered a consistent look and feel in standard environments and access to the content in other environments such as screen readers. The code itself, while not as obvious to the site visitor, demonstrated that building exceptionally well-built CSS driven sites was doable.

The current version, for whatever reasons, takes a step back to 1998, with poor coding practices that combine with worst of table-based layout, with the inappropriate use of CSS. The site does not consider other audiences outside of a standard monitor and web browser combination. Even within that narrow definition, the pixel dimensions of the page, the lack of focus, and the poor structure of the grid system used to lay out the page results in a poor experience for the site visitor.

No disrespect to the team, but the web site? Zeldman’s rather dry reference about the new design, “. . . created a very different kind of site design for them,. . .” leaves this type of analysis to the reader—and the site visitor.