Making News with Web standards

In: Articles

By Jim Ramsey

Published on October 27, 2004

The San Francisco Examiner recently became one of the first newspapers in the country to fully adopt Web standards and publish a site that utilizes valid XHTML and uses no tables for layout.

I’ve been the webmaster at the Examiner for almost four years and have redesigned the site many times. With each redesign, the HTML and JavaScript seemed to get more complex. Eventually, working on the site became a complicated and discouraging experience.

Then I discovered Web standards. I started frequenting sites like A List Apart, Douglas Bowman’s Stopdesign, and Dan Cederholm’s SimpleBits. In contrast to Flash-based portfolio sites that relied on graphics and animation, these sites were about content, typography and creating simple, effective page layouts.

These sites looked great. More importantly, they were doing away with bloated HTML and relying solely on CSS for page layouts. One look at the source for these pages and I never wanted to nest another table again.

I slowly began incorporating more CSS into a transitional table-based site. When the decision was made a few months ago to open the San Francisco Examiner’s Web site to advertising—requiring a complete redesign—I knew it would be the perfect opportunity to create a fully standards-compliant site.

The journey took almost a year and required several revisions. It was at times frustrating and slow-going, but the advantages of Web standards are undeniable.

Goodbye, old friend

One little bittersweet detail of designing with Web standards is the disappearance of the spacer gif. When I first started learning Web design, it was magical the way a little transparent one-pixel-by-one-pixel image could make tables do whatever you wanted. But now the spacer image is on the endangered species list and is likely to go the way of the blink tag. I checked the stats for the Examiner site just to see what difference it’s made.

In March, when our site was a transitional table/CSS-based layout, the spacer gif alone accounted for over 90 MB of bandwidth, about 0.3% of the total transfer that month. In July, after we’d moved to a fully CSS-based site, it was less than 2 MB (0.004%) of the total bandwidth for that month (from a handful of old articles that hadn’t been updated yet).

Admittedly, shaving off less than 1% of monthly bandwidth isn’t necessarily earth shattering, but the disappearance of the spacer gif is an interesting footnote as sites abandon tables and make the transition to CSS and Web standards. And when it comes to saving bandwidth, the spacer gif is just the tip of the iceberg.

Simplify, Man!

This is what a basic link in our navigation looked like late last year, before standards:

<tr>
<td class="navmenu" height="18" onClick="javascript:rolloutNav(this);document.location='/home/index.cfm'" onMouseOver="javascript:rolloverNav(this);" onMouseOut="javascript:rolloutNav(this); " colspan="2"><a href="/home/index.cfm" class="nav">HOME</a></td> </tr>
<tr>
<td bgcolor="#EEEEEE" class="navmenuspacer" colspan="2"><img src="/files/includes/images/articles-site_images-spacer.gif" width="1" height="2"></td> </tr>

Now take a look at what an Examiner navigation link looks like now:

<li><a href="/home/">Home</a></li>

That’s a big difference. In fact, the first one is so bad, I’m almost embarrassed to include it here. And what did I get for all that extra stuff? Basically, nothing. The JavaScript triggers the rollover effect and the table cells control the spacing. All of that can be done using styles.

Let’s take another example. Here’s how a link to a story in the Arts section looked before standards:

<img src="/files/includes/images/articles-site_images-sfex-homekickerarrow.gif" width="6" height="8"><span class="kicker">Movie Review: Dickie Roberts<br></span> <a href="../templates/story.cfm?displaystory=1&storyname=090503a_dickie" class="headlinesm">Problem 'Child'</a><hr noshade size="1" color="#EEEEEE">

Here’s the same thing following standards:

<h5>Movie Review: Hero</h5>
<h4><a href="/article/index.cfm/i/082704a_hero">Holding out for a 'Hero'</a></h4>

Again, once it is styled, the second version can be made to look identical to the first. When you can simplify markup in this way, it starts to make a big difference in bandwidth.

Comparing last year’s table-based site to our new standards-based one, the amount of information on our homepage is strikingly similar. Both contain basically the same elements and yet the HTML is 13K smaller on the CSS-version at 19.6K.

As a result, even though our traffic was about 40% higher in July 2004 than in September 2003, our bandwidth was almost exactly the same for those two months.

A link in the right direction

It is common for sites to link directly to a printer-friendly version of an article, and I can understand the motivation. The printer-friendly template provides a stripped-down, self-contained copy of the story. However, this should be alarming to site publishers who generate advertising revenue.

Printer-friendly pages rarely contain ads and usually do not provide the same navigation as regular pages. As a result, visitors who land on a typical printer-friendly page are less likely to browse to other pages of the site.

With a standards-based site, however, the printer-friendly template is replaced by a print stylesheet, which is applied to the regular page and only used when that page is actually printed. Those linking directly can be forwarded to the regular article page. Not only can bandwidth be saved by not duplicating files, but site managers can also ensure that site branding is maintained, that ad revenue is increased and that all visitors are able to browse and search the site from all pages.

Making a silk purse out of a sow’s ear

In addition to the myriad of “under the hood” advantages that standards offer, for a text-heavy site, CSS is a designer’s dream. A computer screen is far from the best device for reading text, so making the experience more comfortable for the audience should be of primary importance to designers working on text-intense sites.

A printed newspaper has a limited amount of space, so the space between lines (leading) is usually tight to allow as much content as possible. On the Web, however, designers don’t have to deal with space limitations in the same way. Even without a full standards-based redesign, most sites could improve readability by increasing leading (using line-height) and increasing the space after paragraphs (using margins).

Getting others to take the leap

I have little doubt that more and more newspaper and media sites will begin to make the jump to Web standards. The advantages are numerous and, as browser support improves, the disadvantages are practically nonexistent.

But just to give others a gentle push in the right direction, here are some interesting statistics on five leading newspaper sites:

Newspaper	Spacer gifs	HTML size *
Washington Post	20	120.7K
New York Times	62	69.8K
Los Angeles Times	66	83.0K
USA Today	153	79.3K
Christian Science Monitor	215	74.1K

* Exact size of HTML varies from day to day.

It will be interesting to check again in a year to see how these numbers have changed. My hope is that all these papers will decide to adopt Web standards, even if it means putting all those spacer gifs out of work.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Web Standards, CSS