Posted in Web

Futureproofing amps

The high profile Wired News redesign has attracted a lot of attention, primarily because of the Web standards we’re using, and the effort we’re making at keeping our code compliant and error-free. However, daily editorial additions continue to allow XHTML validation errors to sneak into the Wired News markup. The most frequent culprits are the ampersands (&) which separate name/value pairs in URL query strings, or which commonly appear in our English language in company names like AT&T or slang acronyms like R&D. Section C.12. of the XHTML 1.0 specification effectively explains why these symbols need special treatment. continued


After a day’s worth of “almost there” blog entries and email messages [xhtml validation], I now proudly announce that Wired News is there. Our developers and engineers who hunted through multiple Vignette components to find the errors and destroy them deserve all the credit. Brilliant job comrades!

Eric chimes in

I’ve also been in touch about the redesign and working closely with Eric Meyer for the past few months. He’s been a tremendous source of encouragement and inspiration along the way. He powerfully adds:

“… the really important stuff all happened behind the scenes. Using no tables to lay out the page, but instead applying CSS to XHTML, the site is a stunning example of how standards can be made to work today.”

Wow, even as I write this, an engineer just yelled across the room that that article about the redesign is currently the number one topic on BlogDex, and rapidly climbing on Daypop (both index thousands of weblogs and report back the most popular topics of the day). Hail to the bloggers of the world — they actually get it because they’ve been doing it.

The snowball begins

Just after wrapping up my last post, I started looking around to see if any buzz about the WN launch had hit the Web yet. Ahem… I don’t think this one will sneak under too many radars. Jeffrey Zeldman just dedicated a huge amount of space to the redesign in today’s Daily Report. In a perfect answer to the “what’s the big deal?” questions I just asked, he writes: continued

Lost in space[r] thumbnail image I was looking up flights to Miami on today for an AIGA design conference I’ll be attending in November. I came across this awkward rendering [.gif, 48 KB] of their much-touted “matrix display”. All missing images pointed to, presumably a transparent spacer gif. I think it ironic that something supposed to be transparent can cause an interface to change so drastically if it happens to go missing. continued

Measured accessibility improvements

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 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

Well said

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

Versioning CSS and images

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.

Missing style sheets?

We moved some of our CSS and image files to a different central server today which we can all reference for design and development versions of the site. I almost immediately noticed that Mozilla and Netscape browsers weren’t rendering our pages using styles anymore. A search on Google turned up this article on Netscape’s DevEdge, which pointed out that some Apache and iPlanet web servers have an incorrect mime-type set for CSS files. An incorrect mime-type will cause Gecko-based browsers to ignore the entire CSS file when thrown into “strict mode” by the DTD. Changing the mime-type on our Apache server solved the problem.

News on the go

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