Shiny new design(y)

Posted on May 7, 2008. In News, The Web.

I felt it was time for a bit of a change to this site, there were some things I wanted to implement at the last redesign and some things I wasn’t happy with. Also I was bored. So I gave it a new lick of paint, and toyed around with the backend, I hope you like it. Anyway, to document the changes (and mainly to show off) this is what’s new.

Designing

I was happy with basics of the old design, the central column layout remains, with a sidebar on the right, header and footer. The sections of the site are now all equal, instead of being broken into ‘about’, ‘blog’, and ‘portfolio’, and in a single menu. The new design also scales beautifully, unlike the old fixed-width design, with all measurements in relative units.

I’ve also kept the colour scheme from the old design, with the shades of grey plus blue (although I may consider having a different highlight colour per section down the line, we’ll see). There are some more fancy web 2.0 style touches though - gradients on the header and footer, a mirror effect on the menubar, and a stripy page background.

There are also some experimental design flourishes in there; the header, footer, and content box have drop shadows, there are some rounded corners, the menubar items have an embossed/extruded effect using a text-shadow, and menubar items background colours change with a transition. All these are browser dependent however - you’ll only see them on a webkit browser - and I think it still looks good without them.

Safari flourishes - drop shadows and rounded corners

And the site works in IE of course (despite the pain it caused me). There are a few bugs in IE 5.x where it doesn’t like PNGs (although these do work, thanks to a PNG fix) and where CSS auto margins aren’t obeyed, but it’s all viewable and nice looking!

Browser comparisons courtesy of browsershots.org

Behind the scenes

There’s a lot of content that’s common to various pages, on each page common content is included using php include statements. This method is used for the footer, sidebar, and menubar. In the latter a PHP global variable $section_current is set at the top of the document which is then looked up to write an id variable on the body tag, the title of the document, and in the menubar include (a PHP file) to label the current section.

There are some clever things going on with my .htaccess too. Tidy URLs are provided so you can visit hugoking.com/cv or hugoking.com/cv/ and get the same page, thanks to webforumz.com. URLs prepended with a www. are handled nicely as well (the www. is removed) thanks to the following code:

# remove www.
RewriteCond %{HTTP_HOST} ^www\.(.+)$
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

There are custom error documents, and the ability to go into maintenance mode, using this code:

# custom error docs (for various codes)
ErrorDocument 404 /error.php?err_code=404
…

# ‘under construction’ override
RewriteCond %{REMOTE_ADDR} !^127\.0\.0\.0$
RewriteRule ^(.*)$ error.php?err_code=maintenance

And there’s a PNG fix courtesy of 24ways.org, float clearing done nicely, and a bit of box model hack.

New features

I’m addictaed to Twitter, I wanted it to be more prominent on the site. A lot of people have a Twitter box in the sidebar, now I do too! It’s all done with a fantastic script from Remy Sharp, something I’ve played with before, which displays tweets and provides a miriad of options.

My Twitter box

A single feed is now provided for the whole site using the FeedBlendr service to combine the portfolio and blog RSS feeds. This should make it easier for subscribers to be alerted of site updates and provides more flexibility and support for users.

There’s now site wide search provided by Google Custom Search Engine, this is rather than individual search for both the portfolio and blog. Search results are returned from the entire site, everything that’s indexed by Google, and displayed in an iframe on a special search page. Unfortunately this currently includes ads, this isn’t ideal but I think people can live with that.

Google site search results
Site search results from Google CSE

I wanted to incorporate my tumblelog a lot more closely with the site, there are various ways to add tumblelog items to a webpage - using a piece of javascript, creating a bespoke script using the API, etc - but I came across this post which was much closer to what I wanted. It describes how to mirror a tumblelog as a subdirectory of a site using a simple PHP proxy and a little .htaccess fun. You can now visit hugoking.com/tumblelog and see my tumblelog.