To Hell With Bad Browsers

If the design of this site looks relatively coherent, congratulations! Your browser does a good-to-excellent job of supporting web standards like CSS-1, HTML 4.01/XHTML 1.0, and scripting languages. If this site is readable and usable but looks as plain as an Amish coat, your browser does not support web standards. Fortunately, you can easily upgrade to one that does. Before you start shrieking, perhaps you’ll hear us out.

What have you done?#section2

We’ve upgraded the design of A List Apart to comply with web standards, some of which (like CSS1) date back to 1996. This, of course, is the year 2001.

Why doesn’t it work in old browsers?#section3

They were not built to comply with web standards. The content of this site will be accessible in any browser, but the design will only work in browsers that support CSS1.

Why have you done this terrible thing?#section4

For years, the goal of a web that was accessible to all looked more like an opium dream than reality. Then, in the year 2000, Microsoft, Netscape, and Opera began delivering the goods. At last we can repay their efforts by using these standards in our sites. We encourage others to do the same.

To do so, check The Web Standards Project’s Browser Upgrade initiative for tips and support. You can also do this on your own by validating your markup and courteously alerting your visitors to the existence and location of standards-compliant browsers. The Browser Upgrade initiative simply makes it easier for you.

Designing in accordance with these standards does not necessarily mean ending support for old browsers. It does mean looking long and hard at what that support entails. If you are deliberately deforming your markup to accommodate an increasingly small percentage of users, and if that deformation locks out other users (such as people with disabilities, or those who use Palm Pilots, Lynx, screen readers, and other non-traditional browsing devices), you might consider upgrading your standards compliance even if the resulting sites look fairly ho-hum in old browsers. If your site is compliant and the content is accessible to all, you may well have done the right thing.

Why now?#section5

The standards have been around for years. Browsers that support them have been around for six months to a year. If not now, when?

It typically takes 18 months or longer for web users to upgrade their browsers. Many still use browsers, like Netscape 4, that date back to 1997. These folks will only upgrade if we give them a reason to do so.

If enough of us do this, the 18 month pregnancy might be shortened, ushering in a web built on common standards that much sooner. Seems like a worthy goal to us.

Think your crummy design is worth all this?#section6

This is not about graphic design. It’s about the separation of presentation from structure, which will allow us to do amazing things. Like redesign an entire site in hours instead of months. Stop authoring and debugging stupid, browser-specific markup. And support non-traditional browsers and devices, from Palm Pilots™ to screen readers, without building multiple versions of every page. All pretty good stuff.

Who cares?#section7

If you’re a web designer, you do. In six months,  a year, or two years at most, all sites will be designed with these standards. (Or they will be built with Flash 7.) We can watch our skills grow obsolete, or start learning standards-based techniques now.

Given the dot-com economy’s recent woes, counting on your existing skills to keep you employed does not look like a promising strategy. Learning to work with emerging technologies is probably a much better plan. We’d like to see all ALA readers stay gainfully employed and productive over the coming years. Paying attention to these issues could help you do that.

If that isn’t enough, consider the new laws about web accessibility. Separating structure from presentation via semantic (X)HTML and CSS layout can help you comply with these laws. Sticking with hacks and workarounds makes compliance that much harder. The temporary downside is that standards-compliant sites may not look great in older browsers. But most users can upgrade their browsers far more easily than people with disabilities can upgrade their eyes, ears, or limbs.

Can 4.0 browsers read your Style Sheet?#section8

Yes, but they bungle it so badly that we’ve used link trickery to turn off styles in these browsers, using the @import directive to link to our style sheet.  A Designer’s Journey explains how we did this.

Why can’t you offer backward compatibility?#section9

Old software does not support standards. Didn’t we mention that already? It would be swell if we could have backward compatibility and pure standards compliance. But we can’t. We have to choose. For years, most of us have chosen backward compatibility. But is this really the best choice?

For years, we’ve been taught to be good little web designers, building sites that work in browsers that don’t. Each site we build the old-fashioned way becomes one more dung heap of bad code, one more web destination that will eventually stop working as browsers and standards evolve.

The longer we do it, the more doomed sites proliferate. Thousands of new sites premiere every day. Most of them are built to support bad browsers intead of standards. It’s an epidemic. Enough already. We finally have good browsers. Let’s use them.

Let’s push these new browsers for all they’re worth, discover the remaining holes in their standards compliance, and help browser manufacturers make them even more compliant. Flash designers do this. They push Flash as hard as it will go, butt their heads against its limits, and tell Macromedia how to make it better. As a result, Flash keeps improving. Shouldn’t we be doing the same for the tools that deliver 90% of web content and functionality (i.e., web browsers)? The WaSP thinks so and ALA thinks so, too.

My company has “standardized” on a 4.0 browser.#section10

We realize that many of you are stuck in that predicament. Consider this an opportunity to alert your boss or your IT department to the fact that 1997 browsers are holding back the web. Make them think upgrading was their own idea. That often helps. (If you can’t persuade them to upgrade to a post-1997 browser, and therefore can’t even consider switching to full CSS layout at this time, you can at least use limited CSS to control typography and colors, use as many structural tags and as few nonsemantic tables as possible, and validate your markup and style sheets.)

I can’t afford a new computer, and my old one can’t handle these newfangled browsers.#section11

Standards-compliant browsers need not be bloated and processor-intensive. Many require less computing power than the 4.0 browsers did. We don’t want to name names, but if you check the WaSP’s Browser Upgrades page, you may find one or more browsers that can run on your existing system just fine.

