Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Disconnected: ESPN's CSS Redesign Upgrade Page

21 Feb 2003 by

So, ESPN redesigned their site using mostly standards-compliant CSS layout techniques. Good for them. They even put together a custom browser upgrade page with links to the latest browsers for those who aren’t using standards compliant browsers. They even let you send them a note if you feel you reached this page in error. That’s smart contingency design. But, a quick read of the upgrade page provides a perfect example of the huge disconnect that still exists between the common-person and people who design web sites.

The upgrade page talks about “standards-compliant browsers,” “standards-compliant code,” “open standards,” “performs more consistently,” and “non-compliant browsers.” What does this jargon mean to the 2% of the people who will see this page? And, keep in mind that the 2% of the people who see this page will probably be the least technically inclined of their visitors (otherwise they probably would have upgraded their browser long ago).

Bad copywriting is the biggest cancer on the web today, and ESPN continues that tradition by lathering on the jargon and washing away the simple, easy-to-understand language that is required at a critical contingency design crisis point. If you are going to ask someone to do something, you better speak their language and put things in their perspective.

46 comments so far (Post a Comment)

21 Feb 2003 | drake said...


As someone who has been a part of high-traffic websites, I can assure you that of the 2% of the people who were lucky enough to vistit that page, probably 1% of them will actually read those paragraphs.

They'll read the bold headline and just start clicking the links below...

21 Feb 2003 | JF said...

If only 1% of the people are going to read the paragraphs, then they shouldn't be there in the first place. The page was clearly not written for the target.

21 Feb 2003 | Jim Jones said...

Their Flash promo for ESPN Motion also uses typographically incorrect apostrophes in Akzidenz Grotesk.

21 Feb 2003 | Xavier said...

Waiting for the 37BetterBrowserUpgradeMessage... ;-)

21 Feb 2003 | Will said...

They've shut me out completely -- the new homepage won't load properly on my fairly compliant browser (IE 5.0 Mac OS 9.2). All I get is the header and right sidebar, everything else blank... no help, no messages... off to cnnsi I go...

21 Feb 2003 | Benjy said...

While I commend ESPN on their compliance with web standards, the design itself and the flash promo for ESPN Motion pisses me off! What gives with the techno music! And even if you mute it, they don't remember preferences so you still get the music the next time.

They bill the redesign as "part TV, part Internet, all good!" If I wanted part TV and part Internet, I'd have signed up for WebTV.

The site just has too much going, too many colors, eats too much bandwidth, it's all that people thought was cool in 2000 but that in reality made the internet detrimentally dificult to use.

Will all of the information that a sports site like ESPN needs to present, the effort needs to be on usability and information architecture, so that info is displayed in a manner people can quickly access and easily understand. They don't need to be trying to blow people away with wiz bang motion graphics and music!

21 Feb 2003 | pb said...

I'm waiting for the 37BetterYodlee.

I go back and forth on wondering if a Yodlee-like service will ever amount to much and I'm currently on the up-swing. However, the Yodlee design seems quite stale and focused. What I'd like to see is a combination of very nice, efficient design with a lot of thought put in to which data sources are most common and how the best way to organize and present them would be. The four main categories I'd like to see are Frequent -er Accounts, Asset Accounts, Transaction Accounts and Bills.

21 Feb 2003 | Joshua Kaufman said...

Excellent points, Jason. Well said.

22 Feb 2003 | Drew said...


works great for me.
IE5.1.6, OS 9.2

It's a big step in the right direction.

Some bigger sites will lead, others will follow.

It would be nice if they would have "ESPN is changed, here's why . . ." type of page.
I like those pages, dammit.

22 Feb 2003 | Jesper said...

On a related note;

How many people know what "Contingency design" means? :)

22 Feb 2003 | David said...

Re: "What does 'Contigency Design' mean?".

The wonderful thing about language is the possibility to concate words into labels that can denote complex concepts. Contigency Design, like object-oriented programming or activity-based accounting, is a label that enables us to discuss its ramifications and application without constantly having to redefine the founding ideas.

Labels aren't meant to be for the common man. You shouldn't write about contigency design on the pages your users are meant to see. It's a tool to be used among professionals and other interested parties.

22 Feb 2003 | Mike Davidson said...

Hi, Mike Davidson from ESPN here. Thanks for the healthy discussion on our redesign and our browser upgrade page. Here are my thoughts and responses on what's been written here so far:

1. Regarding the language used to explain outdated browsers to users: Yes, this is not quite perfect yet, but trying to explain in one or two simple paragraphs why someone's Netscape 4 browser is detrimental to the web is very challenging. The goal with this page was to make people aware that it is 2003 and they are in the *extreme* minority now, and it's very easy to get out of that minority by clicking on any of the links below. Sometimes I already feel like we wrote too much text for that page, and sometimes I feel like we wrote not enough. But to me, the important points still stand out pretty well... the statistic at the top, the pie chart on the left, and the upgrade links below.

2. Please keep in mind that we get about 10 million visits to our front page per day and only about 150,000 (about 1.5%) are getting redirected to this upgrade page. Clearly we would not have gone this route if the number was more like 10%.

3. One of the comments said "I can assure you that of the 2% of the people who were lucky enough to visit that page, probably 1% of them will actually read those paragraphs. They'll read the bold headline and just start clicking the links below...". If this happens, great! The most important thing that can happen after a user gets to this page is that they click on a link below. I'd love for them to really understand standards and browsers, but if they just start using a better browser, our mission is accomplished.

4. With regards to the Flash intro, that will only be the default mode for a week (ends Monday morning). ESPN Motion is a huge huge huge feature which we just want to make sure everybody knows about before they decide to download or not. I would have preferred to cookie it and only show it once per day per user, but hey, I don't run the company... I'm just an art director. So sit tight, the Flash intro with its non-smart quotes, will be gone before you know it.

5. As for people hoping for a more plain vanilla text-based sports information site, that simply isn't us. It never was and it never will be. CNN (TV and Web) has always been the vanilla, no personality, all facts, sports source. Fox (TV and Web) has always been the Flashy, over-the-top, lacking in substance sports source. And ESPN (TV and Web) has always been somewhere in the middle, providing plenty of information and the best editorial material, while still presenting it in an attractive package with a little bit of attitude... and that is why we're number one. (Sorry about the cheerleading... it's just true, that's all).

22 Feb 2003 | David said...

I just love it how "vanilla" equals "no personality" in the eyes of some...

22 Feb 2003 | Joseph McAndrews said...

Ummm, isn't 'no personality' the very definition of 'vanilla' when it is used in metaphor?

I totally agree. CNN has no personality at all. If I wanted my sports fed to me like I'm a 5-year old, I'd get it through them. I want just the right amount of edge, and that is what ESPN has.

22 Feb 2003 | JF said...

Thanks for posting, Mike! It's great to hear from the source. It's refreshing to see that a developer/company cares enough to respond to constructive criticism. If you need any help with the copywriting or other contingency design issues, feel free to get in touch.

22 Feb 2003 | brian said...

does anyone aside from me look @ sportsline? I read it as often as espn, but wondered why no one ever uses them as a comparison point.

also, am i the only person whose browser gets quirky when loading a page, and has trouble seeing the comments section? (I am using IE6 on XP), like they will flicker out, or stop displaying or not load initially, untill i highlight them...

22 Feb 2003 | just letting you know... said...

JF, that link pulls up a page not found.

22 Feb 2003 | nathan said...

I agree with Benjy, the Flash piece is gratuitous, and obnoxious (DIE TECHNO LOOP!)

As for the ESPN upgrade page:
1. Being dumped to an upgrade page stinks, especially when you follow a deep link in. Does the lite version detect which page i was trying to access and pass me through?

2. JF is right, the jargon and the amount of copy is overwhelming. The key failure here is that the user's question "what do i do next" is not readily answered. The "lite version" and the links to upgrading are not nearly clear enough. Worse still, the bold "upgrade" "FREE" and bold green (which is the link color) "free downloads" copy are the most visible text, but they are not links. In any case, I doubt that users will just "start clicking the links below" in a haphazard attempt to upgrade their browser...what's more likely is that they will assume something is wrong with ESPN.com.

3. The compliance % chart doesn't need to be there.

And as for the overall design? There is a wealth of news, commentary, schedules, scores, and statistics on ESPN.com, but they are buried under bad design. The site would benefit from focusing on user tasks and scenarios, for example:

"James usually surfs ESPN.com at work. On his busier days, he only has time to check the latest scores and breaking news. On his slower days, he browses sports commentary and forwards articles to friends."

Helping users achieve their goals and providing clear concise information does not mean the site has to be unbranded, text-only vanilla, or that Flash must be forbidden. It does mean however, that text should be readable, nav and headlines should be obvious, and that scores pages should never, ever, look like this (how do date headers help me when all the games happen on the same day?)

Anyway, kudos to the site's art director for being so open, most people in his position would play the "cover your a$$" game, and good luck to ESPN's continuing efforts.

22 Feb 2003 | Mike Davidson said...

Thanks for the comments, Nathan. Lots of good stuff there. Some responses:

1. I do think the Flash intro should be cookied and limited to one view per day per person, but keep in mind that ESPN Motion is a major launch for us and the Flash intro has netted us almost 1 million downloads of it in the first week already. That is unheard of for an installable Windows component like this. The numbers show that piece has done its job so far. It will not be the default tab selected after this weekend.

2. Following deep links will never redirect you to the upgrade page. The only way you'll ever get there is if you are using an ancient browser and you type in 'espn.com' or click a link to it.

3. Some good points about the copy. Based on feedback we get (including on blogs like this) we will retool and make it better. If anyone wants to give it a try, just let me know. I have no problems taking suggestions from the audience... as long as you don't want us to pay you or list your name :)

4. I disagree completely about the compliance chart. It absolutely does have to be in there. The simple fact is that people using Netscape 4 have no idea they are in such a minority and this chart tells them that visually without having to read.

5. Regarding the scoreboard pages, er, no comment. That's not my area of responsibility and I had 0% participation.

6. If I thought I had anything to cover my a$$ about as you say, I would probably be doing just that. I don't see any reason for that though. We're pretty proud of all we've been able to accomplish with this latest redesign.

24 Feb 2003 | ek said...

I've been to the site about 10 times since the whole "motion" launch and I've yet to sit through it and still really don't know what it's all about. I just click on the "NBA" link to get to the stuff that I actually want. That or I go to Yahoo Sports.

To be frank, I don't think anyone really gives a damn except for the people who designed/developed it. As an audience member, if I can't figure out whether or not a new feature is of benefit to me within about seven seconds I pass it by.

24 Feb 2003 | Bill Brown said...

I agree completely with JF's criticism about the copy on the browser upgrade page. Most users won't give a damn about standards, if that even makes any sense to them at all.

I would've given a case for the benefits of such an upgrade:

"We notice that you're using an older browser. You may have noticed while surfing the Web recently that a lot of sites look strange or poorly designed. Old browsers like yours don't understand the more modern, sophisticated code used by many sites—including ours."

"Don't worry, though, because this can be quickly fixed by clicking on one of the links below to get a newer version of your browser—or you can check out some of the other browsers offered for your computer. Once you upgrade, check out some of your favorite sites and see them as their designers intended."

24 Feb 2003 | JF said...

I disagree completely about the compliance chart. It absolutely does have to be in there. The simple fact is that people using Netscape 4 have no idea they are in such a minority and this chart tells them that visually without having to read.

Right, but the problem is that the chart says "97.8% of our visitors are using a standards-compliant browser." What does "standards-compliant" mean? I'm not exactly sure what it means and I do this for a living. It's tough to be persuasive when you're using a term that is foreign to many people -- especially the people who are seeing the upgrade page.

24 Feb 2003 | Darrel said...

Why have an upgrade page at all? If you went all CSS on the site, why not just dump plain-jane HTML on the folks with old browsers? Let *them* decide if they are missing out on the 'personality' that the newer browsers get.

Why force it upon people?

24 Feb 2003 | Darrel said...

BTW, Mike...your portfolio site pops-up samples in a forced full-screen mode, which means all of your portfolio pieces are split in half on my dual monitor set up.

24 Feb 2003 | alisha said...

