What’s old is new again…

I was recently demonstrating to a client how a blog functioned by showing her my personal site, trevorfischer.com. I hadn’t used the website for quite some time and while perusing it I was uncomfortably reminded that the website was in dire need of being brought up to modern expectations.

The site went live in 2008, about two years before the concept of responsive web design was introduced and also before the current trend toward “flat” design was in vogue. What it did have however, was a lot of texture and depth and the client was acting very excited about that.

I decided that something had to be done.

The original website header

The header of the original website

So I hatched plan. I would make the design responsive and modern while maintaining the original concept as much as possible. After all, clients should be aware that, while it is the trend of the moment, flat design isn’t the only option available.

To that end, I primarily worked with the existing colours and adapted the original site’s textured background graphics. However, to enhance the experience for modern web browsers I introduced a number of CSS3 gradients and some transparency. I also took advantage of the relatively new ability to embed fonts using Adobe’s TypeKit service.

New trevorfischer.com header

The header of the redesigned website

I was working on the project in the space between paid gigs so time was of the essence; as a result I opted to create a WordPress child theme using the Genesis framework rather than writing the code for the theme from scratch.

At this point I believe I’ve achieved most of the goal of creating a responsive website with the feel of the original but I continue to tinker with it when time permits and find bits and pieces to improve. So it’s still something of a work in progress. If you get a chance to check it out I’d appreciate any feedback and if you notice anything screwy I’d be much obliged if you sent me a message or left a comment below.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInDigg thisShare on TumblrShare on StumbleUponFlattr the authorBuffer this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *