The Wired News redesign was scheduled to go live in the wee hours of the morning today. Technical difficulties started popping up as we were pushing everything to the live servers around 2am. Fragments were disappearing, images weren’t working, Unfortunately for us, a press release was already queued up to hit the wire first thing this morning, announcing the new design and all the benefits it brings. They had even included some great quotes from Eric Meyer. The press release put us in a very difficult position, because the design couldn’t stay live with all the bugs. If the release hadn’t gone out, we could have postponed the launch without too much attention. At 3am, we were forced to decide to roll back to the old design until the problems could be investigated and solved, regardless of the fact the press release was going out to the world a few hours later.

Bummer! We’ll get it up soon though.

Wired News has used Vignette as a content management system for a few years now. Today, we discovered an odd bug that shows up whenever the cache (memory) was flushed (reset). Vignette is automatically inserting one html comment tag right before our DTD. The comment contains a timestamp, which we can only assume is used for internal file management. While this doesn’t appear to invalidate our xhtml under 1.0 transitional rules, it does significantly throw off IE6/Win with font size, margin, padding, and position values. IE6 seemingly ignores the DTD completely, and reverting back to “quirks” mode, and acting as if we never specified XHTML 1.0 Transistional. It’s mainly of concern to me, not because of the font size issue itself, but because the larger size and margins are causing the left column (often using a black background) to overlap and obscure the content of the center column. The engineers haven’t been able to find a solution to eliminate this comment tag which only shows up at random times. It’s a large enough bug to possibly warrant postponing the redesign until we can get some answers from Vignette.

Tom, a colleague and IA in our User Experience group in Boston, took the time today to run some Wired News pages through the Bobby accessibility evaluator. For comparison, he tested both the old and new WN designs, along with Cnet’s News.com. As I noted in one of my own tests about a month ago, the site is still not perfect from an accessibility perspective. But the tests and comparisons Tom reported back show the new design will help us make significant progress compared with the old design (and the design of our competitor). The report showed the following: continued

When Eric Meyer visited last week, we pressed him for a quote or two about the Wired News redesign. I was blown away with what he sent back. While his comments were intended for the press release and the story our Editor is writing, I asked him if I could reuse the quotes here, to which he agreed. I think his comments will get edited down for the release. But to me, they’re worth including in their entirety here: continued

Finally had a chance over the last two days to begin thinking about the Wired magazine site design. The current site is riddled with usability problems, poor architecture, and a very awkward design. I can be brutally honest about it, because I worked on this design over four years ago. The site’s current design was based on a model we were using for all HotWired Network sites back then. A model we abandoned long ago after learning many of the problems that showed up during user testing. continued

We implemented a secondary version control technique for Wired News images and CSS files this week. Images and CSS files have been moved one level deeper than they were, into a folder named according to the current release date (ie: 20020917). Each major revision or addition we make can be grouped into a new version release, and each dated folder will include every image and CSS file, so that all files can be referenced relatively, without needing to reference anything outside the dated folder. For instance, all CSS files will temporarily live in /news/v/20020917/css/, and all images will live in /news/v/20020917/images/ until the next major version change. (The v folder stands for “version”, and exists purely to group all of the dated release folders together so they don’t clutter up the root of /news/.)

The Akamai URI strings provide one means of version control and make it possible to update cached image and CSS files. But we want to ensure we have direct control over how and when the files get updated. Chaning the timestamp in the Akamai string may lead to unpredictable results across all their servers. But we can know for sure the new files will be re-cached if we change the date version number of our file’s physical path.

My colleagues in Boston ran some users through the Wired News design prototypes this week. While we were fairly confident that many of the usability problems of the old design had been addressed, we wanted to make sure there weren’t any glaring errors that we hadn’t addressed yet. We wanted a test a competitor at the same time to help give us a comparison, so users were asked to run through the same tasks on C|net’s News.com. continued

Since I haven’t jumped onto the wireless platform bandwagon yet, designing pages for the AvantGo channel has been an interesting challenge. Not too difficult, because there aren’t many choices. But that’s the challenge of it. It’s like trying to say as much as you can with as few words as possible. continued

I took a look at some pages today that Wired News generates for our AvantGo channel. The AvantGo reader only supports a limited subset of html 3.2 tags, according to their style guide for developers. After reading though their guidelines, I tackled rewriting and applying a simple redesign of these pages. continued

It’s worthwhile mentioning that a lot of the initial research on multi-column CSS layout for the Wired News redesign was done while studying examples from Eric Costello’s CSS Layout Techniques at glish.com, as well as Rob Chandanais’ Layout Reservoir at bluerobot.com. I started by relying on CSS2’s float property to position boxes next to each other. I ended up switching to absolute positioning for the left and right columns. The switch was made for two reasons:

• Buggy browser implementations of float — Use of float still seems to be inconsistent in some browsers. This is especially true when dealing with widths of children that, when totalled, come close to their parent’s width. The problem with float is that if the width of the parent element is ever less than the total combined width of the child elements, even just so slightly, one of the floated boxes will actually get pushed to the bottom of another floated box, instead of appearing beside it. This is actually correct behavior according to the CSS specification. However, when one of the columns bounces back and forth between two entirely different positions as the browser is being resized, it appears to be buggy behavior. Use of absolute positioning avoids that problem. But it does introduce another issue, where the columns can end up overlapping at extremely small browser window widths. A sacrifice I’m willing to live with for a guarantee that all 3 columns will always start at the same vertical position.
• Order of data in the markup — To avoid multiple headaches dealing with the inconsistencies of older/smaller browsers, I’m using the @import directive to hide styles from browsers which can’t adequately render them. For Wired News, I wanted the center (Main) column, containing the most important content, to be rendered first in the HTML markup, followed by the Left and Right columns. This would ensure the Main column is rendered first in browsers that get the unstyled content. With the float approach, either the left or right column would always have to come first.