06/04/04
I laugh at your spacer gifs
I’ve just been redoing a designer’s table-based layout as CSS. The code was a soup of table cells and spacer gifs. One thing I found interesting was that rather than use a 1×1 pixel gif and resize it everytime with HTML markup, they’d created a whole folder of spacers of varying sizes! Wow, this is old-school at its best!
Needless to say, the pages are now lighter and consistent, but you can be so blinkered in your minority ‘web standards world’ you can easily forget that there are still designers using these methods today.
Take heart: Whenever it frustrates you that you need to add css hacks, and the odd surplus tag, to get a page to work, remember this folder of spacer gifs.
Tags: gifs, webstandards
Previous
Download our vCard
Stuart Barr said 1498 days ago:
Back when Tony Blair looked fit and healthy you used to encounter a bunch of sites that had been produced with Microsoft Publisher. It were a poor man's quark, and to 'Save as HTML' it would just take a snapshot of the page you were working on and save the whole thing, text an' all, as one giant gif...Bruce said 1498 days ago:
At least they're past the method of spacing ;)Bruce said 1498 days ago:
Sorry should have been Veerle Pieters said 1498 days ago:
Your funny title did attract my immediate attention ;-) There are projects where I still use them (a one pix of course) actually. It's not an ideal world yet, some clients still demand tables for lay-out. I actually did my good deed for the day because I convinced a PHP programmer that it would be better to use CSS instead of tables when generating content and now he's going to learn the whole CSS thing. So one down but many more to go ;-)Jon Hicks said 1498 days ago:
Stuart - sounds like a good idea to me ;o) (fancy seeing you here BTW! Nice to see you...)Veerle - Its a hard one to convince, and there are still some instances where tables are best. Sometimes I just do a CSS layout and see if they notice. The clients that ask for table layout rarely look at the source code, and most of the time I get away with it. This isn't arrogance - I've just forgotten how to use tables!
Stuart Barr said 1498 days ago:
I must admit I'm a bit new to this RSS stuff, having installed it to do a bit of research for a client, so when your title popped up I initially thought Jakob Nielsen had finally found a way to personally insult everybody on the internet.ak said 1498 days ago:
to follow up on veerle's comment:a while back i did a job shadow under an asp.net programmer. for a website, he had some horrendously coded tabs that were causing him backend troubles. i ended up showing him some css tabs, and he was so excited about it, he bought me lunch! :D
Veerle Pieters said 1498 days ago:
@ak, that's so funny since the programmer did buy me lunch too LOL ;-) He was so thrilled about all the CSS info, tips, urls... I gave him that he insisted. He was impressed with how fast all my entries of my blog loaded and that's why he asked about it.@Jon, I understand if I can I'll convince, no doubt about it. It's just that sometimes my client needs to work on the (DreamWeaver) templates I give him and then I kind of choose the easy way to be sure it won't get messed up or to be sure they can work in the lay-mode of DreamWeaver. With a "tableless" code it's less obvious. Luckily these kind of jobs are really exceptions.
Lee said 1498 days ago:
The good news is that CSS is a salesman's dream, a product that sells itself.It's as easy as selling ice-water in the desert (or so I've heard).
Scott Johnson said 1498 days ago:
Gosh. That is old school. I didn't think that anyone ever built sites with GIFs like that. I've always used the 1-pixel file and never even thought of using multiple, larger files. Even in the 1999 world of table-driven sites, I can't imagine life any other way than with a 1x1 transparent GIF.gulliver said 1498 days ago:
It's a good point.From experience, I realise it's easy for 'us so -enlightened' to glance sidewards in a 'oh... you're doing it *that* way are you?' manner.
My constructive view is that yes - it is a needlessly complex mess... and brought about by someone doing their best. We learn and improve by doing.
With my early css efforts 'arms and legs sticking out of the two heads' resembling a Picasso painting... and my more recent ones having a 'is that flower supposed to be protruding from the donlkey's butt' surreal Dali-esque effect... I'm still kludging away with tables-based and spacers. [Although, in my defence, they're single pixel resized accordingly.]
I want to join the 'elite' and adopt web standards. And I also want to know what my pages will look like on screen - preferably they'll work as intended... and where they don't I'm at least aware of 'an issue'.
When I know enough to write appropriate code, I'll rejoice. Meantime, I'm working and learning and getting better... laughing at my earlier efforts and appreciative that I 'now know better'.
In no way ashamed or embarassed, I was so proud when I produce my first site - complete with ani gifs. Then again, it was 98.
Such is life.
;-)
g
ak said 1498 days ago:
"It’s as easy as selling ice-water in the desert (or so I’ve heard)."unfortunately, most people are convinced they don't need water..
Keith said 1498 days ago:
That is too funny. And sooo old school. But hey, they shouldn't feel bad, we've all been there and I can go one better.This reminds me of when I'd use white on white text to "prop" open a table cell. I'd type things like "Keith RULES!" or "Easter Egg!" in there instead of using spacer gifs or nbsps.
Yeah, I didn't know any better. At least I only did it on my personal sites....ahem. Right...gotta go.
Jonathan Stanley said 1498 days ago:
Multiple transparent spacer .gif? Ingenious... obviously taking into account the really old browsers that didn't support dimensions on images (Netscape 2 IIRC?)... :DI've still got my very first websites archived away from the 1999 era publically accessible if you knew where to look... Valid XHTML? Sure! But full of table abuse left, right and centre as well as transparent .gif attrocities too.
True enlightment is such a wonderful thing. ;)
Peter Zignego said 1498 days ago:
Ahh, spacer gifs...How I miss thee:p Your infinite magesty, ability to make my imperfectly coded layout look perfect...how your 1 white pixel was able to be manipulated so skillfully and beautifully by HTML...I never would have dreamed to see you in a folder such as this. Spacer gifs, my heart goes out to you!
Honestly though...it would just be a pain to bring all of those file sizes up in Photoshop! :P Someone needs to get with the times:)
Jon Hicks said 1497 days ago:
Veerle - I know what you mean and I still use Dreamweaver whenever I need to use tables.Gulliver - I was trying to make sure that my tone wasn't too mocking (apart from the title). I was trying to highlight my cold shower - remembering that outside of the bubble, things still get done in this way.
Peter - Thanks for the ode to a spacer gif!
It wasn't so long ago that I used spacer gifs either...
Richard Earney said 1497 days ago:
I remember a time before tables (when you couldn't lay anything out other than in blocks pre-Mozilla) and then tables came along and were revolutionary!!!!And now the html markup we produce is often as simple as those early days!!!
Plus ça change ...
Jeff Croft said 1497 days ago:
The other day I was forced to do a tables-based layout for my job. It was a nightmare! I had completly forgotten how to code tables (I rarley use them, as I don't typically have a lot of tabular data), I had to create a spacer gif (1px of course), I ran into browser compatibility issues (of course, that probably would have happened with CSS, too), and when I went back to edit the thing later on I couldn't read my own code well enough to know what was going on.It was a reminder to me: CSS-layout really is easier. Yes, it took me some time to learn and it was initially difficult to get past the "I could do this with tables so quickly and easily" stage. But, in the log run, I'm now say "I could do this with CSS so easily!" instead, and I can truly say that CSS is much, much easier overall.
Jon Hicks said 1497 days ago:
Jeff, thats just how I feel. I have to use Dreamweaver everytime I need to do a table layout. They're just too hard!Malarkey said 1497 days ago:
Jon,I know of few jobs where people look back on past on past work and think/say, "God, how/why did I do THAT? I must have been crazy!" I have never heard a plumber, cab-driver or postman say anything of the sort.
But in this industry, we are on a serious learning curve ALL the time. It's hard to stop yourself opening up a job you did only months before, thinking I "I think I'll just rewrite that CSS"...
hangon said 1497 days ago:
i agree with that but sometimes when i read some messy hacks on 'A list apart' just to make with CSS something that was so easy with tables....i think that the whole thing is not well thinked...but it's evolving...so wait and see...i can't help thinking that the guys at the origin of all these specification are in a complete lack of 'FREESTYLE' attitude....
When i look at how they are dressed i can't think of them as web designers and as people capable of inventing the needed tool for web design...
JJ Doughboy said 1496 days ago:
What if we had a FREESTYLE tag... The idea behind that would be you could type anything into it and the browser would guess what your trying to create...like for example
Wait maybe this isn't the freestyle attitude hangon was talking about... Would be cool though. I wonder what took less space, 1px spacer gifs or the CSS code to do the same amount of stuff.
PRQ said 1496 days ago:
you could type anything into it and the browser would guess what your trying to create…Sounds like Quirks mode. Not a step in the right direction.
Paul Michael Smith said 1494 days ago:
The designer was probably saving themselves the pain of adjusting the height and/or width each time.Seeing that reminded me of my spacer gif days and thankfully things have moved on since then.
hangon said 1494 days ago:
...Everything is a matter of TASTE....and Fortunately there is a GOOD taste and a BAD taste...tools has to be thinked and developed for creators with a good taste...and i can't help myself thinking when i see these people's sites: "They are talking about design all the day but only by the technical way so they completely miss the artistic point .... "
if u miss that point the tools you are creating won't be as well thinked as they might be...
AND IT'S A FACT, all these CSS, XHTML, blablablabla enabled sites HAVE EXACTLY THE SAME LAYOUT!!!!!
Macromedia Flash is the only available technology that allows us to see 'DIFFERENT' Sites!! Perhaps because it was a graphical tool at the beginning...
A tool is a tool , it exists to help u create...not to FORMAT your creativity...
I'm so sad to see that all the tools ALA, Zeldman AND Bros are talking about leads to IDENTICAL sites...
THEY ALL LOOK THE SAME!!!!!!!
english is not my native language so it's hard for me to explain what i really feel...
0zone said 1494 days ago:
No, I think you explained what you feel very well.Now CSS enabled sites always having the same layout? Yeah right!
Compare these two designs:
http://0zonedesign.hostcubed.com/dump/blue/
and
http://0zonedesign.hostcubed.com/dump/zef/
I really don't get how they both have the same layout.
Reading posts like the one above make me angry. What I would really like to say about the utter bull**** that hangon posted would probably be considered too offensive.
Jon Hicks said 1493 days ago:
I was very tempted to delete such an ill-formed, ignorant and off-topic comment, but then I thought no. It makes me laugh to hear such bollocks. I hope it was tongue in cheek...0zone said 1492 days ago:
Hope that wasn't for me... and sorry if I offended anyone! I was just angry with after reading a topic where people where arguing about using css or tables... css or tables? How about using css, tables, divs and semantic design instead?Jon Hicks said 1492 days ago:
Ozone - sorry, my comments were directed at the troll above you.0zone said 1492 days ago:
:D Good to know!Dom said 1491 days ago:
Ozone : the two sites you link to don't have the same design, but they DO have the same layout !!!hangon said 1491 days ago:
troll???? thank you very muchperhaps when i thought design and i wrote layout in my last post....
i'm sorry Ozone but i have a look at your 2 sites....
and u know what???? EXACTLY THE SAME SITE.... EXACTLY!!!!!
and u know what they have not the same design but strictly the same layout....
They are so exactly the same that at first i thought it was a joke!!!!
EHHH Hicks, i'm not saying that css , table and so one are the same.... i do understand that the web has to evolve and that css is an evolution....but i read a lot of self proclaimed web evangelist and i don't get the point...their approach of design is hitlerian!!!!
All i can be sure of, is that we can see a normalization of the look when we just need a normalization of the code....
happy to see that everybody here is very broad minded...
ciao
Jon HIcks said 1491 days ago:
Hangon, I agree that the code shouldn't dictate the look. Its true that there are similiar looking CSS sites out there (particularly blogs), but thats true of most sites, regardless of the technology. What I have a problem with is this:
"Macromedia Flash is the only available technology that allows us to see ‘DIFFERENT’ Sites!!"
Is that broad-minded? Nope. Is it off-topic? Just a bit.
If you need any proof of the variety of CSS designed sites, look here: http://www.webstandardsawards.com/.
spoono said 1491 days ago:
I looked at those two designes... the layout isn't even similar!Hangon, the code isn't the same, the design isn't the same, hell forgive me if I'm wrong but they don't even have the same elements so how can they both be the same? Idiot.
“Macromedia Flash is the only available technology that allows us to see ‘DIFFERENT’ Sites!!”
Macromedia Flash is the only available technology that allows us to make sites completely unreadable in text browsers and screen readers, you mean?
I really don't get what you're trying to say... but it sourt of sounds like "I'm an idiot who doesn't understand web design, hurt me!".
hangon said 1491 days ago:
i do agree with you on my macromedia comment... :)i'm the first to be in a very bad mood when i surf on NON web standards sites (ONLY work with IE6 PC blablabla....)
i'm not saying that macromedia is the only way to create ... but every time i think "whaoooo a different site!!!" u can be sure that it's a macromedia flash one...don't completely understand the reason why but that's a fact to me... :D
that's all....sorry to populate the comment with off topics thinking...
Dom said 1491 days ago:
Well, "hangon" has a very special way to express himself :-)But I'm a bit concerned with the fact that some guys here immediately called him "troll" or "idiot" just because he said something different from the "oh my god css design is sooo great" usual stuff.
Moreover, HE IS NOT TOTALLY WRONG.
XHTML/CSS has serious flaws and limits, especially when it's about positionning.
I just read that : http://www.hicksdesign.co.uk/articles/css/vertical_centering_with_css/index.php
A tutorial to do vertical centering with css ??? GIVE ME A BREAK !!
For someone new to web design, that would sound like a joke !
Alistapart.com is full of hacks and workarounds to achieve totally basic things that we should be able to do with half a line of code. THIS IS NOT NORMAL.
Something else : John, I'm a fan of your weblog and admire your work, but you gave this link :
http://www.webstandardsawards.com/.
...as a proof of the variety of CSS designed sites. THESE ARE WEBLOG FORMATTED SITES that REALLY look similar !!! Very bad demonstration !!
As for Flash : it's off-topic for YOU guys, but most people who browse a site don't know if they're actually seeing flash or html content. Never forget that, because we make sites for "real people", not for "web standards" evangelists, do we ?
And the fact is : in terms of _graphic design_, _creativity_, _navigation_..., you can't do 1 percent in CSS of what you can do in Flash. I think it's just what hangon meant.
(to be continued...)
Keith said 1491 days ago:
Dom, you said "you can’t do 1 percent in CSS of what you can do in Flash. I think it’s just what hangon meant."Maybe so, but it's wrong regardless. First of all, that's a load of crap. CSS and Flash aren't mutually exclusive.
Secondly you might be surprised what you can do with CSS. Again, it can be combined with Flash -- look at pga.com.
Thirdly, just because you could, doesn't, by any stretch of the imagination, mean you should.
I've had quite a bit of interaction with people who actually visits the sites we create and for the most part they don't like it when you get clever, or too creative or start to break the conventions they are used to.
Oh yeah, and many people do know if they are looking at Flash. It surprises me as well. The more they look at it, the more it seems to bother them. But it depends on the site and the implementation. There is a place for Flash on the Web.
I guess my point is that, at times, similar can be good, if you want people to use your site.
Obviously it depends on the site, but...
And, anyway, as far as similar sites go: what about all the 2advanced knock-offs out there? Flash design suffers from the same problems in that regards...
I'm sorry, I'm not trying to knock either you or hangon, it's just that I think you might be missing the point a tad.
I do think "troll" is rather harsh, but when someone who no one knows and someone with no work of thier own to be shown comes and makes points that can be refuted easily they get labeled as a troll.
I guess it's a risk you have to take.
Dom said 1491 days ago:
Keith : I'm not a Flash-sites maniac AT ALL, although I'm a Flash coder. I usually prefer familiar layout html sites with clear navigation over intricated Flash web sites, and I agree totally with your point "similar can be good, if you want people to use your site".But, hey :
1) There's a life outside XHTML, CSS, and MT !!!
2) As for the Flash/CSS comparison: You didn't quote me well, truncating the first part (which I insisted on!) of my sentence. This is mean !!
3) "when someone who no one knows and someone with no work of their own to be shown comes.." : This is very supercilious.
Keith said 1491 days ago:
In reply:1) No doubt. Never said there wasn't.
2) Wasn't trying to be mean. But, the first part doesn't change anything.
3) I wasn't talking about you, but in any case it bothers me when people come in talking about design and all that and they don't have any work of their own to bring to the table. It's like a blind shot with no way to fire back. If you want to share your opinion on a site, allow others to do the same about your work.
spoono said 1491 days ago:
Hmm, he might not be an idiot but he does have trouble saying things."1) There’s a life outside XHTML, CSS, and MT !!!"
I don't use MT, but I do use CSS and XHTML, why? Because its the best way to make semantic documents that can be read by *almost* everything. Sure there are a few hacks, but I don't use them often.
Jon Hicks said 1490 days ago:
Hmm, this is all a bit out of control. Firstly, while I agree that my calling Hangon a troll may have sounded harsh, his attitude in bursting in here in such an uncivilised manner really got my back up. His comment was unrelated to the entry, unconstructive and seemed to be written specifically to rouse anger.Thanks Keith, you summed it up by saying "it bothers me when people come in talking about design and all that and they don’t have any work of their own to bring to the table".
The Flash vs CSS 'debate' will rage on, much like the 'Macs vs PCs', but life is too short to be wasted like that.
hangon said 1490 days ago:
so sorry for my attitude...but i don't want to create any battle...but i don't have to show my personal work...it's off topic...i'm a web user like every one else...
i don't want to start a debate on 'flash vs css' ... it's even not the same thing...
THE ONLY THING I WANT TO SHOW is that all these CSS sites are all formated!!!
that's all...sorry for disturbing...
i won't comment any more$
ciao
Jon Hicks said 1490 days ago:
Hangon - as I said before, I agree there is a similarity in some CSS sites, just look past them. Its not the technology that causes this, its other factors such as design trends.I welcome all sorts of discussion here. Just introduce yourself, be polite and make the tea once in a while :o)