Just caught the new version of the BostonHerald.com and I’m thrilled. They’ve got a nice, clean new version of their site up…and it’s using tableless CSS layout! (Read more about tableless css here)

Tableless CSS has become the standard for web designers over the past few years, but has lagged behind in newspaper web sites due to their concern that CSS might not make their site accessible to people using pre-IE 5.5 browsers, as well as a raft of other (generally inconsequential) issues. Note that IE 5.5 was released in July of 2000, over 7 years ago. I don’t see a lot of pre-5.5 in my analytics reports, and my view is that if you’re using IE <+ 5, you are most certainly used to having problems when browsing.

So let me show you a little trick to tell how good your web designer is. Go to any of his/her recent sites. Right click on the screen, then click “view source” – if you see a bunch of “<TD>” and “<TR>” tags all over the place, the design is out of date (unless it’s something that should be using a table like sports scores or stock market results). You should be seeing “<div” and “<span>” tags. Even better, go to http://validator.w3.org and plug in the url. See how many validation errors it throws (and most sites will throw some, including ones I’ve designed…).

If you don’t believe me that the newspapers have been slow to adopt tableless css, go to Boston.com – the site of the Boston Globe, owned by the NY Times (strangely, the Times site does go tableless), and then right click, view source. Then go back and look at the clean, crisp code that their tabloid competitors at the Herald are using…

So why use tableless CSS?

• It’s easier for Google/search engines to read.
• You have better control of design.
• It’s easier to work with the code – that means it’s easier to maintain.
• Easier cross-browser and cross-platform (mobile) transition
• You won’t be ridiculed by web wonks like me…

Other general notes on the design:

• They have greatly simplified their navigation – long overdue.
• The move to a horizonal navigation gives them more “above the fold” content space.
• Much better use of the main image. They had been using very small (100 px wide) images with the lead story. Now the lead gets a nice graphical presentation.
• Comments now are listed on the homepage below the story. A nice touch…
• Daily picture gallery – “News and Opinion in Photos” – right on the homepage.
• No more digging to find my favorite columnists…they’re right there on the homepage, or no more than one link down.
• Usability – this site is much easier to read and much easier to use.

Are there problems? Sure, but most of them existed before or are minor things that will be shaken out soon. Things like slashes showing up in odd places, which is a simple coding fix (slashes are used to tell the database that things like apostrophes are characters, not code…you see apostrophes can mean things in code…). Oh, and their center column runs much longer than either the right or left. But their site has *always* had that issue…

Kudos to the Herald crew. Great job!

(Update: 9/6/07 – this is apparently a rolling go live – they’ve added a tabbed lead section for the lead story/graphic that puts the lead story, lead news, lead sports and lead entertainment at your fingertip a click away.  Very nice presentation and one I expect to see more in online news.  I’ve been looking at it for a couple site designs myself…)