Who invented the spacer.gif?
Do you remember this fish?
Since this blog is primarily about web standards and and usability, I thought this would be a good time to give you sort of an anti-webstandards, anti-usability insight. It’s a journey ten years back into time, where no web standards existed, and I learned how to make “killer websites“.
UPDATE 2006-03-03: I got an email from David Siegel himself, where he confirms that he invented the spacer.GIF technique.
A few moments ago I saw a job posting over at ajaxian.com. Note the final line:
Please send a short note and your resume (IN THE BODY OF YOUR EMAIL – NO ATTACHMENTS!) to david@dsiegel.com
I’m just curious here. Whould this be David Siegel, as the “inventor” of the transparent 1-pixel spacer gif?
To be honest, I’m not aware if he invented the trick, but I remember thatDavid Siegel invented this technique and his book introduced me to it back in 1996-1997. Seen in today’s perspective, some of the review comments for his book on amazon are simply amusing:
Do you want to know about how to use tables for layouts, use transparent 1-pixel GIFs as spacers or “shims” to keep everything from getting wobbly, and how to use GIF-text images in conjunction with actual text to make your page look just the way you, the designer, want it to? All those techniques are explained here in great detail
Also, check out the Wikipedia entry on spacer.gif (which sadly also lacks evidence about who invented the trick).
I’m suddenly seriously interested in this of purely historical reasons. It’s amazing how much effort everybody put into aligning tables and serving up spacer.gif’s. In this perspective, the wikipedia article has links to some amazing articles. Here’s from David Siegels website “The Single Pixel GIF Trick“:
Never Use the Standard HTML Constructs
If you want machines to read your web pages, use things like definition lists, unordered lists, headers, etc. If you want people to read them, don’t do it. They take away your typographic control. Specify your own font sizes when you want a size change. If you must use bullets, make your own bullets (I don’t see much point in bullets if your vertical grouping is good). And try not to number your list items. It is hardly ever necessary.If the standard HTML constructs delivered true typographic results, I’d use them, but since typographers don’t get invited to sit on the committees that make the decisions, I work around them to get what I want.
This is dated March 14, 1996. Note the original code that he used: It’s a <br> followed by a spacer gif just below the heading. Fantastic stuff at the time being, so I thought. Definately worth to retro check out. And remember to look out for other retro words like Netscape 3.0 and Photoshop 4.0.
Thus, to me, David Siegel invented the trick, printed it in a book and he was my first web design superstar (it was not until years later I heard about people such as Tim Berners Lee, Jakob Nielsen, Eric Meyer).
Also its kind of interesting that the transparent pixel has almost gone away again (perhaps with the exception of Disney and a few other websites). To put it in the words of Jakob Nielsen from one of his first Alertbox articles (1995):
The only certain trend on the Internet and WWW is that there are no trends on the Internet. It changes so fast that it is impossible to predict what will happen, and new trends may bloom and die overnight.
So please help me out here: Post anything you know here in a comment that can lead me closer to enlightment on who invented that gif and what happened!
PS. The accompanying website for the book is still available. Oh yeah, if you wondered about the fish, go see it in action on the site. To follow the spirit, the link opens in a new window:
Technorati Tags: anti webstandards, anti usability, spacer gif, table based layout, david siegel, jakob nielsen, transparent gif, transparent pixel
March 3rd, 2006 at 07:49 (GMT-1)
David Siegel just sent me an email:
March 9th, 2006 at 17:36 (GMT-1)
Ah, now that takes me back… 10 years ago and my first websites….
But if you think Netscape 3.0 is retro, I remember version 0.9 – it rocked!
November 25th, 2006 at 14:37 (GMT-1)
[...] Justaddwater: Who invented the spacer.gif? [...]
February 5th, 2007 at 23:52 (GMT-1)
Re: Who invented the spacer.gif?
Your comment:
I’m suddenly seriously interested in this of purely historical reasons. It’s amazing how much effort everybody put into aligning tables and serving up spacer.gif’s
My comment:
Not to crash anyones party, but as far as I know, I actually came up with it first. I was working in San Francisco at Young and Rubicam, a major ad agency. I was part of a division called RPM,
We were in charge of designing for marketing and such. We had Chevron as a client, and they were going to launch an important campaign, it was a car character, like the cars from the Pixar movie last year. This was their new mascot.
We were designing a site for it. I had already gotten pretty good at HTML and worked out the spacer for my design problems, tables didn’t work right, and so many things were not cross browser compatible.
I named it spacer, just a quirky wording I thought appropriate, since it wasn’t actually a space, and if I was doing a text string search, I wanted it to 1. stand out, and 2. not interfere with the word ‘space’ itself.
Having worked on minitel in France (1986-1988), I was already familiar with bending over backwards to pull of weird tricks. At that time, I would design a page, then using a hand written key, drawn on graph paper, I read out hexadecimal code that my friend transcribed on the PC, he would save the file, and voilla, a graphic page was created in code, when software was inefficient or unable to perform certain tasks.
In addition to the ‘spacer.gif’, I applied this concept in previous years in desktop publishing, think it was 1992. When 32 megabytes of RAM was allot, and I had a 100 megabyte hard disk.
I created a graphic in Photoshop of the letters QC, and made it look like it was cast out of gold metal. It had a red background. At that time, I used Aldus Pagemaker for page layout. With so little RAM and disk space, I designed the letters to sit in the middle of a magazine cover.
So, I had some letters, with a red background, sitting on a big white background. I tried to match the CMYK values using a box created in Pagemaker, but since it was new technology at the time, when the proof print was made, the Pagemaker red did not exactly match the red from the image. I then created a 1 pixel red color in a Photoshop file, imported it into Pagemaker, and stretched it to the size of the page. Worked like a charm.
Since you were looking to discover the history, for what it’s worth, there it is.
joe
February 11th, 2007 at 19:48 (GMT-1)
[...] All of a sudden, Joe Kleinberg posted a comment on “Who invented the Spacer.gif“, with the claim that he actually invented the technique [before David Siegel]: Not to crash anyones party, but as far as I know, I actually came up with it first. I was working in San Francisco at Young and Rubicam, a major ad agency. I was part of a division called RPM, [...]
December 6th, 2007 at 18:28 (GMT-1)
[...] Oh and by the way, did you know who invented the spacer.gif? [...]
January 3rd, 2008 at 03:58 (GMT-1)
[...] Who invented the spacer.gif?David Siegel invented this technique and his book introduced me to it back in 1996-1997. [...]
April 3rd, 2008 at 00:12 (GMT-1)
I’m Spartacus! And I also invented the spacer.gif. Actually I was calling mine transparent.gif at the time, tail end of 96, and using them below graphics for headings and between buttons and such like. Started using them in tables in 97 in a single line of one pixel high TD’s. Does that mean I can sue Dreamweaver for their TABLE output?
I guess necessity is the mother of invention, and there were all sorts of clever approaches back then. Biologists call it ‘convergent evolution’. Now it’s all just who invented the latest CSS hack! Guess things never really change after all!
December 5th, 2008 at 10:21 (GMT-1)
Heh, see also other
famous products invented by two different parties at same time (via Gerard Toonstra)