Wired has upped the ante, but Mac-only browsers still can’t deal

October 21, 2002

Kudos to Wired News. Long the cutting-edge news site during the grand old days of the dot-boom, Wired have upped the ante on practical use of Web standards in mainstream sites. Their recent redesign is all CSS and XHTML, with not a table cell to be seen. Last time I looked, the front page even validated, although they have quite a bit of work to clean up their legacy content. This follows the recent redesign by Lycos Europe, which attempted an all-CSS layout but is full of strange markup errors – perhaps the result of glitches by their ad banner provider (which we also are afflicted with upon occasion) – and residual font tags.

Back at the beginning of last year I suggested that the only sites using valid markup were the ones about valid markup, or Web design more generally. With Wired, DigitalHit’s news page and a smattering of others now getting with the XHTML-CSS program, that’s no longer true, which is good to see. It’s hardly a widespread trend, but clearly some major sites are now taking the Web standards message to heart.

There are plenty of good reasons for doing what Wired has done. Maintenance costs fall dramatically when the site uses Web standards. The old quintuply-nested table layouts are fiddly, hard to maintain, and all too easy to stuff up. I’ve had readers sending me pages in that style, plaintively asking why it doesn’t work in one or another browser. It’s hard not to be rude in those circumstances, but instead I just politely explain that browsers are going to have a hard time working out what to do with improperly nested markup. Don’t expect me to do for free what they can’t work out for pay; diagnosing problems with that many tables and GIFs is hard. These folks, like the staff at Wired, will find that they are much better off simplifying the markup and using Web standards.

Although Wired isn’t the trailblazer and opinion-leader that it was in the mid-to-late 1990s, I’ve no doubt that this will push a few of the other big sites onto a 21st century approach to Web design, and that can only help. Most commercial sites are starting from a very low base anyway when it comes to Web standards conformance. A quick look at just about every other tech news site shows a mess of markup errors, tag soup and unnecessary browser sniffers. This is an issue for ZDNet, ComputerWorld and (spare me!) News.com – which even manages some basic tag mismatch errors, closing outer tags before all the inner tags have been closed. I’ve previously shown that even sites that purport to teach you HTML have problems with validation, but mismatched tags is beyond the pale. I’ve said it before, more than once, in fact that if you can’t even match up your tags correctly, you are a disgrace who should get right out of the industry.

Some of these sites also incorporate some utterly wrong-headed approaches to accessibility and standards support. ComputerWorld uses CSS, but it’s chock-full of messy classes with names like .sponsoredblack, .sponsoredblue and .topicsolive, and screen font sizes defined in half-point units (I know anti-aliasing makes the pixel grid on your screen less visually rigid, but I can’t see the sense in half-point units for screen display). ZDNet has mismatched tags and a browser sniffer that thinks iCab is Netscape (even when I set the tag to start with “iCab”) and Opera is IE. A few sites also have the bad habit of using XHTML-style img tags with the slash at the end (<img src="blah.gif" alt="" />) but not using actual XHTML. Would a DOCTYPE be such a hard thing for these guys to add? ZDNet will have to decide between the XHTML and HTML style, though, as their current home page contains a mixture of both.

Oh, and just two more things...

I’d be delighted if Wired’s example were to catch on. Of course, you knew there’d be a catch. Or rather, two catches. Those catches are our friendly neighborhood Mac-only browsers, iCab and OmniWeb. Because iCab doesn’t do any kind of CSS positioning, it presents the columns of the layout one after another. This looks silly, but at least all the content is there and the other formatting errors are pretty minor. OmniWeb is much worse. It supports positioning, after a fashion, but does so incorrectly. As a result, some of Wired’s content is obscured in OmniWeb. OmniWeb breaks some of the previously mentioned table-oriented sites, too. This example from ZDNet, mentioned on OmniWeb’s mailing list, somehow ends up with the footer at the top of the page, obscuring the content that is meant to be there. ZDNet’s markup is such a mess that I can’t really work out why – it could be the insane relative positioning hack they’ve put in for Windows IE – but it seems to be one more example of OmniWeb’s current problems with basic Web standards.

Yeah, yeah, wait for version 5...

Well, I’m waiting. More than two years ago, MacEdition took the then-brave step of using a lean, CSS-based layout with a minimal use of tables and not a font tag to be seen. We were criticized for this at the time, but I do feel we’ve been vindicated. The sad thing is that sites with a big share of Mac OS X usage are going to be held back more than other sites now, and for longer. It used to be that Netscape 4 held us back, but its share of our readership is down around 4 percent now, and dropping steadily. Now it’s the Mac-only browsers that hold us back. I suppose we could move to XHTML from HTML 4.01 Traditional, but that’s not really the big deal here. We’d also lose the ability to make iCab smile, which would be a loss from a marketing perspective and for production staff like me who like to use iCab as a visual check against markup slip-ups.

What I’d really value from a more extensive application of Web standards are easier maintenance, trouble-free print stylesheets, and the ability to redesign without going nuts. I know that our current layout can’t quite be replicated using DIVs instead of a table – there’s no way to force all the columns to end at the same vertical point. But there are more and more cool things that are possible without resorting to scads of JavaScript and single-pixel GIFs – things like Mark Newhouse’s clever ideas for list styling with CSS. Almost none of it works in OmniWeb or iCab, and what little works in one doesn’t work in the other, it seems.

Whether it’s a full CSS-layout experience like Wired or a compromise table-plus-CSS approach like MacEdition, Web standards are the way forward, and more and more designers are taking that path, leaving the laggards looking shabby. What a shame I can’t do all that I’d like to do without making a mess of things for 10 to 15 percent of our readers.

— CodeBitch (codebitch@macedition.com) is the grumpy cow who does the HTML production for MacEdition. Read other articles by CodeBitch

E-mail this story to a friend