Yesterday I pushed out a new version of my freelance site, the first new design since 2005.

Objectives

When I originally launched the site, I intended to regularly update the ‘corporate’ blog, but in the end I only managed half-a-dozen posts before apathy set in. This redesign, then, relegates those few entries to an archive (maintaining the old URL structure to avoid broken links) and pushes the portfolio pieces front-and-centre, the latter now also featuring client testimonials.

In the four years since I started freelancing, I’ve also refocused the areas in which I work—before, the site had a generic web design focus, but I’m now highlighting the three areas in which I generally work: HTML/CSS templating, application development, and SME site design/build. Add a contact form, and the site has everything it needs.

Design and Inspiration

Browsing design galleries might give me lots of inspiration, but when it comes to execution I struggle to translate my ideas into cohesive design mock-ups. After many failed attempts at creating a design that I liked, eventually I decided to strip the site back to a few simple blocks of content, with very little ‘design’ going on.

The final site uses a six-column grid and a strong baseline to align every element (notice how the screenshot thumbnails sit on the same line as the testimonial text).

There are a few sources of inspiration evident in the eventual design:

• I borrowed the huge headers and attention to typography from Garrett Dimon’s site
• The colour strip with clipped corners and curled-up shadow effect is lifted wholesale from an earlier version of Eris Free’s blog
• The link colour is identical to that used on the CodeIgniter and ExpressionEngine sites, in homage to Jesse Bennett Chamberlain’s influence on modern web design

Development

I wanted to take this opportunity to have a play with some of the more advanced aspects of CSS—have a poke through the CSS file for a closer look; the site makes use of:

• generated content
• CSS columns
• :first-child and :first-letter
• adjacent sibling selectors
• opacity
• fixed positioning
• text-shadow

The few browser hacks that were necessary are included within the main CSS file. It seemed more sensible than downloading a whole extra stylesheet for IE6 and 7.

With the removal of the blog I no longer needed to stick with the Textpattern backend of the old site, so I replaced it with a simple CMS built on CodeIgniter.

Performance

The site is also optimised for performance (or, at least, YSlow’s version of performance). The .htaccess file sets far-future expiry dates to encourage asset caching, and uses mod_gzip (or mod_deflate, if mod_gzip isn’t available) to reduce the filesize of pages.

All the JavaScript (jQuery and the jQuery lightBox) and the CSS is also compressed using the YUI Compressor before being uploaded.