The redesign of Economist.com

In: Columns > Wide Open

By David Wertheimer

Published on November 19, 2002

The following excerpts are from Usability: The Site Speaks for Itself, published in June 2002 by Glasshaus. In Chapter 2, David Wertheimer covers in detail the redesign of Economist.com, which was completed in 2000. These excerpts, taken from throughout the chapter, cover some of the nuances tackled during the redesign process.

Introduction

The redesign of Economist.com required balance. Our main goal was to deliver clean, readable articles, but a long list of commercial and technical requirements continually forced us to take a broad view of what belongs where on our pages. In the world of The Economist, the independent editorial voice is king, and the separation of business and journalistic interests meant that readability could not be compromised: text had to be prominent, clear and easy to read.

We took our time investigating numerous approaches as we worked on a coherent, forward-thinking design. Through open discussion and sharing of ideas, we crafted a unified site, not one created by compromise or committee. We aimed to build a site that grew forth from its content, leaving the articles as the focus, as opposed to one that made reading a secondary concern. Our work led to a redesign that won accolades upon its release and delivers a prime user experience as it continues to grow.

Fonts

We spent months debating the merits of defining fonts for our users. When I first came to Economist.com, I was a full proponent of minimal site intrusion, preferring to leave most font sizes variable and faces undefined. I believed that if usability and readability were our prime concern, it was best to leave font selection alone. “Let the reader determine how the text should be displayed,” I commanded.

This stance met with heavy resistance in our London office, where our chief technical officer and developers rallied hard for the opposite. New font faces like Verdana, they argued, were designed for maximum screen readability, and they should be used whenever possible. Users cannot be trusted to set their computers to an optimal setting, the argument went, and we should provide them with the best possible experience we can. We thought about using the following:

I also leaned toward default fonts because most users’ browsers stay set to Times New Roman, which was a serif font, and one not dissimilar from Ecotype, the proprietary font of The Economist. As someone who doesn’t alter default settings often–I like to try and simulate the generic user’s viewing environment–I had become accustomed to doing most of my web reading in Times New Roman. In the end, however, I capitulated, and we went with a sans-serif font set with Verdana as the lead option. Economist.com is better for it–the site is much more readable, especially in our small-font sidebars, where Verdana reigns supreme. We use the font in virtually every occurrence of text on the site, and we are context-sensitive with sizing.

We largely still use relative font sizes rather than style-sheet-dictated pixels to preserve some user flexibility. The only slight problem is that Verdana is a particularly wide font, which makes some text-based designs tough to fit into tight spaces. Chalk up a victory for usability in this case, one that took extensive internal debate but led to a well-researched and wise decision.

Links

We stuck with underlined links to maximize usability, rather than using scripts or style sheets to turn off underlines. We did select black for our link color, which, while not the most usable for finding links, was the most reader-friendly in the context of content passages. Readability trumped usability in this case, and the decision has not only made pages easier to read but kept the design handsome as well.

Forms

Most forms on the site were set in basic two-column formats, with instructions on the left and form elements (text inputs, checkboxes, submit buttons) on the right. To add a touch of style without a heavy hand, light gray horizontal lines were placed in between sections of the form:

Economist.com’s registration and user administration pages were set in a different style from the site’s article displays. Analyzing the purpose and requirements of a registration page, I decided registration and subscription signups needed to minimize the distractions on the page. I wanted to keep the focus on the signup process, which is often perceived by users as burdensome. That led me to kill most of the supplemental content and navigation, and it also meant we could not place advertising on these pages, a move I still find myself defending on occasion. As registration is fairly labor-intensive and often discouraging, I considered it essential to not give the user any encouragement to abort the process.

Stripping out all these elements meant we needed a different page layout to emphasize the content and compensate for the minimal available options. I designed a page identical to the rest of the site but without the entire right-hand column; we also deleted the status bar and search form, leaving the page at its bare essentials:

This design was placed in all administrative pages, and it also became our template for pop-up content windows.

Search

Our search pages posed a complex problem, as the search engine was considered an important tool for research-hungry Economist.com users. We licensed Northern Light to be our search engine so they could manage our pay-per-view article searches and offer EIU content along with Economist archives. Their data included Economist article archives with context-sensitive search results (keywords found in both headlines and content, sortable by date or relevancy) as well as data from the EIU, our sister division and research arm. Therefore, our search page needed to toggle between options without confusing the users. We settled on a drop-down menu listing the available selections, a style that would come in handy listing in-category options on other pages.

The columnar layout of the site lent itself well to including Northern Light’s options down the right-hand side of the page, leaving the center section clear for the search results. The results themselves were initially placed in a multiple-celled table, to capitalize on the amount of data the search form produced, but we soon pared down the display to a more standard title-summary-date setup. The advanced search page was left as a simple form design.

URLs

We also had intense discussions over the way we should establish the site’s addresses. Economist.com had plans for marketing its mobile editions, executive site, and other projects. Up for grabs were the addresses: http://globalexecutive.economist.com or http://www.economist.com/globalexecutive. Which of these made more sense to the average user?

Each one had its benefits: the former is shorter and more of a distinct departure from the main site, while the latter is more self-explanatory and may be less confusing to non-Web-savvy readers who see an offline ad campaign.

While business development lobbied hard for subdomains, arguing that short URLs worked best, the technical team had a steadfast preference for subdirectories, and the intuitiveness of the /area style became the Economist.com naming convention. This eventually carried through to all our sections, including the cities and countries areas when they launched.

---

Excerpted from Usability: The Site Speaks for Itself by Kelly Braun, Max Gadney, Matthew Haughey, Molly E. Holzschlag, Bruce Lawson, Adrian Roselli, Don Synstelien, Tom Walter and David Wertheimer. Published in June 2002 by Glasshaus. Copyright © 2002 by Glasshaus. Used by permission from Glasshaus.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Redesign, Web Design