ESPN.com, the online sister of the ESPN cable networks, serves up more than half a billion page views every month, so when the home page of the site dropped all layout tables in favor of structural markup and CSS-driven layout, the Web design community took notice. To add to the intrigue, the site's design is (as of this writing) being adjusted over time, so that the site is in effect making the latter stages of its redesign process public. For a personal site to do such a thing is rare enough; for a major commercial site to do it would have been almost unimaginable.

The DevEdge team was as fascinated as everyone else, so we asked Associate Art Director Mike Davidson a series of interview questions via e-mail. We were so thrilled by his detailed answers, we decided to to split the interview into two parts rather than be forced to make major cuts for length. In this first part, Mike talks about the benefits of the new design, selling management on the move, browser testing, the ethics of upgrade requirements, and more.

How much traffic does ESPN.com get, on average? How does that traffic break down in terms of browser versions?

Our traffic fluctuates with popular sports being in or out of season, but throughout the year, we get anywhere from about 1 to 1.3 billion page views per month. This is for all ESPN-owned sites. For just our site on the ESPN.com domain, we average anywhere from about a half a billion to 950 million page views per month.

For the month before our redesign, we calculated that 97.44% of our users were using standards-compliant browsers (IE 5+, Netscape 6+, Mozilla, Opera 6+, Safari, Chimera, and Konqueror), and the rest were either non-detectable or using non-compliant browsers. The only substantial groups among the non-compliant browsers were IE 4.x at 1.32% and Netscape 4.x at 1.17%. The other .05% of our users were either undetectable or were using obscure or masked user agents.

What were the primary factors behind your decision to move away from table-based layout?

The number one factor was forward compatibility, a term I first heard used by Jeffrey Zeldman. For most of the '90s and the first part of this decade, content providers who wanted to publish online only needed to worry about the graphical web browser. Sure, we had to craft our content so that it presented itself well in many different brands and flavors of browsers, but it never went further than browsers.

Because the competitive landscape of the web is such that the site which looks and works best gets the most traffic, developers and designers put a premium on the presentation of that content and let structural markup take a back seat. Through a dizzying array of table tricks, transparent spacer images, and JavaScript hacks, we found a way to make things look great to the human eye through the window of a graphical web browser without worrying about what everything looked like under the hood. Now that digital lifestyle devices, tablets, wireless phones, and other Internet appliances are beginning to come of age, we need to worry about presenting our content to these devices so that it is optimized for their display capabilities. Do we want to send a 100KB index page full of Flash, images, and tables to a small wireless device or would we rather send them our top story, our top headlines, and essential navigation to get through our site? By separating our content pieces in a logical way rather than a graphical way, we are free to restyle this content for any device which supports open standards.

The second big factor in our decision was staying ahead of the curve. ESPN is the number one online sports property in the world because we do things first. We were the first 24 hour sports channel, we were the first major sports property to go online in any significant way, we are usually first to report breaking sports news, and this was just another example of a way for us to raise the bar and help lead our industry to a higher online publishing standard. For us, embracing open standards and dropping support for proprietary code was clearly the right thing to do... the only question was, was it the right time to do it yet?

Basically, we could have done [the redesign] now, or we could have waited two years until our next redesign. Doing it now keeps us ahead of the curve, while only potentially risking about 2% of our online audience. Doing it in two years may put us behind our competitors. We fully expect our competitors to join us in embracing open standards with their next redesigns. Our spy planes haven't produced any illuminating photos yet so we can't say exactly when that will be.

Did you have a tough time selling the move to marketing and management people?

This actually proved to be the easiest part of the whole undertaking. I had written a "Jerry Maguire" letter of sorts during the summer of 2002 to management outlining everything I thought we were doing wrong and what could be done to improve each situation. The letter covered things like overzealous advertising placement, popups, indexability, dynamic publishing, and open standards. The section about moving from table-based layouts to standards-based layouts was relatively short and used language like "accessibility," "load time improvement," and "economies of scale." I could have written 10 pages on browsers and standards and bored all of our suits to death, but I found that speaking to them in terms they understood and already appreciated was the best way to educate everyone on why we needed to do this. Everyone agreed that embracing standards was the right thing to do, and the only downside which needed further exploration was how many users of older browsers would be negatively affected by our proposed change. When we saw that only 2% of our users were not equipped with standards-compliant browsers, the decision was a relative slam dunk.

The first important part of this statistic is that the 2% number is only going to go down. Old browsers have been working their way out of the public consciousness for a few years now and we feel there is no risk whatsoever in this number ever going up. All substantial browsers which have been released in the last few years support open standards, and these days, you can't even release a new browser without it supporting standards or else no one will use it.

The second important part of this statistic is that if you are in this 2% group, it is physically possible to get out of this group by upgrading your browser or petitioning your IT department to upgrade your browser. It's not the same as the decision some sites make to not support Macintosh users. If you use a Macintosh (like I do), your only solution to get into a non-Macintosh friendly site is to physically buy another machine. The simple fact is that most of our 2% of users who still use Netscape 4 or IE 4 only do so out of upgrade anxiety, naivet, or laziness. As an influential site on the web, we want to help them overcome their inertia on this situation. In fact, we feel we are doing them a favor by getting them up to date.

What are the advantages of the new design, as compared to your old design?

Too many to list, really. Here are several major ones:

1. Less code and faster loading pages. We reduced the size of our front page code by about 50%, and by using absolute positioning, we are able to display important parts of the page before other parts may have fully loaded yet.
2. More modular content display. By separating our content logically, using divs, instead of presentationally, using tables, we can have one piece of content in our CMS [content management system] which is styled differently by every page on which it appears. A good example of this is if we had a content module which contained ten common news headlines, but it needed to fit in a 200 pixel wide blue area on one page and a 400 pixel wide grey area on another page.
3. Greater user control over content display. Although our front page is the only page which has been converted over standards-based code [as of March 2003], our new story pages are on the way. With these new pages, users will have control over font, size, and leading of all body copy and their preference will be cookied and used throughout every other story page. It is amazing to me that more major sites are not already offering this as it makes a clear readability difference for some people. Sometimes I feel like I could read entire phonebook cover-to-cover if it was styled in 11px Verdana with generous leading, but often I lose interest in even the shortest of articles if the type display is sloppy or otherwise bothersome to me. I know I'm probably more hypercritical of stuff like that than the population at large, but the point is that we'd like to put the user in control wherever possible.
4. It's just the right thing to do. Writing old school HTML code was never very much fun but now it's getting downright tedious for most people. Furthermore, when the people who are actually writing the code read about open standards and realize what they are currently doing goes against where the industry is moving, they lose motivation to use tables and take an interest in structural markup. Workers in the web development industry are always looking to stay ahead of the development curve so their skills don't become obsolete. By giving them a way to further their skillsets and write next-generation code on one of the most visited sites in the world, we are helping them become the best designers, developers, and producers they can be.

In which browsers did you test your new design?

Our backbone of browsers to test on during initial design stage was IE 5+ (Mac and PC), Netscape 6+ (Mac and PC), and Mozilla 1+ (Mac and PC). After the newest version of Opera and the Apple Safari beta came out, we tested on these as well and no adjustments whatsoever were needed. The new site simply worked right out of the box. Chad Robertsour other Associate Art Director, whom I co-wrote the front page withand I didn't fully realize the significance of what we had accomplished until we saw a beta product (Safari) render our front page with the same pixel precision as the browsers we had already tested on. Standards purists always recommend that you don't design with pixel precision, but we have done just that... with no code forking, no alternate stylesheets, and no box model hacks.

You've chosen to block old browsers from accessing the site. Why is that?

Before I answer that, I want to make the distinction that there is a huge difference between those who won't use a standards-compliant graphical browser and those who can't use one. An example of someone in the first group is a dogged Netscape/IE 4 user who is just so used to his or her browser that they feel no need to upgrade. An example of someone in the second group is a visually-impaired person.

For better or for worse, we have every right to not consider the non-upgrader person in our design decisions. ESPN.com allows customers, free-of-charge, to use our vast online sports resource in exchange for one thing: exposure to advertising and sponsorships. This is how TV works, and this is also basically how newspapers and magazines work as well. By embracing standards as we have done, and dropping support for those who choose not to support standards, we are free to produce pages with leaner code, better advertising opportunities, and an overall better user experience. To the extent that we can put our limited resources to work producing a greater quantity of pages, which load faster, and look better to 98% of our viewers, we feel we have the right to make that choice.

Now, with regards to the second group of people, which includes the disabled, we feel a strong social responsibility to support this group. Our old site did not have very good support for the disabled, but our new site should soon have much better support. With all of our content in divs now, we can hide all but the relevant chunks of content and navigation with a simple alternate CSS file. This benefit alone is enough to make up for irking our tiny percentage of upgradophobic Netscape/IE 4 users.

There is a third group worth mentioning and that is the group of people on machines which are "locked down" by IT staff and thus not upgradeable. This group poses the toughest question for us because we know they want to upgrade, but they really can't. Though we obviously don't feel any ill will towards these people, we feel that as an hugely influential site, we are doing these people a favor in the long run by insisting on standards. Once other media sites follow and then smaller sites after that, it will really be a requirement that IT departments supply their workers with standards-compliant browsers.

It really should be a requirement already, but it's not, because web sites have always held out that little corner of the security blanket and said, "We still support you! We still love you!" Well, in our mind, this is just a little tough love, that's all. We have a saying here at ESPN when something goes wrong or a server goes down.. It goes something like this: "This is not a hospital, we are not doctors here... people aren't dying. The worst thing that is going to happen is that people won't get their sports." For the tiny percentage of people who are negatively affected by our embracing of standards, they can just get their sports somewhere else in the meantime. It's not like we're denying them hospital care.

The decision to redirect proprietary non-compliant browsers to our upgrade page has always been primarily about education. The fact is, most people who are still using these browsers are simply unaware of their deficiencies. No one has ever told them otherwise, so they figure the rest of the world uses the same browser they do. In fact, some of these people, judging from the e-mails we get, don't even really know what a browser is... and that's fine. If we can do them a favor by telling them how to improve their experience on the ESPN and the rest of the Internet, then why shouldn't we? We are a bit cocky over here so we feel that people should of course invest the 5 or 10 minutes it takes to upgrade in order to view our site, but hey, if worse comes to worst, there are several other places they can get sports information from. We hope they don't go elsewhere, but if they do, we just want them to realize that eventually these same sites will begin to look bad in their current browser.

Why not just let the older browsers see less styled (or unstyled) content?

There are other technical reasons why we don't offer an unstyled page to Netscape 4.x users, mostly related to dynamically written out content, but a lot also comes down to the fact that the success of our site depends largely on the presentation of our content. We'd rather assertively tell you why your browser needs to be updated than show you an ugly shadow of our front page and have you assume we did something wrong. Dan Benshoff, our top creative brass, and John Skipper, our senior executive VP, have always put a premium on presentation of content, and anything short of best in our industry will not fly. Sometimes people just won't upgrade unless they feel they really need to. We feel honored to help create this need.

Part 2>>