Part of the impetus for redesign came from an evolving sense of what I want this space to be, part from just wanting to do something cool. A couple of weeks ago I picked up a copy of The Zen of CSS Design which discusses the tricks and techniques exemplifying the designs on CSS Zen Garden.If you’re not familiar with CSS Zen Garden, it’s a site where only the style sheet changes, not the content. They have a huge gallery of various styles all displaying the same textual content in different ways. It boggles the mind.

So with that as inspiration, I drew a mockup of the site as I wanted it to appear. Using The GIMP and text from my old site, I created a sketch of what I wanted to do.The catch was, as always, that the look and feel depended on the ability to put specific text in a particular font. In the old CogDiss, the titles were actually coded as “Ancient Script” which looked cool as heck on my machine, but nobody else saw it — unless you happened to have that font installed, of course.

So the precursor activity was figuring out a way to turn text into a graphic on the fly so I could use the right font for titles and other key text. There’s no sense in making body text anything too fancy, but I think the space becomes more interesting as we add display fonts to the mix.

So I wrote a small program that takes a line of text and a color as input and returns a graphic of that text in that color using a default font. That allows me to create the article titles, sidebar headers, and special page titles with the designated display font, in this case, Square 721 Extended – an interesting sans-serif that I think gives a modern feel to the pages.

One thing that I wanted to do (and might yet) is create CSS menus to hide the detail of the various sidebar items until one hovers a mouse over them. The upside is that it’s very cool looking, but the downside is that it doesn’t really work in Internet Explorer.

Other than that, everything I wanted from the new design, I managed to work out including:

• Article title “in the margin”
• RSS and other common WordPress Meta stuff in the footer
• Specific text in a display font
• Minimalist design

All in all, I’m generally pleased with the way it turned out.

This entry was posted on Monday, April 3rd, 2006 at 9:16 am and is filed under Observations. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.