Blog redesign

The last few days I was busy redesigning the website. I was not happy with the original design.

• The menu on the top right was large and clunky. Because of that it didn’t leave much room for more links.
• The ‘logo’ on the top left did not feel like a real logo mainly because it was … well … just not designed well.
• The shadow effect on the columns looked cool, but because it was made with PNG8 images instead of PNG24, it wasn’t possible to add an background image to the page.

What I did like was the scalability of the website. you could as easily view the page on your (i)phone as it would be on your large, wide computer screen. I dropped support for mobile phones. There are lots of Wordpress plugins to cater the mobile devices. I have to dive into that some time. For now anyone with a mobile device can grab the RSS feeds.

I still have to fix a few styling glitches but I thought the design was good enough to make the switch. Here are the most important aspects of the design:

• Use of rgba as background color. This makes it possible to set opacity for just the background instead of the whole box. rgba is not supported in IE, so you will have a solid white background then.
• Using opacity in the columns makes it possible to use large backgrounds. That gives me a reason to pick up my photography.
• The use of webfonts. This was something I was eager to use. This is something designers and web developers alike have been waiting for. The implementation isn’t perfect, but it looks well in Firefox and on the Apple. IE and Webkit on the PC still need some tweaking. I’ll go in to more detail in an upcoming article. For now I’ve been glad to be able to experiment with a real web site instead of running some tests with webfonts.
• Less data: I removed irrelevant data where I could. It’s most apparent in the list of articles on the homepage where I removed information like categories, tags and dates.
• Links become visible with an underline when a column is hovered. This will make the website look less crowded. It’s a bit like the folder tree view in Vista’s Windows Explorer: you will only see the folding icons (the plus and minus icons next to the folders) when that section is active.

There are some things I have to do:

• Make a logo that is suitable for creating a favicon
• Tweaking the fonts for IE & Webkit on PC.