Bruce Lawson's personal site

CSS Zen Garden submission: "Geocities 1996"

The CSS Zen Garden has been highly useful to me in demonstrating the value of standards when attempting to convince my reluctant colleagues to abandon tables. Thanks Mr. Shea!

However, it’s also been a major pain in the arse, as Nongyaw, friends and family now expect every site I make for them to look as good as the zen garden submissions. As a design-challenged individual, I’ve found myself almost nostalgic for the multi-coloured, multi-typefaced gif-ridden designs I used to see in 1996 when I moved to Thailand and first used the web, back in the days when Netscape 3.0 was the coolest browser out.

So I’ve made a css zen garden skin, hearkening back to that devil-may-care era of joie-de-web.

It’s  called "Geocities 1996".

Check it out! Click here!

For maximum authenticity, I’ve used only public domain gifs from surviving "webmaster resource" sites of that era, as well as their on-line button and banner makers, intrepidly braving pop-ups and feeding my email addresses to spam fiends as I went.

I think it’s beautiful (but I’m biased). What do you think?

(Related post: Does validation matter?)

(7 March 05) I just came across a brilliant essay on the development of the Web’s look and feel, called A Vernacular Web – The Indigenous and The Barbarians.

Thanks to Weiran Zhang for offering to host the design for me after continual bandwidth meltdowns.

What the critics say

22.12.04: Zeldman said “Your CSS Zen Garden design is rockin'”, and Peter wrote to say, “The best thing I’ve seen all day. Thanks.”. Justin Wignell concurs: “Absolutely fantastic! Love it! It made my day”, whilst Dave MacEwan makes the aesthetic point “;It almost made me puke. :-)”.

In keeping with body-fluids mode of criticism, David Thompson called it “A festering pile of shite”. The less-scatalogical jp says, “Absolutely brilliant…though it hurts my head”.

Molly said “Bruce, I love you but this just proves your insanity”, while bilingual Joe Clark says “Oui, très amusant” and points out to those who don’t get the joke that, although the the xhtml source is ostensibly AAA accessible, the strobing gifs I’ve included make it inaccessible (and perhaps dangerous) to some.

Accessibility guru, Ian Lloyd, wrote “Bruce, that is a piece of genius. I’m going blind. So bad it’s brilliant!”. The Linux-loving Gabriel wrote “Will you propose your design to the “official” zengarden? It is among the best I have ever seen.”

The Christian Web Masters didn’t like it, while Stan Furlong wrote to say that it’s the topic of discussion on a Macforum: “OMG, that is the best thing I’ve ever seen. Please submit that. Please.” Steven Souza emailed: “The proxmity of my computer to the restroom proved to be highly valuable after viewing your version of the zen garden. I laughed for at least 5 minutes and fought for breath afterward. Thanks for creating such an enjoyable experience.”

Ronaldb66 wrote, “I was thinking: anyone for a “CSS Zany Garden” contest? Using the original markup and CSS to create a really awful design? Although it would be hard to top the original.”

Dave Shea emailed me on 16 Feb 05 to say “It’s brilliant. I’ve had a good laugh every time I’ve loaded it.”

Bruce Lawson hates Standards?

24.12.04 – someone nominated me to web pages that suck. I’m happy to receive the praise “Wonderful stuff. I’ll give it my highest compliment – I wish I had thought of it first” but I’m not so pleased when Vince Flanders writes,

Too many of us get carried away with Web Standards and too many believe that using them makes your site wonderful … Bruce Lawson has taken Web Standards and the Zen Garden approach, thrown it on the ground, and stomped it to death.

No, no, no! I’m a great believer in Web Standards. What I’ve tried to do is visually demonstrate what I said at the mediaelements conference: "validity and accessibility by no means guarantee a good page, as my submission to the CSS Zen Garden, Geocities 1996, demonstrates".

I reinforce Dave Shea’s reason for planting the Zen Garden: to show that the "structurists" like me were not showing the advantages of CSS to its full effect. By making a deliberately ugly page, I’m proving that structural purity alone does not a good page make – exactly what he was trying to show, and a point which I 100% agree with. Beautiful design plus beautiful structure is the way forward, as the CSS Zen Garden shows.

Phew – it’s always hard to explain a joke.

(Last Updated on )

Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)

60 Responses to “ CSS Zen Garden submission: "Geocities 1996" ”

Comment by Travis

Bruce, your Geocities spoof at Zen Garden is hilarious!!!

I’ve just finished reading The Zen of CSS Design, and after studying all those dozens of designs, and browsing dozens more, I must say that your design is by far the most entertaining!

Nice job!!!

Travis

Comment by andrew brundle

Hi,

My design for zengarden, “Mozart”, was published just before Xmas.

I used to think it was good………..until I saw yours.

Whatever you were smoking when you made it, feel free to send me some!

Andrew

Comment by Bruce

Hi Andrew, I *loved* Mozart when I saw it published. I’ll send you a kilo of what I was smoking, if you’ll send me a quarter of your PhotoShop and design skills.

Comment by karl

hey Bruce, all i’m getting is the unformmated version of the page, as if the css can’t be found; is it just me?

Comment by JULIAN

I love it! Really retro and the height of a certain sort of taste. It’s now in my bookmarks.

Comment by chris jeffries

I laughed my socks off at that, and then I clicked back and clicked the link again and still laughed my socks off.
Top work.

Comment by Laurent

I’ve just seen your CSS Zen Garden design, it’s very great and really funny! I Like it very much!
Thank you 🙂
PS: I suggest that in 2016, you may work on a CSS design you may call… “blogger 2006” 😉

Je viens de tomber sur votre contribution de design CSS sur CSS Zen Garden, c’est excellent et trés drôle ! j’adore !
Merci 🙂
PS: je suggère qu’en 2016, vous réalisiez un design CSS intitulé… “blogger 2006” 😉

Laurent

Comment by Mezzo

That’s the funniest thing I’ve seen in a long time — what a labour of love it must have been to get the spoof site to look so … Geocities. I’ve bookmarked it so that I can wander through it when I need to be refreshed…

It certainly proves your point that css purity alone is not enough.

Comment by Charles

Very nice… after looking at it for a while, I nearly vomited.

Nice animated bunny on the bottom of the comment page. It really completed my 1996 Geocities experience.

Comment by ole

This is so funny!
The combination of the Zen Garden and ’96 animated gifs and stuff…. Hilarious!

Comment by A.D.

Loved it! Took me back to ’96! I’ve been using CSS Zen Garden to convince my team at work that we can more rapidly design e-Learning using CSS. I’ll definitely add your page to my “showcase” as an “old school” example!

Comment by Irene

Bruce
I don’t know how I got onto your website, it must be luck (I don’t know how I get most places nowadays, thanks to menopause – why isn’t it called womenopause?!)
I read the spam letters through watery eyes and a coughing fit of pure mirth. It was the best laugh I’ve had in a long time. Please write to some other spammers and keep up the good work.

Seavue Home for the Bewildered
Sunderland
Oopnorth

Comment by Evan

Now THAT is hilarious. Thank you for the chuckle — PHP has been being a bitch tonight and the diversion was much appreciated.

Comment by James Jeffery

I like it, it reminds me of the days when i first started creating websites on Geocities.

It could never be used in todays era but it’s like playing retro Atari games on a G5 Mac with 8GB Ram. Classic 😛

Thumbs up from my end Bruce.

Comment by Mark

Beautiful. It’s like the sort of site I would loved to have made, and tried to make back when my only internet access was the odd hour here and there in the school library (using the school’s only modem, at 14.4k) at age ~14, preparing everything beforehand on my home PC…
…but never quite acheived, ending up with an even more garish pile of dingo’s kidneys, despite the many hours I put in producing intricately pixel-painted button graphics (…with hard-coded fades into each page’s particular background colour). BGCOLOR=#FFFF00, for better compatibility with 16- and 256-colour systems, anyone, or a page about “thingz in spayce” with a text-destroying (and 128×128 repeating) starfield?

This wonderful era of neo-psychedelia can be revisited by hanging around certain controvertial messageboards for a few weeks, waiting until the drama reaches a certain point and the moderators once again instigate “PARTY HARD mode” to destroy any meaningful attempts at communication (and therefore the means to continue arguments) and calm everyone down. Which I guess only goes to reinforce your points about good design being necessary for websites to work. The internet wouldn’t have got anywhere in the 60s because this sort of thing would have been actively encouraged instead of frowned upon 🙂

Comment by Matthew

Loved it. My computer actually slowed down while viewing the page, which made it even more old-skool. The use of Comic Sans MS is brilliant. Luminous green & pink *WAHEY* Reminds me of pages people used to host on my schools network.

Comment by Michael

You made me all nostalgic again. If only the web was this well coded back then — I still remember friends’ Geocities sites crashing my browser on 56k dial-up.

Maybe in a few years time there’ll be a MySpace/Facebook take on this too…

Comment by Bruce Lawson personal site CSS Zen Garden submission | Garden Benches

[…] Bruce Lawson personal site CSS Zen Garden submission Posted by root 1 day 10 hours ago (http://www.brucelawson.co.uk) Proudly powered by wordpress entries rss and comments rss bruce lawson has taken web standards and the zen garden approach thrown it on the ground and stomped it to nice animated bunny on the bottom of the comment page Discuss  |  Bury |  News | bruce lawson personal site css zen garden submission […]

Comment by Bruce Lawson personal site CSS Zen Garden submission | Menopause Relief

[…] Bruce Lawson personal site CSS Zen Garden submission Posted by root 14 minutes ago (http://www.brucelawson.co.uk) So i 39 ve made a css zen garden skin hearkening back to that devil may care era of joie de web nice animated bunny on the bottom of the comment page most places nowadays thanks to menopause why isn 39 t it called womenopause ago http www brucelawson co u Discuss  |  Bury |  News | Bruce Lawson personal site CSS Zen Garden submission […]

Comment by John Kraaikamp

I myself decided to create a completely valid page that was godawful, to prove the same point you wished to make — except in my version I added in error-free JavaScript (I’ll let you imagine the horrors -that- unearthed.)

Thank you for the inspiration.

Comment by Goodbye Firefox, Hello Chrome? - Blog

[…] I’ve adored Firefox ever since I first jumped on the bandwagon, abandoning IE’s sinking ship. (I’m just old enough to remember switching between IE and Netscape–both of which would freeze or crash when asked to render enormous 500k text files. Ah, nostalgia.) […]

Comment by Rune Jensen

Your design was shit – but your comments to the critique about that design was hilarious – especially your comments to those that told your design was shit 😉

Comment by Rune Jensen

Hmmm… having had a 2nd look at your design (without getting too dizzy), I must admit that it is actually very …1996ish..

Really, I remember the Comic Sans, and the and the aniGIFs, and I just LOVE that “Welcome to my home page”, but I feel like something is missing – there are not any ? As I remember, it was pretty cool back then. There is a CSS way for that, and it is even CSS3 (though I know, it is only Candidate Recommendation)…

http://www.w3.org/TR/css3-marquee/

How about scrolling the validation links?

They do not have any effects applied to them, and actually, they are kind of readable too..

Comment by Liz Guy

Thanks! I will show this to my students doing year 1 web dev CSS Zen Beach assignment (we are in Brighton). The computer scientists hand in pages that look quite like this, but not as good.

Comment by Cord

Six and a half years later, this blog post continues to elicit laughs, Bruce.

I was cruising through your older posts and lo(!) what do I find but this! I nearly screamed when I clicked the link and saw the result!

I can only say this: A-1, double-plus good, f**king brilliant!

(I discovered the very first site I ever built last month. Yes, it was a GeoCities one. I reviewed it, copied it all to a tiny USB drive about to be tossed. I poured gasoline on it in the firepit out back and burnt that sucker to beyond ash. It’s gone forever!)

That eye-searing, headache-inducing, epilepsy-causing, horrid, eye-raping conglomeration of pixel crap you did has had me laughing off & on now for 20 minutes.

Comment by Ramon

Hey,

loved your geocities theme, it made me laugh remembering that kind of sites, so vintage. That last multicolored gif also made my eyes hurt 😀

Comment by Andy

Thanks for the memories. I was hoping to see a “text crawl” in there somewhere but I guess they might have been a little after ’96.

I’m assuming your spelling of “arhcives” is just one more salute to historical web design 🙂

Comment by http://tinyurl.com/chia-8154326906

I actually Believe blog, “Bruce Lawsons personal site :
CSS Zen Garden submission: “Geocities 1996″”
was indeed really good! Ican’t see eye to eye with you more! Finally appears like I reallystumbled upon a blog site very well worth checking out. Thanks, Franklin

Comment by Frank Haywood

Hi Bruce,

I know it’s been a long time since you did this, but it appears to be broken now in all the major browsers. All I see in FF, Chrome, Opera and IE is the flower1.gif as the background image.

I don’t know what’s changed between January and now, but maybe a tweak is in order? 😉

All the best,

-Frank Haywood

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.