{"id":41,"date":"2004-10-09T00:36:21","date_gmt":"2004-10-09T08:36:21","guid":{"rendered":""},"modified":"2016-05-25T23:34:39","modified_gmt":"2016-05-26T06:34:39","slug":"abcnews-redesigns","status":"publish","type":"post","link":"https:\/\/mikeindustries.com\/blog\/archive\/2004\/10\/abcnews-redesigns","title":{"rendered":"ABC News Redesigns"},"content":{"rendered":"

\"\"I’m 30,000 feet above Seattle right now heading to Vegas with Keith<\/a>, Jason<\/a>, and The Wolf<\/a> 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<\/a>. 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.<\/p>\n

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.
\n<\/p>\n

A very brief history of ABCNews.com<\/h3>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Extreme Makeover, Dork Edition<\/h3>\n

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.<\/p>\n

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.<\/p>\n

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”.<\/p>\n

Republishing the publishing system<\/h3>\n

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.<\/p>\n

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.<\/p>\n

Better living through cleaner code<\/h3>\n

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.<\/p>\n

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<\/a> 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<\/a>, 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.<\/p>\n

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.<\/p>\n

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<\/code> 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<\/a>, 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.<\/p>\n

A touch of Flash<\/h3>\n

Finally! sIFR’s<\/a> 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<\/a>, Tomas Jogin<\/a>, and Mark Wubben<\/a> 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.<\/p>\n

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.<\/p>\n

RSS: Say it loud and say it proud<\/h3>\n

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<\/a> for a full selection.<\/p>\n

Another business case for web standards<\/h3>\n

In redesigning ESPN and now ABCNews, we’ve provided rock-solid business cases<\/em> 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<\/a>. 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.<\/p>\n

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.<\/p>\n

Comments<\/h3>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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…<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,282],"tags":[],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-business","category-original"],"_links":{"self":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":0,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"wp:attachment":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}