Website overhaul: new design and development

Last week I released the latest version of designedbythomas.co.uk. If you ever visited the old site then you will see there has been quite a drastic change to the overall theme and structure.

I decided the time had come to upgrade from Drupal 6 to Drupal 7 and as part of the upgrade I took the opportunity to assess the site as a whole to see where improvements could be made. The major change I wanted to implement, and had wanted to implement for a while, was the header section. The header section of the old site (pictured below) was massively oversized and took up most of the space ‘above the fold’ which meant that visitors to the site had to scroll down to see any meaningful content. Definitely not an ideal situation when you want people to be interested in the content of your site! As a result I completely changed the header section for the new site, reduced the size of the logo, placed the navigation links horizontally rather than vertically and replaced the massive site tagline with a more focused tagline below the navigation links (which is meant as a one line overview of the current section a person is currently viewing).

Again, as part of the move from Drupal 6 to Drupal 7 I decided to look at how the site is viewed on mobile devices. I decided to try and create a more fluid width layout for the site, a layout which adapts based on the browser width the site is currently being viewed in. Hopefully if you are viewing this post on a mobile then the content should be in one neat column allowing you to easily scroll down and read more without the need to zoom in. I have to confess that I have only tested the site under iOS and mobile Safari so if you have any feedback on how the site looks on another device, please let me know in the comments! Developing a fluid site theme which looks good within a variety of different widths was truly addictive, once I started I found it very hard to put down!

There were also a couple of new social features I implemented within the site, the twitter follow button for example is placed in the top left of the site header allowing you to easily follow me on twitter. At the end of this post you will also find a couple of new sharing widgets which I didn’t have on the old site such as the Facebook like button.

The site isn’t yet finished, and to be honest, I’m not sure I will ever see the site as ‘finished’ since there are always new things I am looking to implement! Just today for example, I implemented a ‘colour change’ function to the blog pages which allows users to change the background and text colour of the blog content in case they prefer reading dark text on a light background rather than light text on a dark background. This little piece of functionality takes control of HTML5 local storage to remember the choice a user made and present them with blog posts in the same style when they next visit the site!

I do hope you enjoy the new site and please feel free to leave any feedback you may have in the comments below!

Thanks to Silvia for the feedback, I hope the new ability to change the blog post background colour helps!