Converting a Fixed-Width Site to a Responsive Site

Why Go Responsive?

After reading much about Responsive Website Design over the last twelve months, combined with the rapid increase in use of mobile devices to browse the web, I made a decision this year to make all my new websites responsive – should budgets allow. For the uninitiated, a responsive website design adapts itself seamlessly to the device that is viewing the site. This approach negates the need to create a separate site specifically for mobile devices, thus saving the client a considerable amount in development fees.

I began to experiment with the excellent Twitter Bootstrap, a fully responsive framework within which to build your websites. I created three websites with Twitter Bootstrap; ELDERMET, West Cork Rapid Response and The Dungarvan Observer. Whilst all three clients are delighted with the results, I personally wanted to do better and learn how to create my own responsive, lean-coded, tailored websites – without relying on the rather bloated code of Twitter Bootstrap. So, after completing a day’s workshop on responsive design lead by John Henry Donovan, I took the initiative to start building my own responsive site from scratch.

I’ve already completed my first site and the results are due to be launched in the coming weeks. Building the site was a very challenging and satisfying experience from initial sketches, to a Photoshop layout, on to HTML and CSS templates (with all my em and percentage calculations) and finally conversion to a Custom Responsive WordPress Theme. But how could I claim to be a website designer who develops responsive sites when my own website was still agonisingly anchored to a fixed-width, pixel-precise layout?

I needed to change the code of the whole site, whilst retaining the overall look (which I am still happy with) and, as a challenge to myself, as John Henry’s next design workshop was fast approaching, I had 4 days of working in-between projects to make the site fully responsive and relaunched.

The Challenges

As I said above, my website was designed with a fixed-width layout where all dimensions and constraints were defined with measurements in pixels, the layout conformed to an 8-column, 960 pixel wide grid. This meant that when viewed on any device smaller than a desktop PC or laptop, the site had to be pinch-enlarged in order to be read on tablets and smartphones, then you have to scroll around within the window to continue reading – this is a particularly frustrating experience on smartphones.

The solution is to create a fluid layout which is combined with media queries in your CSS code to deliver a tailored view for the smaller screen resolutions of tablets and smartphones. To become fluid, all of the pixel-based measurements must be converted to percentages for widths and horizontal padding and margins, and for typography measurements and vertical padding and margins, a conversion to ems.

Another challenge was that all of my site’s images were sized at a maximum width of 4 columns, which equated to 464px. I did not want to have to go through my entire portfolio and create new images at a wider width and then have to upload and replace each one through hundreds of posts. I decided that my images would effectively define my new flexible grid. Where these images would span 4 columns in my 8-column, 960px wide grid, they would now span 3 columns. This increased the overall width of my 8-column grid to 1292px. With this measurement set as my maximum width, I could now calculate all internal widths as a percentage of 1292 pixels.

This new wider maximum width would look much more comfortable sat in the middle of any large desktop PC’s screen. By using media queries within my CSS file, I could ensure that the site would reduce in proportion for smaller desktop and laptop screens (1280px and 1140px widths) down to iPad size – 1024px.

The results were looking good!

The Smartphone Conundrum

The iOS/Android/Windows smartphone version of the site presented a few different challenges. In order for the site to run well on these devices, extra decisions need to be made in order to create a pleasing user experience. Our 8-column grid needs to become a 1-column grid for these devices. That means deciding what content should be retained and what should be hidden.

Obviously there are going to be a few elements that outweigh others when reducing the site down to a single-column format. For the homepage, I retained the main navigation, the introduction, the ‘about me’ section, my 10 most recent articles, my logo and copyright information. This meant losing the social links, search box, main image slider, contact form and Dribbble feed. Now the smartphone version of the site was super quick to load and focused on the most important areas. The downside is a lack of images on the landing page (I might revisit this at a later date), but the essentials are there and work and articles can be found swiftly and, more importantly, read easily.

Having now completed work on this conversion, I can categorically state this is a pain-staking process with much testing and re-testing, and, at times, I thought about scrapping the conversion altogether and starting from scratch. However, now that I have completed this, I can approach any other fixed-width site in the same manner, should I be commissioned to do a conversion.

Thanks for reading!
Paulo

Before:

After:



Top