"...which means all of your portfolio pieces are split in half on my dual monitor set up."
---
yea, the .00003% dual monitor users are getting screwed! (hehe - sorry Darrel, I couldnt resist ;-) )

24 Feb 2003 | George Olsen said...

I think the key problem is the jargony "web standards" reference, which non-developers won't understand.

Bill Brown showed the right approach, which is focusing on the consequences of non-compliance -- things may not look/perform correctly.

BTW, a lot of "old browser" messages I've seen take the wrong approach -- i.e. "hey user, you've got an antiqued browser, get with the program."

When I switched my own site over an all-CSS (NS4.x compatible!) layout two years ago, I took the approach of telling people on ancient browsers that while the site would look much better on current browsers, it should be accessible to any browser. (Yeah, I referred to "web standards." Live and learn....) It was a nudge rather than a smack in the face.

'Course you have to design your site so it degrades gracefully to plain HTML, which is actually easier said than done. Trying to order columns so that main content comes before sidebar material can be a real pain due to CSS layout support problems in WinIE5.x.

25 Feb 2003 | Darrel said...

yea, the .00003% dual monitor users are getting screwed! (hehe - sorry Darrel, I couldnt resist ;-) )

You'd be surprised at how many web developers use dual monitor set ups. So, I'm guessing the percentage goes up quite a bit when targeting them. Since he's showing a web design portfolio, I thought it may be relevant...but yea, I know...I'm in the minority ;o)

(And, to be fair, dual monitor setups work flawlessly on Macs...it's these 3rd party add-on cards for Windows that seem to screw things up more than anything...)

25 Feb 2003 | Mike Davidson said...

Darrel,

Thanks for the heads-up about the dual-monitor weirdness. I was actually going to do something about it until you mentioned it only happens on crappy dual-monitor PC cards. Not sure what I could do to get around that.

By the way, as a result of the excellent comments on this board as well as others, I have redesigned and rewrote the upgrade page. It is live at this location.

It's still not perfect, but here's what's improved:

1. Now we detect your system and only give you the browsers which fit your setup.

2. The browser upgrade panel is now in the upper left corner of the screen for easy access and more exposure.

3. You are automatically defaulted to "the short answer" which is an extremely simplistic explanation of why you should upgrade. Clearly, the more technical people in our audience will want a more complete answer so we've provided a link to the "long answer" at the bottom of the short answer.

4. We felt it was important to leave the "long answer" off of the default page which users see because it looks overwhelming to read if you aren't already interested in it.

5. The three key selling points for why we have gone with open-standards are now front and center.

Thanks to everyone for the suggestions, and we'll continue to tweak this page as we see fit.

25 Feb 2003 | Darrel said...

Not sure what I could do to get around that.

Umm...don't assume I want you to take over my entire screen with your web page? ;o)

(I just despise maximized web pages...don't take it personally!)

26 Feb 2003 | Caio Chassot said...

I abhor web pages taking up my entire screen too. I don't think one needs a dual monitor setup to hate them, simply using anything larger than 1024x768 is enough.

I never saw the original text, but I feel about the new one that:
1) The short answer is too long and technical
2) The long answer is too short and could point to a few more technical details
3) The download links on the left are easy to miss. I begun reading the content, and only after the text mentioned their existence I noticed them on the left (and still wondered, "what left" for a second)

And lastly, I acknowledge it's damn hard to write a text telling people that something's wrong with their browser or that they should upgrade... but we gotta get it right someday.

26 Feb 2003 | Nick said...

So, the ESPN.com site was redesigned with CSS, great, but how much CSS did they really use? I did some testing and found their implementation to be poor. I could not load the site in a PDA, Cell Phone, WebTV or older browsers. In contrast, Wired News, which also uses a CSS layout, loaded fine in the PDA, Cell Phone, WebTV and older browsers (though, I admit the layout was simply not present, yet the user could still access everything they needed to). I don't think the developers of ESPN.com really did any testing for these kinds of things. How many users do you think check for their favorite team's score via a PDA... my guess is "enough to matter." In contrast, I did some user surveying... I found that 1 out of 5 loyal ESPN.com users like the new look and feel and CSS layout. the other 4 can't stand the layout and/or are having problems viewing the page. Food for thought.

- Nick

26 Feb 2003 | Darrel said...

That's a good point, Nick. One of the reasons TOO use CSS is so that you CAN accomodate older browsers, albeit perhaps not with the same nice look and feel.

In this case, it seems to be a case of 'we want the site to look exactly like this' period. As such, they put the visual designers look-and-feel ahead of the user's need to get at information.

I'm not saying that was a right or wrong decision. It was just a decision.

26 Feb 2003 | Caio Chassot said...

WRT nick's post, simply using css doesn't make your design good design or accessible design. On the other hand, there's not much to praise about espn if they dropped a screwed up technology in favor of a screwed up implementation of an otherwise good technology.

They state on those "get yourself a new browser" pages that the reason they moved to standards-compliant code is for faster production, ease of update and ability to deliver more content. It's not to make the site nice to PDAs. It's a development-oriented decision. It's good, yes, we developers all know it, but it'd be better if they also aided the users, which is considerably easy to do since you're already adpoting these standards.

And for 37signals, I believe you are aware that in IE6/win (2k here) this textarea expands on the first keypress. IIRC, you can easily get around it by wrapping it in a div with a explictly declared width of 100%.

26 Feb 2003 | SU said...

And for 37signals, I believe you are aware that in IE6/win (2k here) this textarea expands on the first keypress. IIRC, you can easily get around it by wrapping it in a div with a explictly declared width of 100%.

