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.
Reading the feedback in the forums lead me to believe that most people that have problems with the site will be the one most likely wanting to leave feedback. I’m guessing the vast majority that are loving it or have no problem with it just aren’t leaving feedback. It’s still a little disconcerting though, as web designers we can see the benefits and appreciate the skills gone into the design. I really love the new design, very easy on the eyes and vastly easier to digest information compared to the previous design. Here’s hoping someone wakes up Foxnews.com, that design makes me cry.
A small note on sIFR, you can place the replacements in an external JS file and simply call sIFR() before the body closes.
Really cool to see it in action on such a big site!
There’s a very easy way to fix ampersand issues, for instance in a PHP function:
function convert_to_valid_xhtml($text) {
return preg_replace(‘/&(?![a-z0-9#]+;)/’, ‘&’, $text);
}
Keep in mind I had to double-&ify the second argument to preg_replace in the source, so look at the version in the output, not the one in the source.
Have you read my article, The Case for XHTML ? It explains why XHTML actually is good for the Web, and why HTML is not. May wanna give that a whirl :)
Very clean design with great colour choice, I love it.
A note: could you tell them to add more characters (like Umlauts) to the flash file? Example: it fails “ö” in Björk.
Too bad it (sIFR) fails with Opera. The intensive green background with some of the headlines and total failure with the sub page navigation (menu is placed beneath Flash div, rendering it unusable)… Ugh. Well, we just really have to hope this is fixed, since I wouldn’t like to be missing out on my favorite replacement technique with my favorite browser. :/
Could you give a link to the TEA language?
Very nice! I love the colors and the use of sifr. The flash video is the main reason that I’ll now use this site instead of any news site. You’ve converted me for sure.
That’s just too cool. I’m amazed.
Excellent. Nice use of everything you publish on your blog.
Joe W.
Tea (and its associated elements) was released several years ago as an opensource product. You can find it here: http://teatrove.sourceforge.net
I like the re-design. It’s easy on the eye even with a lot of information. I barely notice the ads.
Great job Mike, congrats on another high-profile project! Keep up the terrific work bringing web-standards to the masses behind the scenes.
Lately we’ve seen many standard-oriented (I should say reason-based ;) redesigns, but this one steals the show. Great work guys!
And what a dream team you managed to put together… You’ve put so much talent in one place that you’re defying the laws of physics. Beware of a creativity singularity! You could accidentally reshape the entire web! :-)
Why does the Note not have it’s own RSS feed? Would seem to me to be crying out pretty desperately for one considering it’s audience.
Matt: Yep, you’re absolutely right. The first reaction to change in most people is negative. Whenever sites redesign, there is always the inevitable group of neophobes who will take a few days to get used to things.
Faruk: Thanks for the suggestion, but unfortunately removing ampersands is not that easy in our case. Number one, that regEx operation is computationally ferocious on a dynamic site that gets as much traffic as ABCNews does, and number two, most ampersands are inserted by our ad system. While the majority of all page content is generated from our CMS, all ad-related stuff is inserted on the edge servers after the page has been generated and thus, we have no control over it. With regards to your article about XHTML versus HTML, I do agree with most of it, but it still is more of a theoretical piece than a practical piece at this point. There are still zero practical benefits for us in creating a strict XHTML environment and in fact there are disadvantages. If our environment is not fault-tolerant, all sorts of things can suffer. For instance, let’s say a company like Orbitz wants to place a complex ad module on one of our pages and it needs to go up before the weekend. Let’s say they are writing the code in-house. If their code isn’t written with XHTML Strict in mind, it will break our site. A typical response to that problem would be “just tell them to write better code” but when there is a lot of money on the line it is best to not be difficult with people. For people who control the code completely on every page of their site, a strict environment may be the way to go, but for a site like ours, it’s not advisable. That said, XHTML 1.0 Transitional provides the flexibility we need and that’s why we picked it.
Ezku: Yeah, I just disabled sIFR for Opera so you shouldn’t be seeing those problems anymore. Opera is a great browser but they haven’t figured everything out yet. I’ll send a note to the folks in Norway and see what they can do about it.
Keith: You’re right. It does seem like the Note would benefit from its own feed. I’ll ask around.
Great use of sIFR – adds a nice touch to the site. Also, the Flash embedded video works really well. I’ve been looking at different ways of providing video online and perhaps this is the way to go.
Not that you can probably do much about it, but it might be a good idea to put a link to the RSS feeds in the footer, like the Washington Post does.
Putting the RSS page in the Tech section might be offputting for less savvy users.
Too bad the newly redesigned ABC News site crashes Internet Explorer in Mac OS X. (Can anyone else confirm this?) Considering IE is still (!) a widely used browser on the Mac OS X platform, this can’t be a good thing.
To Christian Watson:
Actually, the index of RSS feeds is linked in/from the left-hand column on every page.
It’s always nice to see big websites go with CSS based layout, and doing so for business reasons, not for religious ones.
I loved reading the paragraph about the business case of CSS, and the immediate benefits it resulted in. I, for one, would love if you’d expand on that in another post.
Either way, great post!
I really don’t care about validation or anything, i do care about usability though. And it doesn’t work at all using firefox/linux. It just goes crazy, things pop up everywhere, stuff starts flashing, headlines appearing everywhere. If i wouldn’t know this was designed with web standards i would really get the impression this some kind of msie-centered site. (i’m not talking about minor annoyances, the site isn’t usable whatsoever)
Whenever I hear the voice of reason, the one that tells me it is ok to get the job done the best I can with resources available (time , budget, cms contstraints) and reminds me that validation is only one piece of the puzzle…
I Swear it’s Mike D .
It’s so very refreshing to see someone that can see the big picture. Far too often I think web designers can’t see the forest for the trees.
Inspiring work to all involved – and fantastic writeup Mike.
Yeah, I realized that after I’d posted it, but I figured that it may be a useful function for any other php-using standards fanatics out there, so I didn’t bother commenting again ^_^
As for Ads on XHTML-websites – yep, they’re always a source of evil. No single Ad agency cares about Standards, that I know of, and they all produce highly invalid code. It’s a shame, but I completely understand that you just have to accept that in such situations.
You’re right in that there are as of yet no practical benefits for us, directly. That’s absolutely true. But XHTML helps our cause, whereas HTML does not, so I for one am very glad you went for an XHTML site, despite it not validating (seriously, such issues are for the future imo).
Exactly! So very true. It’s only when you HAVE the time (and money) that you can go the extra mile to make such things happen, but when you’re on a tight schedule for a client, there’s nothing wrong with accepting an invalid page, or simply using a text/html header (because you don’t have the time anymore to make the CSS work in the application/xhtml+xml mimetype, for instance).
And you’re still sending out a strong signal in favor of Web Standards, something that wouldn’t have happened with HTML. :)
Captioning for video, please. If people don’t know how to manage that, I’m available.
Still a widely used browser on the Mac platform? Even Apple said they’ve seen the numbers drop to about less than 10% of all Mac users are on IE — and since we only make up about 3% of the computer world, I don’t think they’re crying. Counting the lower numbers of OS 9, and you’re talking minimal.
Much less, most Mac users, myself included, have oodles of browsers – remnant of a time when I had to bounce to different ones for websites to work or accept me as a visitor. Besides — what kinda’ mac user are you to support a Microsoft product that has long abandoned the Mac community?:) Upgrade like the rest of us do.
That browser is the Netscape of new, and to waste development time, and bandwidth with extra code, is not only unpractical, but a waste of resources and a backwards look at the web.
It’s a great site — and regardless of a few errors, it has been the largest leap forward by a major corporation in regards to CSS and standards. Yahoo’s Beta team didn’t get even close when it simply replaced every table with a div and a class.
ABC did a great job on it — and I wouldn’t bad mouth it one bit unless I was pretty sure my design talents could compete, *cough Rimantas*
Um.. use of images for such simple looking heading straps like “BUSINESS”, “POLITICS” etc on the homepage is old fashioned web design mentality. Want to change one of those headings and you better hope the designer hasn’t gone to lunch and that you have someone to upload the image. subhead_abcnewsnow.gif for example… the user deserves better than for this to be a static image.
Sluggish left nav rollovers on homepage… feels like Im using a 486.
No Tables? Big deal. You think the end user gives a damn? No. There aint nothin wrong with using structual tables if means pixel accurate control and well behaved layout. Tables are like bricks and mortar. Solid. Wont fall down or sway in the wind.
There are some positive things to say, but negative is more fun.
Psycho: “No comment” on the headings. We’ll see what shakes out. :)
Congrats,
The abcnews.com site is now my page of choice! It looks 1000 times better than what existed before – vibrant, clean, and much better organized. Subtle details like the dynamic Futura Flash text reflect the connection to their broadcast brand quite well – and really set it apart from the other sites. The others will try to clone your work soon. Great job – congrats.
bp
I absolutely love it. The only problem I noticed was that some of the articles bring up an error page when you try to view them, but I figure that the reason is because things are still being worked on as you mentioned in the article above. Other than that, I think all involved did an excellent job.
Keep up the good work!
LMAO Whoever complained about the ‘old fashioned web design mentality’ of those headers obviously doesn’t read your site (or any design weblog for that matter) very much.
I think you and the Disney design team have done an awesome job. I think you hit the nail on the head when you referred to ‘progressive improvement’ – that’s exactly the nature of what we should all be aiming for. That voltairre dude was pretty smart huh?
BTW how did you disable sIFR in Opera – I imagine we’d all like to know if we’re going to adopt it in our own projects.
Despite the weird negativity from some corners, this is another success for web standards. Bloody well done old chap!
That is an absolutely awful size for that ad banner if it’s going to be where it is. Friggin’ ad persons…
It all looks pretty nice, though! Go sIFR! :)
:\
Small factual error in your “brief history of ABCNEWS.com.”
The site had a few years under its belt before getting to the point where “most of the writing and editing was done … out of New York.” Its editorial leadership was mostly Seattle-based until mid-1999; from that point, it trickled eastward until the Seattle newsroom was shuttered in early 2000. May seem like ancient history by now, but it’s worth noting for the record, on behalf of the talented online semi-pioneers who started and grew ABCNEWS.com during the years when almost no one at network HQ in New York gave a (expletive deleted) that a Web site was really and truly out there bearing their brand.
@ Jim Amos
I wanted to know that too, so compared js files. Add:
if (navigator.userAgent.toLowerCase().indexOf(‘opera’) > -1 {
return false;
}
or, like Mike:
if (navigator.userAgent.toLowerCase().indexOf(‘opera’) > -1 || (navigator.userAgent.toLowerCase().indexOf(‘msie’) > -1 && navigator.appVersion.toLowerCase().indexOf(“mac”) > -1)) {
return false;
}
and there’s no-go for Opera (and IE Mac, right?).
Well I found a bug in the site if its important. In Safari, I went to an individual story. In the top left hand corner, there was a flash drop down menu, similar to those on Inman’s site. When I clicked the drop down menu, it appeared, and then a section of it erased itself just around the sIFR text for the title of the article.
I uploaded a quick screenshot of the bug here.
(Editor’s Note: Through the weirdest workaround ever, this is now fixed.)
Josh,
Thanks. I am aware of this Safari bug and it seems to have cropped up at the last second for unknown reasons. I actually spent several hours yesterday trying to squash it and haven’t come up with a fix yet. We’ve done CSS menus over Flash plenty of times and never had this problem. The only thing I’ve found out so far is that it only occurs if you have any form elements on the page and they are positioned down far enough on the page where they aren’t in the browser’s viewport. Really weird!!!
I can confirm that abcnews.com crashes IE for the Mac, both 9 and X. :(
Whoa, major realization! By extension, I have, through sIFR — in a small way — contributed to abcnews.com. Certainly, it’s a tiny little contribution, but should I ever brag about it, most likely under the affluence of incohol, nobody will believe me anyways… because there is no sIFR copyright notice. ;-)
Ahem.
Crashes in IE on my Mac as well :(
OS 10.3.5
IE 5.2.3
Hi
I like the look of the site – it looks great at IE6.
But it doesn’t work well using fireFox/WindowsXP.
Dudi
Mike-
I’ve been out of town on business myself, so I’m a bit late to the party, but this looks like tremendous work. I haven’t had a time to check the code and get too in-depth, but the design is beautifuly elegant and simple, and the move to TEA and cleaner, standards-influenced code (how’s that for side-stepping a validation error here and there?) can only be a good thing.
Congrats. If you and the Disney family and the rest of the family weren’t already the industry’s most significant commercial team, you certainly are now.
Mike, the real benefits of XHTML today are on the production side. It is precisely because you have a large site that you need to have validating markup. If all your content and layout templates are in XHTML, then the next time you want to re-design your site and update thousands of pages, you can use XML technologies like DOM and XSLT to update your site in days rather than months.
Mike,
I, for one, recognise the achievement here. The website is working fine in my copy of Firefox 1.0 Preview (Windows XP).
All the best,
—
Ian
I posted a comment about sIFR on another blog, but can’t recall where, has anyone bothered to look at it on a Windows XP machine with ClearType enabled with an LCD ? It really does look horrible compared to normal text embedded in Flash, or plain old TrueType or OpenType fonts rendered on a page.
I’m not sure what causes it, or what a solution would be.
Vlad,
If you think a major media site (no matter how good the code is) can be redesigned in “days rather than months”, you don’t understand what a major media site redesign really is. While a redesign for a blogger might be changing the header out and switching up the fonts, media sites require a whole lot more attention.
New ad sizes, new ad formats, new video features, new readability tools, new content feeds formatted in totally different ways. Shall I go on?
The fact is that when a major media site redesigns every X number of years, it’s a lot more than just shifting the furniture around. The most important part of your content to keep clean is what’s in the database… the raw content of a story, for instance. Having this stuff well-formed lets you plop it into whatever shell you happen to design for it… in whatever language, whether it be HTML, XHTML, RSS, etc. We’ve gone to great lengths to “clean” this source content as best we can via upgrades in our CMS and templates, but where it gets a bit messy is in the assembly of it all. We have statistical tracking code which is not valid. We have ampersand-filled ad code which is not valid. And of course we have the occasional rookie errors coming in from time to time (e.g., a stray uppercase tag, a missing trailing slash, etc). This is the stuff we are working to minimize.
And by the way, we already are using the DOM and XSLT.
From Mike’s article:
Would you mind elaborating or pointing links which explain this further? When designing templates which must be done in days not weeks, I generally resort to tables for anything beyond a basic two column layout.
I feel a little dirty doing this, but a handful of table tags don’t consume much bandwith, and I’m not convinced that Zen Garden like manipulation of layout using CSS is a very practical business practice.
Ian-
I’ve been using sIFR since Mike and company introduced for my personal site and a few client sites, as well. I’ve definitely tested on WinXP/IE/ClearType/LCD and not noticed a problem. While I develop on Mac OS X, my main testing box is a laptop running Windows XP, and I test both with and without ClearType. I’d love to see screenshots of the problems you are experiencing…
Jeff
Mark IJbema writes:
“… it doesn’t work at all using firefox/linux. It just goes crazy, things pop up everywhere, stuff starts flashing, headlines appearing everywhere. If i wouldn’t know this was designed with web standards i would really get the impression this some kind of msie-centered site. (i’m not talking about minor annoyances, the site isn’t usable whatsoever)”
I’d like to confirm that. Completely wacky behavior and entirely unusable with Firefox/Linux. Must be the Flash heads.
John Smith and Mark Ijbema:
It does seem like we’re having some Linux issues right now, and I’ll be the first to admit that testing of both ABCNews and sIFR on Linux were limited. I’ll look into this tomorrow… if it’s as simple as disabling sIFR for Linux, that’s cake.
I like the site!
Forget the ads they are evil, remember people have admunchers, pop-up blockers, banner stoppers and these things distort the original output of the html.
So everybody have fun or go back to tables and spacer gifs.
I was wondering if the ABCnews RSS feeds are using unique identifiers yet. Ever since they first started publishing feeds it resets a lot which is very disheartening to those who subscribe to tons of feeds. What’s the deal? why does it do that?
Hey Mike,
I just want to say don’t sweat all the nitpickers out there, unless they’ve worked on a project like that they have no idea all that’s involved.
Good Work.
Sounds like the site looks nice, but I wouldn’t know, since I can’t see it or get it to load in IE on Mac OS9 or for that matter OSX. Stopped going to ESPN because of all the JScript errors and the three days it took to load, even with cable modem and now ABCNews is gone as well. Damn, guess I’m stuck with the Drudge Report, yckk.
Very nice work
might i suggest you purchace this
http://automaticlabs.com/products/urlcleaner
it may well sort out your ampersand problem.
I am in no way related to this product and my own site is a bag of nasty…
peace!
*sifts through all the crap about validation and ampersands*
I’d like to commend you, Mike, and everyone who had a hand in the redesign. The site is nicely laid out and very attractive, especially for a news site — especially compared to CNN. Kudos.
Oh, and I forgot to try and validate it. Seeing as I’m not a consumer of XML (that’s a machine’s job), I failed to see the point.
Didn’t crash IE on OS X for me…
Mike –
Superb job to you and the team that worked on it with you. I noticed the CSS drop down menu issue over flash element as well. It looks great today. I have run into this so many times and have yet to be able to fix it. Would you mind posting how you fixed this? It would be a great deal of help. Thanks!
Again the site looks great… goodbye MSNBC hello… ABCNews
Is there a way to disable sIFR locally? In FireFox, you can’t open the stories in a new tab because you can’t middle-click on even use the right-click context menu. And the only link to the story is the sIFR headline. Unpleasant, since I browse everything in new tabs.
Harold:
Regarding the CSS dropdown menus over Flash in Safari — it’s positively the weirdest bug I’ve ever come across. Basically, if any input or select elements are below the fold (off the screen) and you try to use the dropdown, it goes behind Flash. If you scroll the page so that the elements are visible and then scroll to the top of the screen again it works fine! Totally bizarre. I’m going to e-mail Dave Hyatt at Apple about it but in the meantime, here’s the fix I came up with after two days of headpounding:
At the end of your HTML code, loop through all input elements on the page using a simple getElementsByTagName, set them all to invisible. Then do a setTimeout which fires a second later and loops through them again resetting them to visible.
How bizarre is that??? Here’s the code:
function fixSafari () {
for (i=0;i -1) {
var inputs = document.getElementsByTagName(‘INPUT’);
for (i=0;i
If anyone can come up with a better solution, I’d be glad to implement it.
Wow, it’s refreshing to see such a high profile commercial site using web standards, sIFR, and CSS. I’d always been a fan of the ABC News website, but I never thought it would go the way you’ve taken it.
It’s clean, informative, and well layed out. Good use of Flash, great RSS options, and I have to bring up sIFR again. What a great use of this technique!
Thanks for giving us yet another great website that we visit on a daily basis.
Mike…
Thanks so much for taking the time to go over your solution. It will be interesting to see how David H. responds to this as well. I have noticed this issue for sometime.
Always nice to see another big site following the standards route.
I noticed some conditional syntax for redirecting IE 5.0 to /browserupgrade. What was the basis for excluding that browser? (I’m going to guess it relates to Flash/iFrame layering issues and/or wacky CSS bugs?)
I think the site looks really great. I have to agree with you about your points concering XHTML and its viability in an actual real world production scenario. I think that a lot of standards zealots who want to criticize others for not having 100% compatibility or the most bleeding edge web standards often don’t have a lot of experience in a real world setting.
Keep up the good work!
Congratulations to you and the team for moving this site so far from where it was. I’ll add yet another voice to those advising you to ignore the validation zealots. It’s a shame they chose to criticize and be divisive when they could be celebrating another success.
Mike, I was wondering. Do you actually know the difference between HTML and XHTML? While I totally agree with your point of view that XHTML isn’t ready for prime time (application/xhtml+xml et cetera) most sites use text/html and therefore there is no difference at all between HTML and XHTML since browsers will use the same parser for text/html no matter what DOCTYPE you have.
The site looks great by the way.
The new site is great. Here in our shop we were blown away by sIFR and we’re excited to see where it goes from here.
A side note on that: while discussing the new site, we noticed the main headlines on the front page were flash. Curious as to what ABCNews.com had in store for their headlines, we started digging through their code and guessing as to why this was the case. 15 minutes later, google led me to this thread which explained everything.
As Scott mentioned above, though, users of firefox lose their ability to open stories with sIFR headlines in a new tab (even CTRL-Click fails). This problem alone would stop me from recommending sIFR for use on one of our sites, since I also browse with tabs. What can be done for hyperlinked sIFR text?
I’m a bit late, this site is absolutely great….
sIFR is one of the best thing I’ve seen for months, nice to see it on such a big site !
does not crash in IE on Mac OSx for me… but it does throw up a ton of extra unnecessary whitespace to the right and bottom.
I’m using Safari 1.0.3 on a MAC running OS X.
When I first bring up abcnews.go.com, I see two equally sized columns of articles and article categories.
As soon as I pass my mouse over the right column, the column size shrinks to one-half the original size. If I select an article and then click the BACK button to get back to the main page, the columns are again equal size, and the process starts over.
This is a repeatable problem.
When the column size shrinks, somtimes the original text is left hanging in the right-half of the now half-size column. Other times, when the coumn size shrinks, the right-half of the now half-size column is left blank.
This makes it really frustrating to try to read the site since half the text is always jumping around. I like the look of the new site better than the old one, but this bug makes me avoid it much of the time.
Julia,
That’s unfortunate. Safari was pretty much an unfinished beta until it hit version 1.2 so it doesn’t surprise me that you are noticing such an issue (although it is of course disappointing). If you are running Panther, Apple’s recent OS, I highly suggest upgrading to Safari 1.2.3, however, I suspect you may be still running Jaguar. In that case, I’d recommend using Firefox as your browser. Apologies for this inconvenience…
Mike, I agree with most of your readers that the new design is great, though I will admit it took a day or two. I’m a pretty loyal CBSNews.com reader, but if it weren’t for the free video CBS offers, I’d switch to ABC’s new site for sure. It’s pretty cool to see another big site using XHTML/CSS and especially sIFR. I am curious as to why they decided to use flash for the main logo instead of incorporating it into an image as I would think.
I also do like the new design of the ABCnews page quite a lot, I was also wondering about the use of flash for the headlines and the logo (why’s that?). Now i at least know why they are there.
But as someone else said, they provide rather big disadvantages, esp. with the FireFox browser. For one (as someone said before) you can’t open news stories in a new tab, since they are only reachable by clicking on the flash headlines, and secondly, parts of the site look rather ugly, when you’re using the Adblock extension (dramatized example: http://img129.exs.cx/img129/5339/ABC.jpg).
But the loss of functionality is certainly more irritating.
Site looks great! Nice and clean.
Im not going to reiterate both good and back comments noted above – the only thing I did notice in addition, is that the titles of the three featured stories at the top of the home page dont seem to have alt tags on them – bit of a bummer for browser readers for people with vision impairments. I can understand (timewise) photographs not being accessible, but for story headlines, thats a bit of a pain – afterall, they summarise the story.
But very kind to the eyes, otherwise :)
Duh! After all the talk of Flash text replacement, I still didnt get it! Apologies Mike!
By the way, Mike – this is the first Russian translation of yours “ABC News Redesigns”:
http://www.webmascon.com/topics/business/24a.asp
it’s all fine and good, except that when i size the text to be very large (as i do with most long news articles on my enormous monitor), the links in the footer to related/current articles aren’t clickable in Mozilla/Firefox. probably has something to do with the z-index, check it out. otherwise, way to go for standards, XHTML, etc, good stuff.
I was a lowly little editorial intern in fall 1996 when our (Seattle-based, mostly) team started conceiving of the original ABCNEWS.com site. I do remember that that antiquated late-90s code and design was quite well-thought-out and forward-thinking at the time.
I left ABCNEWS.com in January 2000 when the Seattle editorial office was shuttered and revisit the site from time to time. It’s looking quite great these days, and I’m glad the broadcast folks, journalists, and technical people have finally created something standards-compliant yet very much ABCNEWS’ brand.
The ABC News site crashes Firefox 1.0 and Mozilla 7.1 on Windows XP. Confirmed by three other coworkers.
i’m having not problem with it in firefox 1.0 on xp (sp2)
Odd that they retained the abcnews.go.com address. I thought go.com went away years ago.
I’m on Xandros/Firefox, and it doesn’t go crazy, it just siezes up. Unusable. Strange, cause IFR works everywhere else that I’ve seen it.
Anyhow, great job! (judging by my co-worker’s windows box…)
Nice work, standards and css are evolving the net . I love it.
It has a nice look to it, but fails to abide by one of the cardinal rules of clean design: Don’t confuse content and appearance, and don’t confuse text and graphics. Using flash for what should be simple headings is massive overkill, and ruins the accessibility of the site. The current look-and-feel could be completely re-implemented with CSS+XHTML and save you massive amounts of bandwidth, reduce client loading time, simplify maintenance code, add durability through code validation, and improve search engine ranking (remember, the spiders “prefer” sites that they can read).
(Editor’s Note: Your comment is massively incorrect on almost every count. Firstly, Flash headlines done with sIFR – a technique invented specifically for this site and used around the world now – do not ruin accessibility one iota. Secondly, the site *is* CSS+XHTML, but then again, if you even took the time to hit “View Source” you’d know that. Third, again, nothing on the site does anything negative for search engine ranking, code maintenance, etc. Please re-read this article and do some investigating before posting this sort of knee-jerk reaction comment.)
I just tried to view ABCNews.com with Firefox 1.0.4 and Netscape 7.2 on linux (SUSE 9.1). Both browsers stop responding and fail to repaint their windows (i.e., hung, frozen, unusable). Otherwise, the system works fine. For example, I was able to start up a new shell window and kill the browser processes manually.
Note: I also noticed that the hung browser processes are not CPU-bound. However, I’m not sure what they are waiting for.
Is their any hope of getting this working soon? I’d hate to have to resort to viewing f**news.com. ;-) ;-)
Regarding the CSS dropdown menus over Flash in Safari.
has anyone ever thought about using the wmode parameter for a flash object?
just add <param name=”wmode” value=”transparent”> inside the object tag
don’t forget to add wmode=”transparent” to the embed tag.
I couldn’t test this for safari, but it works perfectly in firefox, ie, opera and netscape, so I assume it wil work for safari
(Editor’s Note: Has no affect in Safari.)
My bad, couldn’t test it.
But at least for al other people who think it’s the css that needs to be fixed. for ff, ie, opera, ns, above is the answer
Thanks for very informative article.
I’m not a complete fun of portals such as Abcnews,
but I like the progress “big guys” do,
it makes readers surf more and more without boring.
As for me – current Abcnews design is energetic and attractive.
Use of sifr is the main advantage of this site. After redesign it became much easier to read and to find what you need. New design is quite simple!Guys you’ve done extremely great work! now I prefer ABCnews, it’s much comfortable than CNN!
First time some errors occured but it’s just because work and development of the site were still in the process. Now everything is great!
Regarding abcnews and FR… Good news!!! just download latest version of FR. In new version (1.0.7) of firefox this problem was fixed.
I have a Mac and I can’t watch the WNT or NiteLine episodes. I can watch the videos on the first page, but nothing from the video page and certainly none of the archived shows.
I’ve tried many different browsers and keep calling support, and they say that the sight is not Mac accessible, but they are working on it.
Any news?
I’ve tried many different browsers and can’t play the video. Also, I have OSX 10.2.8 but am getting Tiger on Dec. 1. Will that change anything?
Thanks,
Myles
They sure have changed since then . ABC has got it going on.Thanks for the history lesson did not quite know where it all started from.
The move to xhtml and css is a good choice, and you have provided me with the motivation to finally start a redesign on our sites from html as well.
You all have made great progress in a very short period of time. Congratulations on all the hardwork accomplished. Very well written article, and I love the flash, it looks great.
Congratulations on all your hard work. The new ABC site looks awsome. I can not belive you were able to shrink the code by nearly 50% that will save thema ton of money over time very smart stuff!
Regarding abcnews and FR… Good news!!! just download latest version of FR. In new version (1.0.7) of firefox this problem was fixed.
Nice work, standards and css are evolving the net . I love it.
Congratulations on a huge project success. I think I am going to use this in a report for class, and hopefully it will convince other students who will be creating sites in the future to do it right the first time!
You must have had many a long night stressing on that big of a project!
Okay, so you got me. You have convinced me that getting the standards set while my sites are small could save me major major headeches later. So I’m taking the plunge to take 2 weeks off and get my css straight and look at avoiding the future problems that you all have had to. I too want to seemlessly integrate flash in future designs – I think flash adds that super professionalism to your web presence.
Apologies on the duplicate comments, my browser (Opera 8.5) kept on hanging everytime I pressed the “Post” button, so I pressed it a few times.
“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.
I just want to say thanks for very interesting article. I’m not a complete fun of portals such as Abcnews, but I like the progress “big guys” do, it makes readers surf more and more without boring.
As for me – current Abcnews design is energetic and attractive. Keep on the good work!
Did ABCnews recently go through another redesign? The homepage seems to have lost much of its luster that it had after the October 04 launch. Is this to be seen as a bad sign for sIFR on a large site? Just wondering if you have any thoughts on the changes to the site.
Alexis: sIFR is still being used on the site (check the story pages), but yes, it’s quite an awful site these days. Needless to say, I haven’t been involved for more than two years now. :)
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!
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.
Did anyone ever figure out why there is no RSS feed for The Note?
ABCNews.com
Mike talks up the redesign of ABCNews.com while sitting at 30,000 feet.
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…
Mike Davidson: ABC News Redesigns
Mike Davidson: ABC News Redesigns – It’s great to get a personal perspective on huge projects like this.
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…
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,…
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….
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…
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.
ABC News Redesigns
Mike Davidson on ABC News Redesigns….
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.
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…
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…
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…
Self-clearing floats
A cool technique [via Mike Davidson]…
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…
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…
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…
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
While my magnificent computer serves 100% of the time, like a washing machine, it cannot change its mind.
[…] One small step for the evolution of news sites, a giant step for abcnews.com! Read more about the technology breakthroughs […]
“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.
great article you have there…great to join and read
Could anyone give me a link to the TEA language? I really need it. Thanks