ABC News Redesigns

I’m 30,000 feet above Seattle right now heading to Vegas with Keith, Jason, and The Wolf and all I can think about is what’s launching tomorrow. By the time you read this, we will have launched a brand new ABCNews.com. Several months in the making and several years since the last major redesign, the new ABCNews is the latest major media site in the Disney family to jump on board the real-world web standards gravy train.

A collaborative effort between the ABCNews team in New York City, the Disney Internet Group in Seattle, and a few outside consultancies, the new ABCNews.com is a refreshing reminder that dramatic change is possible in organizations of any size. I feel lucky to have worked on this project and wanted to share as much as possible about what went on behind the scenes to bring you what we now believe to be one of the best news sites on the web.

A very brief history of ABCNews.com

ABCNews.com, like many other Disney sites, began its life in Seattle several years ago as part of the Starwave/Infoseek/Go/ABC/Disney family of sites. Although most of the writing and editing was done out of the ABCNews offices in New York, most design and development work was performed out of the Seattle office. During the 1990s, ABCNews was one of the most popular news sites on the web.

Around the beginning of this decade, other news sites such as CNN and MSNBC made large investments and raised the collective quality bar in the industry, while ABCNews.com looked to broaden its online initiatives past the familiar narrowband web. They struck a lucrative on-demand video deal. They carved out wireless initiatives. They entered the RSS game with one foot in the water. And perhaps most impressively, they created ABCNewsNow, the world’s first and only 24-hour internet news video feed.

Entering 2004, it was clear ABCNews.com had a rich future in the competitive news landscape of the web, so talk of a major redesign began.

Extreme Makeover, Dork Edition

The previous incarnation of ABCNews.com was getting a little long in the tooth, the code was very late ’90s, and the general amount of technical innovation going into the site was less than ideal. I’m the last one to care about minor validation errors, but the last time I checked the old site, there were 609 of them per page and some were not exactly minor.

I should stop right now and qualify my statements by saying that I am not on the ABCNews team and when I say “we”, I don’t mean to say that I led this effort. My own role in the process was mostly consultative in nature, and the lion’s share of the credit for this redesign and the ongoing operation of ABCNews.com goes to the incredible team of people in our New York City office.

Rather than trying to massage the old site into a healthier, more efficient beast, the plan called for a new site designed from the ground up. After several rounds of wireframes followed by several rounds of design comp revisions, a distinctive layout and style guide emerged. The new palette of white, light blue, and a touch of orange was a big improvement over the old site’s palette. By lightening up the palette and introducing readability tools such as a persistent font size selector, we’ve made the new ABCNews a pleasure to interact with. Pages load much faster due to our embracing of CSS and web standards and everything just “feels better”.

Republishing the publishing system

All Disney sites use our own CMS and even our own templating/scripting language called TEA. We developed the TEA language and the CMS several years ago before there were any viable alternatives on the market. TEA is now open source and freely available to anyone who wants to use it. ABCNews, up until this redesign, was the only Disney site left which used an old version of TEA called “dot T” so one of the most important things accomplished in this redesign was to get them onto the new templating language. Happily, this has led to incredible new efficiencies in the system and has allowed ABCNews to now publish their entire site dynamically.

While many people will undoubtedly concentrate on the XHTML/CSS and visual design aspect of the ABCNews relaunch, the publishing system aspect is arguably even more important.

Better living through cleaner code

Before we talk about code, let me please just say right off the bat that firstly, we’re not perfect, and secondly, we’re not done. If you expect a major media site to be error-free on launch (or ever, really), you’re living far, far into the future. Unfortunately, living in the future does not pay bills in the present, so instead, we live in the present. We believe in “progressive improvement” which means simply that when you redesign a site, it should materially improve in every way that is practical. It need not solve every single problem and it need not be perfect. As Voltaire once said, “Perfection is the enemy of good”, and if we spent our time worrying about making it perfect, we’d never launch. One of my favorite things about web publishing is the fact that you’re never really shipping a product. Instead, you’re sort of continuously streaming it, which means you can continuously improve it with little to no financial impact. Progressive improvement says that as long as you’re vigilant about making things better with every revision, you are a good web samaritan.

