r-l-w.net

CSS Reboot

November 1st, 2005

Last week, Friday to be exact I stumbled across the CSSReboot website. Which is about redesigning websites using CSS on November 1. I had been thinking for a while that I needed to do something with the elegant but very plain variation of the Kubrick default WordPress template I’d been using, so I decided to give it a go.

I knew it might be an iffy thing seeing as how I had several things going in this weekend– in addition to a wife and two kids none of which really understand why I sit here in front of this CRT for so many hours at home after I’ve spent virtually all day in front of one at work.

I knew I had the chops to knock out the valid XHTML and CSS, but I didn’t have an idea to get me going. I needed some kind of spark to give me a direction to work towards. I thunk on it a bit, but wasn’t making any progress, so as I was leaving work, I sent an email to my good buddy Ken who is actually in the business of being creative.

Later that evening, I checked my email and found that my boy had come through. He sent me some design ideas along with some cool images he thought might give my imagination some fuel and ended the email with a suggestion specifically tailored to his perception of my personality:

“KEEP IT LIGHT” – “Fantasy serves to transport to an unimagined future state; it delights, it comforts, it helps us envision the possibilities of the future.

“KIDULT”, “REJUVENILE” and “ADULTOLESCENT” are the words you should concentrate on. Elevate childlike innocence, cultivate play and adventure as adult design elements.

I thought that was pretty good and an insightful analysis of my primary operating mode, however I was not getting any traction along those specific lines. I braned a while and thinking about “REJUVENILE” the idea of a kind of childlike scene with an alien in a flying saucer popped into my head and my inspiration began to click. A few minutes later the idea of a spacesuited astronaut standing on a lunar-like planet surface at the bottom of the page followed and that was it.

I fired up Blender the free, open-source 3D modelling program that can give the multi-killodollar big apps a run for their money and went to work on the purple guy you see at the top of the page.

Actually, I went to work on the saucer first and when I was satisfied with it I went to work on the pilot. The tentacles took the longest because it was late and I wasn’t thinking straight. I modeled them in a very inefficient manner, but I got the saucer and pilot done in about 2.5 hours. I was pretty pleased with myself, but I knew the modelling was the easy part.

One of the most difficult parts of 3D modelling is lighting. Good lighting can make a bad model look good, but bad lighting can ruin the best model. I ended up with the standard three point lighting system– one close to the camera eyepoint, with two fill lights one ahead and one to the side of the model. Of course, you have to solidify the camera eyepoint in paralell with the lights this way, but I finally satisfied myself and went to bed about (I shudder to remember) 3 am Saturday morning.

Then I spent all of the few spare minutes I could Saturday (which really wasn’t many), and most of a couple of hours Sunday afternoon tinkering with the lights. You can tinker with the lights till the cows come home. I finally decided it was good enough and moved on.

It was only about 8 pm Sunday night when I began on the robot holding the flag scene for the footer at the bottom of this page. Yeah, I had originally thought of an astronaut, but I figured an old-fashioned boxy robot would be much easier to model. I was mostly finished with the robot when I realized I could make him hold a flag which with a bit of CSS positioning could be made to appear to display the validation links that allow me to feel like a bigshot.

When I was satisfied with the robot scene (the planet surface is less than amazing, I know but hey– I’m only human.) I went back to work on the saucer scene to make the exhaust trail. I modelled the exhaust plume in Blender, then used Xara to make the title text and GIMP to composite the text onto the plume.

Then it was time to start pounding on the actual code of the page. I’ll save you the embarassing flailing I executed in the closing hours of Sunday. They were pretty much a waste anyway. After a short but refreshing sleep, I (don’t tell my boss) sat down this morning and knocked it out pretty quickly. Well, pretty quickly except for those nasty browser quirks.

I was mightily frustrated that Opera, Firefox, and IE refused to behave similarly. It was after some consternation and more of the abovementioned pointless flailing that I realized in my haste to start slinging code I had neglected to put a DTD at the top of the XHTML page I had written and was trying to style with CSS. Once, I added the DTD, of course the browsers began to give much more similar results.

Once I was satisfied with my mockup page, it was time to convert it to a WordPress template. I’ve done this a few times so it wasn’t too difficult– mainly a matter of cutting and pasting bits from here and there out of previous templates I’d created before. There’s no need to reinvent the wheel, you know. I didn’t really have time to think things out completely– more like “I did something like that on page X. I’ll just cut it out of that template, stick it in and tweak it.” Using a WordPress installation in a test directory, I developed the template. Then I simply copied the templates over to my r-l-w.net installation and here we are.

Whew– I should be tired after having spent so many hours on it this weekend, but instead I am energized. In fact, I should have been in bed three hours ago, but I am writing this post about all the work I completed just a bit ago.

The success in invigorating. I achieved my goal to make CSS Reboot. I’m not sure others would consider the redesign a success. I think it may look a bit unfinished and may continue refining it, but I am satisfied for now.

So, here it is. I hope you like it. Post some comments and let me know what you think. Now I’m going to publish this entry, post a screenshot to the CSS Reboot site, and grab a few ZZZs before I have to get up and go to work.