A couple of days ago I pushed out a major interface change to geistlinger.com, one of my other sites.

I thinks this is either only the second or third look to the site since it’s launch in November of 1999 (wow! it was really that long ago!).

Before

After

What’s new includes the following:

• While the previous UI was pretty much CSS based, this new version goes all in. Very few tables to be found, just a plethora of DIVs.
• CSS3 goodness – opacity, drop shadows, rounded corners (little of which translates well in IE8, *sigh*).
• CSS drop-down menu. No Javascript there.
• jQuery goodies – a couple of widgets for photos. These actually began the redesign – I was learning jQuery and embedded them in the old site, and then kept going with the UI change.
• Template-based. I have not yet fully separated the presentation layer from the functionality as it would be in a MVC, but getting closer.
• Tried to get all the CSS out of the pages and in the CSS master file. This is something we all do – stick styles inline or on a page to speed development, and then never get around to extracting same. I think I pretty much got it.
• A more consistent look, page to page. Before, each menu section had the same look, but a different color. Kind of stupid, and harder to maintain. But design was not then – and is not currently – my forte, as a look at either UI will bear out. But I think it’s an improvement. It’s fun pushing around the pixels and so on, but I’m not a designer.

This was a lot of work, but it was fun – and I learned a lot. Bonus!

It now looks more like a site of 2012.