The History of the Web

I’d really recommend reading a thread on Eric Meyer’s blog from early 2007. In it, he poses a pretty simple question for his regular readers:

What do you consider to be some of the most important events in the history of CSS and web design?

There are a lot of different answers, and more then a few that come up again and again. Which makes sense. The web was an incredibly dynamic place in the early 2000’s, when web standards were starting to gain momentum. There were ahead-of-their time browsers like Internet Explorer 5 for Mac. Sites like ESPN and Wired that drew a line in the sand with timely HTML and CSS-based redesigns. And the hugely influential CSS Zen Garden project acted as a sort of beacon for web designers to follow.

I’d actually point to a year. My answer would be 2003. That year marked the transition from table-based hacks to standards-based designs. It was a year of experimentation and new, bold techniques.

Designing with Web Standards

If you’re looking for an even more specific date, we can try to narrow it down to a day that kicked things off. May 24th, 2003, the day Designing with Web Standards by Jeffrey Zeldman was published. That book would serve as a handbook for a lot of designers trying to pull themselves away from Flash and table layouts. There were, of course, other books and articles to help ease designers looking to switch. But Designing with Web Standards offered a pragmatic and accessible approach that brought a lot of designers to the standards world.

Years before, in 1997, Zeldman had also co-founded a mailing list with Brian Platz called A List Apart. The two felt that there wasn’t really a place on the Internet for web designers to congregate. The few places that did exist were bombarded with unhelpful tips and aggression. So Platz and Zeldman started a mailing list of their own, mercilessly filtered out the noise, and left in its place a wellspring of techniques and conversation for designers breaking into the industry. In a few short months, they had 16,000 subscribers.

The following year, A List Apart was converted to a website and publication, where newly minted experts could go and share the latest best practices. As the site grew, it became a sort of home base for the larger standards community. One only needs to look to the article To Hell with Bad Browsers, written in 2001, to see where the attitude the site embraced. In it, Zeldman rhetorically asks himself, “Who Cares?” about web standards (a question he was no doubt asked a lot). His response:

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.

The Year of Hacks

Flash forward again to 2003. Zeldman publishes his standards-based design handbook and uses A List Apart to introduce new ideas, techniques and inspiration to the community. Not all of the greatest design hacks and tricks started on the publication, in fact a good amount didn’t. But most of them found traction there. In the 12 months or so that followed Designing with Web Standards, A List Apart published some of the most seminal articles of the period, featuring tactics still used in some form today.

And they all used CSS, which is pretty cool. Here’s a look back at a few of those.

Fahrner Image Replacement

As the legend goes, Todd Fahrner, a web standards advocate, first came up with the idea for Fahrner image replacement. But it was C.Z. Robertson who first blogged about it, and Douglas Bowman that got the word out. In Facts and Opinion About Fahrner Image Replacement, developer Joe Clark gathered together the tidbits of knowledge surrounding the technique in one place.

The problem was this. Web fonts weren’t truly available to web designers. So instead, a lot of designers would simply embed an image where text should have been so they could use an image instead of a custom font. Unfortunately, that left the text completely inaccessible to screen readers and search engines, and generally speaking, was pretty bad for the web.

So the Fahrner Image Replacement technique allowed designers to use text in the document itself, but swap that text out with an image using some fancy CSS. In the original proposal, display:none with an extra element was the text-hiding parameter of choice. But as it turns out, screen readers will mostly ignore this too, so this eventually changed to use text-indent and pseudo elements.

Web fonts may be work better these days, but the FIR is still in pretty wide use.

Sliding Doors

Sliding Doors was a neat little trick that Douglas Bowman wrote about.

Sliding Doors was a CSS workaround for adding images as borders to the left and right of an element. In principle, that sounds pretty simple. But it actually took some thinking through in the early days of HTML and CSS.

The technique was introduced by Douglas Bowman in October of 2003 and kept things pretty simple. A designer could cut up their elements background into two parts. The right side would be most of the background and the right border. The left image, though, could be cut into just a tiny sliver.

Then, the only thing left to do was use the right border image on the main element and the left border image on an absolutely positioned element (which later became pseudo-elements). Because of the way the images were sliced up, they could accommodate a certain amount of stretching, or sliding, open or closed, depending on the width.

Another trick that was easy, direct, and incredibly effective.

Suckerfish Dropdowns

A dropdown is when a list pops open when a link is hovered over and clicked, and it’s a piece of UI that’s historically difficult to nail with code. In the earliest days of the dropdown pattern, most developers just used JavaScript to do everything, swapping in elements dynamically. A user hovered over a button, and JavaScript would go grab a piece of HTML and instantly slide it in, vaguely creating the illusion of it “dropping down.”

In November of 2003, Patrich Griffiths and Dan Webb offered another way with their Suckerfish dropdowns. The Suckerfish dropdown used only CSS to create the same effect, ultimately relying on a combination of absolute positioning and the :hover pseudo element. The idea was simple and effective. Instead of swapping elements in and out, they could simply be hidden and shown.

But this had already been proposed in the past. The issue was that the technique didn’t work in Internet Explorer because of a :hover-based bug. Griffiths and Webb’s major contribution was a fix for that. Using just a few lines of JavaScript, developers could simply toggle a new class on the element in question whenever it was hovered or clicked. The dropdown effect would then apply to both the hover pseudo element and this newly created class.

The introduction of Suckerfish dropdowns made dropdowns more accessible, standards compliant, and lightweight. Even today, most dropdowns (like the one in Bootstrap)  still use a variation of this technique.

CSS Sprites

Sprites were first proposed by Dave Shea in 2004, but it’s making this list anyway. Because in 2003, Shea was busy launching and collecting contributions for the CSS Zen Garden. He picked up a ton of tricks along the way, but there was one in particular that stood out to him, and it actually borrowed from 2D game design.

Because games often have a huge amount of images to keep track of, game developers would often arrange all of their images in a single file, called a sprite map. When that image needed to be used, they would cut it out on the fly and add it to the game.

Shea took that idea and applied to web design. Designers could create a single file with all of their images on it, and then use a combination of background-image and background-position in CSS to pull those images out and put them anywhere on their webpage. It made images easier to manage, easier to edit, and re-usable. Like so many other techniques, it was game-changing for quite a bit of the web.

The list really does go on and on. There was a couple I had even had to cut from this draft. There have been a ton of resources out there that helped us understand and design for the web. But none was more crucial as the crest of the web standards wave rose than A List Apart.