adrian holovaty

July 8, 2002, 8:16 PM ET

Redoing your old pages in CSS, step by step

Digital Web Magazine has published a great tutorial on converting current Web designs to CSS. After a detailed run-through of a sample redesign, the author compares the file sizes of the table-based and CSS-based designs, concluding...

Contemporary CSS methods do win a victory in a head-to-head match based on file sizes. But more importantly, using CSS for pure presentation allows the removal of all spacer GIFs, HTML tables, and a total of 31 images! The benefits of dropping those methods are sizable savings by themselves. Couple these savings with the added bonus of valid markup that will work in standards compliant Web devices, and it's very clear that CSS is the way to go.

Well said. Now, only if news sites listened.

Comments (5) / Permalink

July 8, 2002, 4:18 PM ET

Bowing down to Microsoft

Here's a depressing story from news.com: Sites bow to Microsoft's browser king The headline about says it all; the article claims many Web developers are ignoring Web standards in favor of using proprietary Internet Explorer code.

On the other hand, here's a reaction to the story from a member of the Web Standards Project.

Comments (3) / Permalink

July 8, 2002, 12:14 PM ET

Spacer GIFs and ALT attributes

The latest tip in Mark Pilgrim's 30 days to a more accessible weblog series is to use an empty ALT attribute on spacer images so non-graphical browsers will ignore them.

In my mind, spacer GIFs, which are transparent 1x1-pixel images that some Web designers use to achieve precise positioning of elements on their pages, are a severe bastardization of what HTML was intended to be. Images are meant to add pictures and graphics to your Web pages -- not to push your text over 155 pixels to the right, to set up an adequate margin. (That's what style sheet properties are for.)

But aside from that argument, spacer GIFs have a terrible effect on text-only browsers. (This is Mark Pilgrim's main point.) Since a text-only browser can't display images, it displays the ALT (alternate) text for images in their place. Thus, a page with lots of spacers might look like this in a text-only browser:

[spacer][spacer][spacer]
[spacer]
[spacer][spacer][logo]The Anytown Daily News
[spacer]
...

Not pretty. If the above example had used blank ALT attributes, all of those annoying [spacer]s wouldn't have shown up.

I examined the code of several large newspaper Web site home pages to see how rampant spacer GIFs were. Here's the bad news:

nytimes.com used 103 spacer GIFs, all without ALT attributes. I visited their site with a text-only browser and was met with an ugly sea of [spacer]s. It's clear that text-only browsers are not welcome at The New York Times.

washingtonpost.com used 36 spacer GIFs -- significantly fewer than the Times, but worse, for the following reason: Each spacer image was specifically designated as ALT="spacer". If they cleared these ALT values, they'd make their pages look a lot cleaner in text-only browsers, and cut their home page's load time.

cnn.com used 48 spacers, but they got it right -- each one had ALT="". Nice.

latimes.com used 0 spacers. Instead, their spacing needs were handled by style sheets. Outstanding. CORRECTION: Style sheets handle a part of their spacing needs, but Todd pointed out that the page does indeed use spacers -- 87, in fact. Some have ALTs, some don't.

usatoday.com used 94 spacers. Like nytimes.com, none of them had an ALT attribute. Poor.

chicagotribune.com used 86 spacers. These were all over the map. Some had ALT="", others had ALT="spacer", and still others had no ALT attribute at all.

Comments (10) / Permalink