The most obvious change in the new ABCNews.com site from a coding standpoint is the move from tables to CSS positioning. This topic has been covered to death over the last year so I won’t preach much about it other than to explain what positioning scheme we settled on. As I do with every site I work on, I first investigated whether there was any way to use absolute positioning for the site structure. I much prefer absolute positioning to floats and if there is any way to use absolutes in a redesign, I’m absolutely for it. In the end, we settled on self-clearing floats mainly because of our horizontally spanning footers and other elements which need to be cleared. The inability to clear absolutes is a gargantuan shortcoming of CSS and without using a javascript-based method like the one cooked up by The Wolf, the only option is to use floats instead. That said, the self-clearing aspect of our floats is nice because it eliminates the need for extra clearing divs.

The second big change is a nice reduction in the amount of validation errors on the site. Again, if you’re expecting zero, you’ve never worked on a major media site. Period. Don’t tell me I don’t know how to code and don’t tell me that if you worked at ABCNews, the site would be valid. There are simply too many moving parts and too many influences outside our control to be error-free, so instead we did the next best thing and progressively improved. Do we care about 100% validation? Absolutely not. Do we care about well-written, flexible code? Absolutely. The overwhelming majority of errors on most ABCNews pages now are ampersand-related and we’re just fine with that.

The third major coding change is the move to XHTML 1.0 Transitional. I am not a believer in the theory that we will be able to magically derive meaning from everything in the world via XML anytime soon, so the move to XHTML wasn’t based on any grant visions of the semantic web. I am also not a believer in the sanctity of serving pages as application/xml so that wasn’t a motivation either. The move to XHTML was simply about standardizing our code a little better. I like the fact that XHTML is supposed to be lowercase. I like that non-closing tags have trailing slashes. I like the little things. I, like Eric Meyer, don’t think that XHTML has any major real-world benefits right now over HTML, but it may in the future so we might as well just get everyone in the habit of using it. With the last ESPN redesign, we used HTML instead mainly because there was a lot of legacy code to deal with, but that wasn’t so much an issue with ABCNews.

A touch of Flash

Finally! sIFR’s coming out party! I won’t go over the details of sIFR in this post because it is available elsewhere on my site, but in a nutshell, ABCNews.com employs a standards-compliant technique to display typographically rich headlines by combining javascript and Flash. The technique was developed jointly by myself, Shaun Inman, Tomas Jogin, and Mark Wubben and allows us to use Futura for our headlines and subheads, which is consistent with the ABC News brand. It’s really a fabulous technique and I highly recommend looking into it if you’re sick of using Verdana, Arial, Times, or Georgia for everything under the sun.

The new ABCNews.com also employs Flash to display our free video clips on the front page. Flash is such a great choice for video these days that this wasn’t a difficult decision to reach. With over 90% penetration and minimal performance differences between systems, Flash is clearly the easiest way to display integrated video clips to the largest audience possible. The use of Flash video at ABCNews.com is a clear advantage over the video at MSNBC which uses the Windows Media format and is purposefully unavailable to Mac users. We love Macs at Disney.

RSS: Say it loud and say it proud

Another key addition to the new ABCNews site is an expanded selection of RSS feeds for all of your news aggregation needs. As more and more people turn to RSS for newsreading, having a great selection of feeds will become more and more important. We encourage our users to get their news via RSS and welcome them to check out the new RSS index page for a full selection.

Another business case for web standards

In redesigning ESPN and now ABCNews, we’ve provided rock-solid business cases for moving towards web standards and better code. I’ve never crowed about our sites being spectacular technical cases of exactly how you should code your own sites; for that sort of thing, you’re best off paying close attention to Doug Bowman. The general rule is that the smaller the site and the less people who work on it, the more control the developer will have. With this control should come less code anomalies and shortcomings, and as a developer, you should strive for Bowmanesque quality whenever possible.

The business cases for web standards in our redesigns are obvious, however. With both ABCNews and ESPN, we’ve reduced our code size by about 50% sitewide, and when you do terabytes and terabytes worth of bandwidth, that adds up to a pretty penny. Smartly crafted CSS has also enabled us to offer all sorts of different advertising opportunities within pages — vertical rectangles, horizontal rectangles, squares, text ads, video ads; you name it. And finally, there’s wireless devices. The new ABCNews.com looks and works great right out of the box on many wireless devices due to the way it’s coded. All in all, the redesign strengthens ABCNews.com’s overall value as a communication tool in ways not possible using yesterday’s techniques. By moving toward web standards in a practical way, Disney sites are becoming more efficient in almost every way.

