Web Site Design: Familiarity Breeds Repeat Visits

Mainstream magazine Web sites are built on a concept developed in the early days of hot type: a series of vertical columns, which offer the most flexibility for redesigning quickly and fluidly to keep up with changing news. It seems to be the standard online format used across all media sites, including newspapers and 24-hour news services. Compare nytimes.com or cnn.com with sites as disparate as billboard.com or cosmopolitan.com, and you’ll see the same skeleton underneath.

The typical page then is divided into columns: The left side is devoted to navigation links, the middle to the primary editorial, the third houses a mix of special features and advertising, and an optional fourth contains sponsored material and more advertising. On most sites, the total column width is set for monitors using 1024 x 768 pixel resolution. Many designs are conservative and are sized for machines running at 800 x 600, which leaves about 760 pixels in usable width.

The sites also resemble newspapers in that designers and editors devote most of their resources to what runs "above the fold." In most browsers, editorial placed below the 596 pixel mark on 1024 x 768 screens, and below 411 pixels on 800 x 600, can only be reached by scrolling down. Up top, left-aligned company logos and strong lead story photography anchor the page. This valuable real estate demands efficient use of space: expanding menus, tabbed boxes and updated marquees are used for "surfacing nested content" – lingo for elegantly placing more links into tight spots. (See scientificamerican.com’s horizontal menu, time.com’s "Current Issue" area, and businessweek.com’s rotating lead stories.)

However, neither JavaScript nor Dynamic HTML can cram everything above the fold gracefully. Instead of abandoning the content below the dividing line, you can entice visitors to scroll down. Ploys include a list of links that run from above to below the fold, thumbnail images that add visual flair to what are essentially computer file directories, and "time-stamped" headlines and date rubrics alongside section names (check out economist.com and the online-only slate.com). This concept brings context and a bit of blog-posting urgency to what can be a neglected region.

Above or below the fold, the aesthetic is minimalism, consistency and familiarity. Niceties such as curves and gradients are used sparingly to keep download times – and costs – low, and boxes should be styled with subtle rules and light backgrounds. Flexibility to quickly move news-pegged content topside is at a premium – you don’t want to redesign graphics for each position change. Where crisp plain text will serve the same purpose, ubiquitous sans-serif typefaces like Verdana and Arial help provide a counterpoint to over-the-top flash advertising. And added touches of recognizable iconography and interactivity help hook visitors (take a look at newyorker.com’s icons).

In the future, magazine sites will make further use of standardized coding that allows for sophisticated layouts, faster loading of pages and lets content appear the same on different hardware, from desktop PCs to wireless PDAs. Like everyone else, online magazines will struggle with complicated and controversial Web browser compatibility issues. But above and beyond technology, art directors will increasingly gear their designs to promote identity and repeat visits. Networks, partnerships and the popularity of search engines mean readers come to articles from all over the Web – the eye-catching, easily navigable homepage is designed to keep them coming back.

Rolf Ebeling is art director of Newsweek.MSNBC.com

COPYRIGHT 2004 Copyright by Media Central Inc., A PRIMEDIA Company. All rights reserved. COPYRIGHT 2004 Gale Group