the month prior to launching its new design, around 97 percent of visitors arrived using some form of compliant browser (IE 5+, Netscape 6+, Mozilla, Opera 6+, Safari, Chimera, and Konqueror), the remain- ing 3 percent being either undetectable or noncompliant. Combined with projected bandwidth savings of 730 terabytes (TB) a year, promises of lowered mainte- nance costs, faster story turnarounds, and more adaptable page layouts, the team had enough evidence to convince the suits at the top that their plan was a good one. The new site would be cost-effective, attractive, maintainable, forward-thinking, and the first step in embracing a Web standards–based future. Interviewing the Designer Mike Davidson is Senior Associate Art Director and Manager of Media Product Development at the Walt Disney Internet Group, in Seattle. In 2003, as Associate Art Director of ESPN, he was a driving force behind the ESPN.com redesign. Q: First off, Mike, are you pleased with how things have turned out? A: Absolutely. Running a site as big as ESPN is not a question of getting a redesign done and then throwing it on autopilot. I would say that the majority of Web sites out there need very little “rejigging” on a daily basis because usually only text and other simple data is changing. But with ESPN, entire sections change on a weekly basis. And formats change several times a year. New sponsorships can completely change the way a certain page grid is laid out. The list goes on and on. We work in an environment that must act swiftly to adapt to changes in our industry and every “redesign” is just a big fresh start every two to three years. We measure how pleased we are with any given redesign by how far forward it propels us past our competitors and past where we were before. The 2003 redesign, now almost two years old, propelled us into the world of Web standards awareness and browser agnosticism. Everyone who works on the site now thinks in those terms. It’s no longer “make sure it works in IE,” but rather “make sure it’s coded correctly.” With well over 100 people on staff contribut- ing to the site, we knew we couldn’t get everything perfect, and likely never will, but as these last couple of years have gone by, we’re getting it more and more right every day. Q: Which bit of the design is the internal team most pleased with? And which part are the site’s visitors most pleased with? A: The most important achievement to us was simply changing the way we think about code. It’s no longer acceptable for a newbie to come in, hack together a table, and throw it onto the site for the sake of speed. We indeed do things sometimes for the sake of speed, but there is a certain level of pride now in doing things right first, and fast second. That said, a news site will always be driven by business objectives first (which include timeliness), but to the extent that technical teams can produce great work without sacrificing that timeliness, we are well ahead of the game. As far as visitor benefits go, the originality of layouts we provide has always been tops in the industry, in my opinion. We have three major publishing modes for our front page, depending on how big a certain news event is, and users appreciate the importance-based design we give them. Why show users an 18-point plain black headline for a regular-season NBA game report and the same treatment for when the Red Sox win their first World Series in a million years? 206 Chapter 6 08_588338 ch06.qxd 6/22/05 11:25 AM Page 206 Importance-based design has been evident in newspapers for centuries, and through the magic of CSS-P, it’s available on ESPN.com as well. Q: How long had the idea for using standards-based design been in your mind before it got the green light? A: About a year. We tend to plan our redesigns about a year out, so we got to thinking about this around the middle of 2002. One major complicating factor was that ESPN.com had been run out of Seattle (where I live) for its entire life, but the decision was made to relocate it to the ESPN head- quarters in Bristol, Connecticut, in the middle of 2003. So we pretty much started the redesign in Seattle and then ended it all the way across the country in Bristol. This included moving servers, employees, code, production facilities, and just about everything else. I’m a West Coast guy, so I elected to stay in Seattle and continue employment with ESPN’s parent company, Disney, but a good bit of the staff ended up relocating. We still help out on a lot of ESPN-related projects from the Seattle office, but it’s not a 100 percent time commitment anymore. Q: How much internal marketing did you have to do to convince, first, your own team, and, second, your bosses of the soundness of your plan? A: There was no internal marketing within the team as everyone agreed that it was the right thing to do, and honestly, there was very little convincing of the higher-ups necessary either. The tech- nology teams are paid to know what’s best for the site from a technology standpoint. So, as long as a move to standards-based design did not represent any extra costs or sacrifices in site features, then ESPN brass had no reason not to fully support it. In fact, this move actually reduced our costs by quite a bit and let us do more with the site, so it really wasn’t a tough argument to make. Executives might not care what a div or a spacer gif is, but they certainly do care about bandwidth bills and ad inventory. Q: Did you start by converting a small, sub-site of ESPN.com? Or did you leap straight in at the deep end and swap the high-profile front page over? And, regardless of your answer, can you explain your reasoning? A: ESPN.com is so enormous that you could never redesign the whole thing in one fell swoop and then just flip a switch when you were ready. Sure, everyone wants to do that, but it’s just not possible, given the tens of thousands of templates involved. We generally start with the front page, move on to the section index pages, and then do the story pages. I suppose it doesn’t matter too much which order this is done in, but the speed at which all pages can eventually be converted is important. We wanted to set an example with our most trafficked page that all other pages could be molded after. Q: Would you have done anything differently, looking back? A: Well, I don’t have veto power over every bit of the design/production process, so, obviously, not every decision made was mine, but I think we got most of the major things right. The one thing I guess that disappoints me a bit is how crufty things can get with time. Every time a major site redesigns (not just ours), code quality tends go down gradually until the next redesign. This occurs for many reasons: ❑ New people working on the site. ❑ Changing business needs require modified layouts. ❑ Advertising and sponsorship deals require less rigidity in layouts and more flexibility to put stuff wherever. ❑ Third-party tracking, survey, and ad code finds its way into the system. ❑ Documentation doesn’t stay current. ❑ New features need to be shoehorned in. 207 ESPN.com: Powerful Layout Changes 08_588338 ch06.qxd 6/22/05 11:25 AM Page 207 It’s an inescapable aspect of running a revenue-driven media site like ESPN, and we are just thankful for the opportunity every two to three years to assess what has changed, what’s needed for the future, and wipe the slate clean. With each wipe, things get exponentially better. Q: Has this success given you the appetite and the political power to convert more of ESPN’s on-line proper- ties to standards-based designs? A: Absolutely. Our group has been intimately involved in the standards-based redesigns of ABCNews.com, Disneyworld.com, Disneymeetings.com, Wideworldofsports.com, and other Disney properties as well. ESPN is a technology leader within our company and where they lead, other vertical markets tend to follow. Q: And finally, do you envision your competitors’ sites making similar changes in the near future, or do you think your site will remain unique within your industry for some time to come? A: You know what? When Eric Meyer interviewed me right after the ESPN redesign almost two years ago, I told him that I fully expected our competitors to be right behind us in the push toward Web standards. Unfortunately, that hasn’t happened. I won’t name names, but if you look at ESPN’s major competitors in the sports media space and ABCNews’s competitors in the mainstream media space, not a single one that I know of has dropped table-based design yet. Some of these companies have gone through two redesigns in the last two years, including as recently as January 2005, and still the same coding standards exist. I am not placing blame on any particular group since there are so many moving parts in most of these organizations, but it certainly would be nice to see some more progress. Oh well. Web sites are the sole property of their owners so those owners have the right to do with them as they please. Eventually, every- one will come around. And in the meantime, we’ll just keep moving ahead. Importance-Based Design One of the nicest things about EPSN.com’s new design is that there exists a mechanism for its editors to reformat the site in reaction to the importance of the news being presented. Mike Davidson refers to this per-article formatting as “importance-based design.” To clarify the need for this, consider one of his responses in the previous interview: We have three major publishing modes for our front page, depending on how big a certain news event is, and users appreciate the importance-based design we give them. Why show users an 18-point plain black headline for a regular season NBA game report and the same treatment for when the Red Sox win their first World Series in a million years? Importance- based design has been evident in newspapers for centuries, and through the magic of CSS-P, it’s available on ESPN.com as well. As Davidson says, this sort of thing has been around in newspapers for a very long time. Following are two examples from the sports section of The Daily Telegraph (Britain’s best-selling quality daily paper), showing the difference in layout that a “Holy Cow!” story can elicit. Figure 6-1 shows a normal day in the sports world, with no big story dominating the news. Figure 6-2 shows a cover from a special day, when Ellen MacCarthur broke the circumnavigation world record. The difference in layout, and, there- fore, the difference implied in the importance of the stories, is obvious. Now, let’s compare the newspaper’s implementation of importance-based design to ESPN.com’s own layout changes. The following section describes the three major publishing modes ESPN can call into play at any time: Regular, Skirmish, and War. 208 Chapter 6 08_588338 ch06.qxd 6/22/05 11:25 AM Page 208 Figure 6-1: An example of a newspaper cover in Regular mode 209 ESPN.com: Powerful Layout Changes 08_588338 ch06.qxd 6/22/05 11:25 AM Page 209 Figure 6-2: An example of a newspaper in War mode (Main photo copyright DPPI/ Offshore Challenges) 210 Chapter 6 08_588338 ch06.qxd 6/22/05 11:25 AM Page 210 Regular According to Davidson, “Regular mode gets published over 90 percent of the time and is for the most part completely automated. The editors select a photo, write a headline for it, and hit publish. It’s a very streamlined workflow. The Flash headline at the top automatically scales depending on how long of a headline we write.” Figure 6-3 shows an example. Skirmish “Skirmish mode occurs when there is a news item of great significance in the sports world,” Davidson said. “In this case, we generally know what’s going to happen ahead of time (for example, Ichiro [a base- ball player] breaking the all-time single-season hits record), so the photo-editing department spends a bit of time putting a composition together in Photoshop. Once the event occurs, we publish the site in Skirmish mode and through the magic of well-placed divs we take over the entire top story area with the hand-produced piece. Generally, all text in a Skirmish layout is set in Photoshop.” Figure 6-4 shows an example. Figure 6-3: The front page of ESPN.com in Regular mode 211 ESPN.com: Powerful Layout Changes 08_588338 ch06.qxd 6/22/05 11:25 AM Page 211 Figure 6-4: The front page of ESPN.com in Skirmish mode War According to Davidson, “The last publishing mode is what’s known as War mode and it is reserved for only the most important news events. The Red Sox winning the World Series, Dale Earnhardt dying, and the Super Bowl preview are all examples of when we’d publish in War mode. In this mode, a hand-com- posited Photoshop piece takes up almost the entire above-the-fold area of the screen, and browser text is laid on top of the right side of the photo.” Figure 6-5 shows an example. “People seem to like both War and Skirmish modes quite a bit but we use them sparingly to preserve their dramatic effect. Were ESPN designed with tables, features like War and Skirmish would not be pos- sible without negatively affecting other parts of the layout, but since the entire layout is CSS-P, every- thing slides around rather gracefully,” Davidson said. Putting It All Together So, we’ve learned that importance-based design has firm roots in traditional media, and we can see for ourselves that ESPN has used CSS to port this approach to the Web, but how exactly are they doing it? ❑ Their method must be simple and quick to apply, for it must be understood and easily imple- mented by non-technical staff. 212 Chapter 6 08_588338 ch06.qxd 6/22/05 11:25 AM Page 212 ❑ It must be future-proof and easily adaptable, for the site’s contents and structure may vary. ❑ It must be powerful, to transform a complex page so completely. Figure 6-5: The front page of ESPN.com in War mode 213 ESPN.com: Powerful Layout Changes 08_588338 ch06.qxd 6/22/05 11:25 AM Page 213 That sounds like quite a challenge, but as you’ll see in the next section there’s actually a very simple solution, and it’s a solution that you can start incorporating into your own sites right away. Love Your <body> You may have guessed from the clever title of this section that the key to ESPN’s secret is the body ele- ment. By assigning a unique id to the body element, the staff at ESPN is able to use it as a starting point to make sweeping style changes to a page. For example, to provide different headline sizes on Regular, Skirmish, and War pages, they might use these rules: body#regular h1 {font-size: 2em;} body#skirmish h1 {font-size: 4em;} body#war h1 {font-size: 8em;} Once these rules were in place, it would be up to the editorial staff to decide which publishing mode was applicable for that day’s headline. For example, let’s say someone new to the team decides to pub- lish an article in Regular mode; here’s what the (simplified) HTML might look like: <html> <body id=”regular”> <h1>No.1 Hit Wonder</h1> <p>Ichiro records his 258th hit of the season, breaking George Sisler’s 84-year-old record.</p> </body> </html> Figure 6-6 shows what that might look like in the browser. However, when the Editor-in-Chief reads the story he decides that someone breaking the all-time single- season hits record is deserved of being published in Skirmish mode. So, what does he do? Simple: He slaps the new guy upside the head and swaps the value of the body’s id attribute to skirmish. The out- come? The new guy learned a thing or two about his boss, and the CSS rules shown earlier transform the story’s headline, making it larger and visually more important: <html> <body id=”skirmish”> <h1>No.1 Hit Wonder</h1> <p>Ichiro records his 258th hit of the season, breaking George Sisler’s 84-year-old record.</p> </body> </html> Figure 6-7 shows what that might look like in the browser. Easy as pie. 214 Chapter 6 08_588338 ch06.qxd 6/22/05 11:25 AM Page 214 Figure 6-6: The story in Regular mode Figure 6-7: The story in Skirmish mode Now, as we’ve seen from the screen shots in Figures 6-3, 6-4, and 6-5, swapping between Regular, Skirmish, and War modes on ESPN.com does much more than just change the size of the headline. It restructures the whole top section of the site, moving navigation, submenus, and advertising panels to less-prominent positions and focusing attention on the main story. Figure 6-8 shows a side-by-side com- parison between Regular and War modes. 215 ESPN.com: Powerful Layout Changes 08_588338 ch06.qxd 6/22/05 11:25 AM Page 215 [...]... layout methods for a CSS- driven design At that time, Wired wasn’t the first redesign of its kind, but it was certainly the most highly trafficked The site’s chief designer, Douglas Bowman (see Chapter 3 for a discussion of his work on the Blogger.com redesign), took a highly visible and well-established brand, and delivered a compelling new design — all with standard technologies such as CSS and XHTML... help “lift the Web out of the dark ages” (Wired News, “A Site for Your Eyes”: www.wired.com/news/culture/0,1284,5 567 5,00.html) For the next few months, you could almost hear the crickets chirping Wired News had lifted style sheets out of the realm of academics and saber-waving standards advocates, and placed it squarely and confidently in the realm of mainstream media Until the Wired redesign, most companies... site We’ve also looked at CSS 3, the CSS of tomorrow, and glimpsed the power that its advanced selectors will bring to our work By obtaining an awareness of the high-end of CSS selectors, we’re not only preparing ourselves for tomorrow, but we’re also raising our expectations of the capabilities of CSS This, in turn, leads to a more inventive and adventurous approach to solving CSS issues In the next... href=”/about/”>About href=”/contact/”>Contact Figure 6- 12: Links styled yellow 221 Chapter 6 We hope you’ve spotted that adding class=”nav” to all four anchors is not the most efficient thing to do A much better approach would be to move the class application point up the document tree to the enclosing ul, and then alter the CSS rule to reflect the change (see Figure 6- 13): ul.nav li a {background-color: yellow;}... further up the document tree can have some major benefits for you That said, in all instances you’ll reach a point where moving the application point higher just doesn’t make any sense and will actually make your job more difficult It’s up to you to work out where that point is, and stop before you reach it For example, using our little list of navigation links from before, let’s say we wanted to style the... E::first-line Matches the first formatted line of an E element :first-line pseudo-class E::first-letter Matches the first formatted letter of an E element :first-letter pseudo-class E::selection Matches the portion of an E element that is currently highlighted/selected by the user UI element fragments pseudo-elements E::before Matches generated content before an E element :before pseudo-element E::after... So, the future holds a powerful new set of CSS selectors for us to use, enabling us to remove almost all instances of classes and ids from our markup Our HTML will be neater, our CSS will be more creative, and our sites will be truly skinnable 237 Chapter 6 Summar y In this chapter, we’ve seen the benefits that can come from applying class or ids high up in the document tree and how ESPN.com uses this... classes and ids in our documents has to be balanced against the abilities of today’s Web browsers in understanding advanced CSS selectors Sometimes we have no choice but to place classes on specific elements It’s not a failure on your part, it’s just a side effect of having to live and work in the real world However, it’s important that you retain some form of idealism This kind of forward thinking will... our Web browsers become more adept at understanding advanced CSS selectors In the coming years, we’ll be able to raise the application points for our CSS rules higher and higher until our HTML becomes almost devoid of the mass of classes and ids we rely on today A Glimpse into a Classless Future (Not a Socialist Manifesto) At the end of the previous section, we touched briefly on the notion of “forward... environment That document covers selectors not only from CSS Level 1 and 2, but also from Level 3, the 224 ESPN.com: Powerful Layout Changes CSS of tomorrow Some of today’s browsers (Firefox, Opera, Safari) already support bits of CSS Level 3 (:first-child and :last-child being two examples), but on the whole, that page tends only to disappoint the adventurous coder That said, it’s still an important document . treatment for when the Red Sox win their first World Series in a million years? 2 06 Chapter 6 08_588338 ch 06. qxd 6/ 22/05 11:25 AM Page 2 06 Importance-based design has been evident in newspapers for. 84-year-old record.</p> </body> </html> Figure 6- 7 shows what that might look like in the browser. Easy as pie. 214 Chapter 6 08_588338 ch 06. qxd 6/ 22/05 11:25 AM Page 214 Figure 6- 6: The story in Regular mode Figure 6- 7: The story. War. 208 Chapter 6 08_588338 ch 06. qxd 6/ 22/05 11:25 AM Page 208 Figure 6- 1: An example of a newspaper cover in Regular mode 209 ESPN.com: Powerful Layout Changes 08_588338 ch 06. qxd 6/ 22/05 11:25