WHD: Version 3 Re-design and 5 Year Anniversary

You are looking at the third version of White Heat Design. It’s taken a while but I’m finally happy with my own website….for once.

This versions sees huge changes, both in terms of the design and the backend code that runs it. Below, I’ll go into a little more detail on each. But first I’d like to point out the happy little coincidence that sees that today is not just launch day for V3 of my website, but also the 10th anniversary of WordPress (the system I’ve been using for the last 4 or 5 years to build websites) AND that White Heat Design itself turned 5 years old this month :)

The Design

So this design is quite a leap from V2, below. But then again, V2 was quite a leap from V1! I’ve thrown out the old logo, which I was never happy with. What I have now is simpler, clearer and classier. It’ll work well on any medium, will translate into different colours if necessary and most importantly – I’m finally satisfied with it.

As far as the colour palette goes for this version, using dark imagery and offsetting it with colour accents just felt right at the time. I initially set out to use mostly white with hints of pink and grey, but the dark images worked so well I couldn’t help myself. Image credits to mmarcotte51 and krystian_o for the beautiful images on the Portfolio page and Home page respectively.

One of the biggest features of this design is actually the underlying structure. V3 is now responsive and mobile-ready, meaning it should offer a much nicer reading experience on mobile devices and smaller screens than the previous versions. The unrelenting upward trend in mobile-device web browsing made this a priority.

WHD V1
WHD V2
WHD V3

The Technical Stuff

Some of you might be interested in the inner workings so I thought I’d map out the technologies used.

  • WordPress – Similar to V2, I’ve used WordPress as the content management system to organise the website. This time however, I’ve made more use of WordPress’ power. I have custom post types set up for portfolio projects, information articles and a private client section. Custom taxonomies are used to order all of them and custom meta boxes are used for additional data. I also wrote a couple of plugins to manage aspects such as overwriting the WordPress branding in the admin, which should also be useful for future projects.
  • Foundation by Zurb – Zurb’s Foundation framework is a god-send. It allows rapid HTML5 and CSS templating to quickly knock-up website structures that are mobile-optimised and semantically sound. Having a framework like this integrated into WordPress makes building page layouts so much more rewarding, quicker and relatively future-proofed. On top of this, I added a bunch of my own “utility classes” that can be applied to just about any element on the site for my own styling tweaks. This is particularly helpful for when you want to slightly alter the default Foundation layouts, but don’t want to edit the core CSS or html.
  • PHP Mobile Detect – In conjunction with the structural framework above, I rolled in this lightweight PHP mobile detect script. This allows me to target mobile devices (general or specific). I’ve used this mostly to determine whether certain website elements should be loaded for smaller screens or not, but it has a whole lot more potential.
whd_responsive_devices

All in all, I’ve learned tonnes of stuff from this one project alone and it’s definitely increased my code library for future projects. It’s actually been very enjoyable, at least once I got past the initial design block that seems mandatory for designing your own website. It won’t be perfect, but I’ll continue to work on it over time.

Version 3 of White Heat Design is dedicated to the memory of an extremely close friend of mine who passed away in December 2012. I miss you every day.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.