That seems to work, Caio. Thanks for the tip (although it's a really odd bug in the first place).

26 Feb 2003 | Mike Davidson said...

Nick,

We have always had a loyal base of users visiting our site through pocket.espn.go.com. We are one of the only companies to offer such a huge amount of our content formatted for viewing on PocketPCs and other non-browser devices. Most Pocket PC users know how to get to this version of our site because this is the URL which is linked from almost every Pocket PC content provider. Additionally, we have a javascript redirect so that if you type in 'espn.com' into your PocketPC, you will be taken there.

If you're trying to pick us apart for not having a redirect like this in every single page of our site, including http://espn.go.com/main.html (our main page), then just keep pickin' I guess... it's not a huge concern of ours as eventually all pages will degrade well on PDAs (not just PocketPCs) once we get the rest of the site converted.

As for your survey of loyal ESPN users, not sure how you conducted that, but over here we do it scientifically and statistically. Our traffic is up since the relaunch, we have almost 1 million installations of ESPN Motion so far (blowing away all estimates), and the general consensus we've heard around the industry is that everyone is scrambling to catch up.

We appreciate your healthy cynicism about the redesign. It is little details like this which keep us on our toes, but according to public reaction so far, we feel we've made a huge improvement here and it only keeps getting better with every daily change.

P.S. I sent you a lengthy e-mail regarding this yesterday... let me know if you didn't get it.

26 Feb 2003 | Dan said...

I was particularly tickled by being told that my browser was not one of the modern browsers and that I should upgrade, and then look down to the suggested browsers list, and see my browser listed (Safari).

When you (the proverbial 'you') tell me I'm a lamer for specific reason, make sure you check the facts first.

Classic.

26 Feb 2003 | pwl said...

I find this fascinating. Over the past year and a half, I have e-mailed ESPN on a number of occasions to complain about how the their site gave me nothing but gibberish in my browser (sometimes IE 5 Mac, sometimes Mozilla 1.x Mac). Their responses were not very...responsive -- sometimes they were plain insulting. As for their latest move, I applaud it.

26 Feb 2003 | jack said...

Dan, you are a lamer specifically for:
Opening the link to the browser upgrade page and thinking that it was ESPN's homepage
Posting message here thinking that you "got" one over Mike Davidson.

Try going to www.espn.com and tell me if you get redirected to the browser page. I doesn't happen to me in Safari.

On another note. I feel for you, Mike Davidson, for being thrown to the wolves like this. You don't deserve it.

26 Feb 2003 | ek said...

Not kissing up here, but I think it's great that Mike Davidson has joined in this discussion and has actually applied some of the feedback provided here.

How many other developers from major sites/companies would do that?

Personally, the Motion thing is not my cup of tea, but I may well be in the minority (I liked 'Solaris' so I must be weird).

26 Feb 2003 | Andrew Flynn said...

Love the thread so far. In fact I was investigating sites to include in a presentation to have our organization's next effort separate content from presentation using XHTML and CSS the day the switch was made. I've been a loyal ESPN.com reader since '97, and they've always been ahead of the curve, both with content and code. Congrats Mike (and team) on another great effort!

One question, though. Have you conducted any studies into the relationship of common IP addresses of redirected browsers? The reason I ask is that on our traffic logs, a lot of hits from older browsers are all sharing the same or similar IP's. We determined that Netscape 4.7 was an entire corporation's "standard-issue" browser, and it was against their IT department's policy to download something new and shiny. Are you finding this to be the case, or is your traffic too diverse to come to this conclusion?

27 Feb 2003 | Dan said...

Jack says "On another note. I feel for you, Mike Davidson, for being thrown to the wolves like this. You don't deserve it"

Perhaps not, but you deserve credit for taking it like a man. After all, you don't even have to post a comment here, and read what others wrote.

Now, I don't think I've ever been on a commercial web app/site project where this sort of thing didn't happen (via form postings or direct emails from people). The thing you build is never good enough (try creating a DHTML bond trading app that supports Nav 4.7).

Also, 'jack' says 'lamer' re: me, and was right.

27 Feb 2003 | Darrel said...

If you design something, then you certainly should be able to take critique. Whether it is unfounded critique is really besides the point. I think the biggest failing of many designers (and design directors, for that matter) is an inability to take or give critique.

I think Mike took it fairly well--right or wrong, he had explanations for ESPN's decisions.

27 Feb 2003 | JC said...

Well, one note on the million plus downloads... it counted me, but I didn't get the thing. I'm sure that's the case for others, as well. I went to the link, yes, expecting some sort of simple plugin... then I actually read the page and saw it was a download that I'd have to install, and worse, would be sitting there in my system tray sucking up resources.

If the technology's what I think it is, though, it's very cool stuff, a fellow I who owns a video production company is in the process of redoing one of Notre Dame's magazines using a similar solution.

27 Feb 2003 | Mike Davidson said...

Hey, I don't mind a little constructive criticism, and I don't consider the discourse on this board "getting beaten down" at all.

It is clear to us that as far as our audience goes, the redesign has been a success so far... but people who post on blogs like this often have deeper insights than the general happy-go-lucky web-surfing public, and that is why I take such an interest in reading these posts.

There are purists to whom anything short of strict validation and compatibility with Lynx 1.0 will not do, but honestly, these people don't pay our bills and they rarely practice what they preach anyway. Two prominent members of the purist community, who shall remain nameless, sent me separate e-mails which contained criticism about our pages not validating on the w3.org validator. Well guess what? Each listed a site at the end of their e-mail for which they were in charge of and neither validated.

I don't think any less of these people's excellent sites because they don't validate... I just think a little less about the validation process. For instance, one of the things on the front page of ESPN.com right now which "doesn't validate" is an ampersand in a query string for our ad server (which appears in some javascript code). So because our ad server needs us to send it variables, our site cannot validate? C'mon.

Zeldman wrote today that only 6.5% of W3C member sites validate. That speaks volumes...

By the way, JC, the million plus downloads does not include you. We only count you when you have physically downloaded the installer to your machine. Motion clearly is not for everyone... heck, to me, it's kind of a little bit of a novelty. Only time will tell if it catches on or fizzles out.

12 Mar 2003 | Lee Coursey said...

David,

I love the upgrade. As a person who works with clients to obtain compliance and as a sports enthusiast I have enjoyed the new ESPN Motion more than I ever thought I would. I was a little annoyed at first with the downloads, but I soon got over it when I missed one and got to go back and see it in the list.

As far as the wording on the compliance page, you techies need to take a little less computer science and a little more marketing into your perspective. The web isn't just for us nerds anymore, it's for the masses, and the masses don't know diddly.

Thanks for being cutting edge in at least getting some compliance at a major traffic site. Hopefully you guys will set the bar for other major traffic pullers.

13 Dec 2003 | free gambling casino said...

Very good

Comments on this post are closed

 
Back to Top ^