As mentioned in my previous post, I have recently re-designed the entire of the Voltronik site. This is version 3 and sports quite a few features that weren’t in version 2 – it is not just a redesign.
The Old Site
At the time, I liked version 2 a lot. I think it did it’s job of explaining what Voltronik did, provided some information about me and the company and hosted my blog. It was largely an experiment with layouts, plug-ins and extreme SEO though and by the time I got around to redesigning it, it was a bloat of a website, taking version 2 around 20 seconds to load. Ouch!
The Problem
Aside from the load speed, version 2 represented a full-time company (as Voltronik was in the summer of 2010 when it was designed). Although professional, this didn’t reflect what had happened to the company in the last few months. I am still dedicated to Voltronik but I have university commitments now too and so wanted a website that reflected my general personal creativeness and still hosted my blog.
Ideas and Design
I had mulled over what themes I wanted version 3 to reflect for months. Finding the time to actually sit down and come up with a mockup in Photoshop was proving difficult so I wrote down some key words that I wanted the site to reflect about me: British, Engineering, Good Design, Tech, Music, Simple/fairly minimalist.
I also wanted the site to have side navigation for a change and to all round just feel more fun. Once I had these ideas on paper, creating a mockup in Photoshop seemed easy. I got the design done in almost no time at all.
The only element I feel i couldn’t seem to achieve was the theme of music. I’m not worried though as I can just write about that instead should i want to.
Improvements
I mentioned that version 3 has some new features. These are the things I am particularly proud of:
I have implemented the use of CSS media queries in order for the site to be scalable and therefore viewable on almost any device. If you’re in a desktop browser, try it for yourself! Scale this browser window down to any size you like and you will see the content dynamically resize to fit. This means I don’t have to spend hours designing different sites for different screen resolutions or a site that fits the most common resolution, hoping that it will work on all. There was quite a learning curve here but I’m pleased with the outcome, especially as it also means that I have a mobile site that is as fully accessible and navigable as the desktop view of the site. The secret is percentages and em values for almost all elements – barely any pixel values what-so-ever.
Another feature is, should you want to, you can bookmark voltronik.co.uk on an iPhone and add the icon to your Home Screen. A nice high-res ‘V’ icon will now appear. A little thing but a nice touch I think none-the-less.
My new host allows gzip compression and in conjunction with WP-Minify and WP-Super-Cache, I have been able to reduce the page load time down from around 20 seconds for version 2, to around just 9 seconds for version 3 on my connection. This is from scratch and has been tested multiple time in different browsers, each time with a completely empty cache. A 55% improvement!
Since re-locating to a UK host with a .co.uk domain name, Voltronik has moved up 10 pages in Google search results overnight! This was actually a bit of a super-mega bonus as it is was entirely unintentional. I suppose it means my SEO must be ok too 😉 Search for ‘web design salisbury’ (a reasonable and realistic search term i think) and there Voltronik is, on page 3. Hurrah! The aim now is to get to page 1 or the top of page 2, where possible.
Roundup
So there we have it – version 3 is in my opinion, a big improvement over version 2 and has some nice features that will hopefully benefit the company and my blog, all round.
Feel free to ask anything/have your say in the comments.