Comments

I’m going to leave comments on for this post but please also keep in mind that we know there are still minor lingering bugs which need to be addressed. The ABCNews team will be working hard over the next few weeks to resolve them. Also be mindful that there are a lot of questions you may ask which I am not qualified to answer, so silence doesn’t mean that I necessarily agree or disagree with you… it just means that I’m not commenting. Remember also that I am not on the ABCNews.com team, and my opinion does not necessarily represent their opinion or anyone else’s opinion at Disney.

Like this entry? You can follow me on Twitter here, subscribe via email here, or get the RSS feed if that's how you roll.

126 Responses:

  1. As a developer I like the term progressive as you use it above. The new site is totally awesome and a great step forwards for standards and css based design.

    The site is well done and then some, and when a site the size of ABC News changes to standards then its time for everyone who hasn’t to take another look at them.

    As for the nit pickers, the tires on their cars are .000002 inches out of round, they shouldn’t be driving on them? They have to walk and we’ll wave on the way by…

    The site works great in every browser I have, and again, progressive improvement is better than none by miles. This is a giant leap forward and gives Web Standards that much more credibility for business.

    A good title would be, “Common sense web design”

    Way to go!

  2. Mitomjo says:

    Looks really good. I like it.. Rather snazzy. Its amazing on how online media is becoming more rich and dynamic. It’s rather amusing to look back via the wayback machine on Alexa to see how sites have evolved through the years.

  3. Chris says:

    Did anyone ever figure out why there is no RSS feed for The Note?

  4. ABCNews.com

    Mike talks up the redesign of ABCNews.com while sitting at 30,000 feet.

  5. Asterisk says:

    Davidson Details ABC News Redesign

    Mike Davidson has taken the time to write up a post detailing some of the behind the scenes workings of the recent ABC News redesign he worked on. It doesn’t go into great detail, but it is a nice case…

  6. figby.com says:

    Mike Davidson: ABC News Redesigns

    Mike Davidson: ABC News Redesigns – It’s great to get a personal perspective on huge projects like this.

  7. Isopixel says:

    ABC News rediseña

    Mike DAvidson nos cuenta un poco sobre el proceso detrás del rediseño del sitio de ABC News. Al parecer se esta poniendo de moda voltear un poco más hacia los estándares, esto al final redunda en un usuario contento, aunque…

  8. Isopixel says:

    ABC News rediseña

    Mike DAvidson nos cuenta un poco sobre el proceso detrás del rediseño del sitio de ABC News. Al parecer se esta poniendo de moda voltear un poco más hacia los estándares, esto al final redunda en un usuario contento,…

  9. Leren van de pro’s

    Redesign van een megagrote site met Flash fonts en webstandards. Het is de praktijk bij ABC News. Mike Davidson vertelt….

  10. Floating through my brain at 3:38AM EST

    Sometimes I really struggle to write a blog entry about anything remotely interesting, and most of the time it’s not because I lack ideas for content. Just the opposite in fact. So often I find myself so completely bursting at…

  11. WebStandards für Arme?!

    Muss eine Site zu 100% korrekt validierbar sein, um das Prädikat “Korrektes XHTML” tragen zu dürfen? Ich denke nicht.

  12. ABC News Redesigns

    Mike Davidson on ABC News Redesigns….

  13. Phark says:

    We’re All in This (CSS) Boat Together

    When my boys Keith and Mike take pot shots right to the face from Ethan on the damn WaSP website, then I knew I had to reply on my weblog with my own thoughts regarding validation and other fun stuff.

  14. Validation and Content Management Systems

    The hullaballoo over validation has surfaced again. I, personally, feel that validation is the goal to be achieved in every site. Mainly because it helps reduce errors. Errors are a vicious problem that can rear its quirky head when you…

  15. Website Redesigns

    While the changes I make here at gatorace.com won’t show up on Google News anytime soon, a couple other sites have recently changed their look.Yahoo!’s redesign is still a mystery to me. Announced a few weeks back, I’ve been able…

  16. redesigning the site, muhuzbuh

    I am getting absolutely frustrtated with the layout of this site. Every time I try to improve it, it is looking worse and worse. And the thing is I have no idea what to do now. I want something that is sleek and beautiful, but that is much more difficu…

  17. InnerGeek says:

    Self-clearing floats

    A cool technique [via Mike Davidson]…

  18. Links on writing and design

    Some recent links from Poynter.org:- DesignInteract.com, LostRemote and Mike Davidson lift the lid on ABCNews.com’s redesign. Ten Things Copy Editors Want from Line Editors – great article on newsroom bridge building New Media Timeline, 1969 – 2004…

  19. Links on writing and design

    Some recent links from Poynter.org:- DesignInteract.com, LostRemote and Mike Davidson lift the lid on ABCNews.com’s redesign. Ten Things Copy Editors Want from Line Editors – great article on newsroom bridge building New Media Timeline, 1969 – 2004…

  20. Links on writing and design

    Some recent links from Poynter.org:- DesignInteract.com, LostRemote and Mike Davidson lift the lid on ABCNews.com’s redesign. Ten Things Copy Editors Want from Line Editors – great article on newsroom bridge building New Media Timeline, 1969 – 2004…

  21. Connie Parmenter says:

    Recently Charlie Gibson had thing about the red leaves, and botness people didn’t know why. Only God could do something as wonderful as that. I did not know how to contact Mr. Gibson so would you please give him this message? Thank you. God bless

  22. Brian Ofenloch says:

    While my magnificent computer serves 100% of the time, like a washing machine, it cannot change its mind.

  23. […] One small step for the evolution of news sites, a giant step for abcnews.com! Read more about the technology breakthroughs […]

  24. “The general rule is that the smaller the site and the less people who work on it, the more control the developer will have”

    Simply, you have said one of the most important Web Developing project-management rules, which also, unfortunately most people who work in the industry neglect, and wonder afterwards why the whole WebSite building process turns messy.

  25. great article you have there…great to join and read

  26. Andri says:

    Could anyone give me a link to the TEA language? I really need it. Thanks

Shared
The Ocean in 185 Lines of Javascript:

Mesmerizing. Try tweaking some of the variables in the “sea” section of the code.

“"Design had been a vertical stripe in the chain of events in a product’s delivery; at Apple, it became a long horizontal stripe, where design is part of every conversation.””
Why I Just Asked My Students To Put Their Laptops Away:

A great essay about how toxic everyday distractions can be.

Humanity's deep future:

A group of researchers at the Future of Humanity Institute talk about where our race may be going and how artificial intelligence could save or kill us all.

Steve Jobs speaks about the future at the International Design Conference in 1983:

31 years later, it’s safe to say this is one of the most prescient speeches about technology ever delivered. Jobs covers wireless networking, tablets, Google StreetView, Siri, and the App Store (among other things) many years before their proliferation. A fantastic listen.

How to travel around the world for a year:

Great advice for when you finally find the time.

LiveSurface:

A fantastic app for prototyping your design work onto real world objects like billboards, book covers, and coffee cups. This seems like just as great of a tool for people learning design as it does for experts.

50 problems in 50 days:

One man’s attempt to solve 50 problems in 50 days using only great design. Some good startup ideas in here…

How to Do Philosophy:

If you’ve ever suspected that most classical philosophy is a colossal waste of time, Paul Graham tells you why you’re probably right.

TIME: Why Medical Bills Are Killing Us:

Stephen Brill follows the money to uncover the pinnacle of corruption that is the U.S. Health Care system. A must-read article if there ever was one.

DIY Dot Org:

A beautifully designed site full of fun and challenging DIY projects. I could spend months on here.

The Steve Jobs Video Archive:

A collection of over 250 Steve Jobs videos in biographical order

Self-portraits from an artist under the influence of 48 different psychoactive drug combos.

Water Wigs are pretty amazing.

David Pogue proposes to his girlfriend by creating a fake movie trailer about them and then getting a theater to play it before a real movie. Beautiful and totally awesome.