Say what you want, these new browsers won’t work on my 286 machine with 4MB RAM.#section12

Probably not. Then again, if we hasten the adoption of common web standards, we’ll make the web more accessible to all – and encourage the makers of low-cost Internet devices and workstations to support those same standards in their new and affordable products.

Meanwhile, this site complies with standards and works in any browser. It looks better in CSS-compliant browsers, but the content is accessible to any browser or device. It’s also a low-bandwidth design (and even lower now that we can discard 6K of nested table cells), which makes it friendlier for those with slow connections and older equipment.

This site will work in any device that reads HTML. It doesn’t get more user-friendly than that.

JavaScript is evil!#section13

Thank you for sharing. Turn JavaScript off if you like; the site will still work.

Why didn’t you use XHTML?#section14

Laziness, and the need to finish redesigning the site in time for the WaSP’s Browser Upgrades launch. Also, last time we checked, HTML 4.01 was a valid web standard. {Ed. – After one or two HTML 4.01 issues, ALA converted to XHTML.}

Are you on crack, or do you really expect other sites to do this?#section15

Which question would you like us to answer first?

Do you really expect other sites to do this?#section16

Well, we’ve done it. And longtime ALA affiliate the Babble List has just done it too. Numerous site builders have already told us they plan to follow suit. Will your site be next?

You’d be in good company. Many sites are already using Style Sheets extensively – including CNN, ESPN, and Hewlett-Packard. These sites use code that figures out which Style Sheet is best for your browser, and then loads it dynamically. What we’ve done instead is write one style sheet that will work in any browser with good CSS support.

We recognize that not every site can make this change now, and we don’t expect them to. But as more of us begin doing this, others will join. One man with a club is a hooligan. A thousand men with clubs are a regiment.

Why would any sane client agree to this?#section17

Why would any sane client spent half a million dollars on a Flash site without even requesting an HTML version? Beats us, but we can name a dozen companies who’ve done that in the past month alone.

Why would any sane client agree to a site that works only on one platform? Hell if we know, but we’ve seen it happen and so have you.

Supporting standards at the cost of downgrading the visual experience in old browsers makes more sense to us than either of the two practices we’ve just mentioned.

And don’t forget, you’re not limited to sane clients.

Actually, over the past few weeks, some of our sanest, smartest clients have requested or been persuaded to consider standards-compliant designs that separate presentation from structure. Will every client want this immediately? Undoubtedly not. It is a question of audience needs and goals. But starting from the premise that no client will want to do this is defeatist and probably wrong. In our experience, generalizing about clients is as pointless as generalizing about snowflakes. Every client and every project is different.

How do you do this?#section18

Funny you should ask. This week’s companion article explains how we made the transition from an HTML table-based layout to one built with two divs and a style sheet. You might find it useful.

You can also learn about standards here at ALA (start with the articles or topics listed in our sidebar) and from swell publications like Builder.com, Webmonkey, Webreference, XML.com, or straight from the horse’s mouth.

Are you saying that HTML tables are dead?#section19

No. There are good and bad uses for HTML tables. The best use is the intended one: to present tabular data such as might be found in a spreadsheet. But during this transitional period, when some users are stuck with old browsers and new browsers are still perfecting their standards compliance, you might sometimes use tables for layout.

One fair use might be to create a multi-column layout. ALA was able to do a two-column layout without tables, but a three-column layout is not particularly easy to do with CSS alone, though it is planned for CSS-3. Undoubtedly there are ways to create three-column layouts with the CSS support we have now; we just haven’t figured them out yet.

On the other hand, using nested tables to simulate a one-pixel border around an area, or using a table to create a background color for text, is no longer necessary once you use style sheets. And frankly, it’s much easier to type <div id=“menu”> than to spend your life debugging HTML table cells.

Have you tried updating a production site like Yahoo! or Amazon to separate the content from the presentation?#section20

We were kinda busy this week. But ALA’s David Eisenberg gave it a shot. After two hours, he had partially converted Yahoo! Weather. Download the zipped, Yahoo Weather file if you’re interested, and don’t say we never gave you anything.

Note to the litigious: we’re not claiming to be associated with Yahoo (we’re not associated with Yahoo), nor do we intend trademark or copyright infringement. The zipped file is merely a teaching exercise, using a well-known (and lovely!) site to see if it can be converted by standards-compliant design methods. We adore Yahoo and weep with admiration for Yahoo’s lawyers. We wish Yahoo’s laywers and their families a thousand years of health and prosperity. It’s good you wished those bad men into the corn field.

Two hours, huh? And it’s still unfinished?#section21

If you’re implying that switching from old-style web design methods to new ones isn’t always easy or automatic, you’re right. Mostly this is because few of us understand CSS on a truly deep level. Even those of us who think we get it still have our training wheels on.

Working with HTML tables, though a demented process, is now second nature to most of us. Understanding and manipulating the CSS box model, and using CSS techniques such as float to control positioning, requires learning and patience. It also helps if you’re willing to forego slavishly duplicating an existing table-based layout, and let CSS be CSS. Above all, be willing to experiment, and don’t curse the new simply because it is different.

Have you rebuilt the entire ALA site?#section22

No, we are merely using CSS layout as we go forward from this issue.

You suck, and you’ve just lost a reader.#section23

We’re sorry you feel that way. Before you leave, why not share your feelings in the ALA discussion forum associated with this article?

{This editorial was concocted by Zeldman, with kibbitzing from J. David Eisenberg. This magazine was redesigned by Zeldman with massive power thrust assistance from Anonymous Donors A and B. Keep Watching the Skies.}