There’s a lot of talk these days about ‘responsive web design’, and I believe that the techniques and approaches that it encompasses are going to prove invaluable as we design new sites for an ever widening range of different devices.

Retro-fitting responsiveness

But those techniques don’t need to be limited to new designs or major re-designs. They can be applied to existing fixed width sites to improve the experience for users on handheld devices. And though adapting an existing fixed width site so that it behaves more responsively can seem like a daunting task, it can actually be relatively painless.

I’m going to share my experience of doing so on a site I built for an artist’s portfolio, and highlight some of the techniques and decisions that were made.

The site

The site was initially prototyped in HTML. Layout, typography, colour palette etc were then explored within Fireworks mockups and then developed and refined within the prototype itself. A few markup tweaks later and the site was essentially done.

The problem

The site was fixed at 960px wide. It worked fine at desktop resolutions but was fiddly to use on mobile devices, requiring an awful lot of scrolling and zooming to look through the artwork.

A pragmatic approach

In retrospect I should have taken a responsive approach from the outset, eg. allowing images to stretch/shrink to best serve the many resolutions they might be viewed on. But rather than try and retro-fit an ideal approach, I wanted to see how quickly and easily I could fix the biggest issue – the need for better presentation on mobile devices.

Setting up

First I added two media queries to my global stylesheet – one to target mobile devices (ie. device widths 480px and below), and one to target anything larger than mobile. Anything outside of these queries would be applied to all devices. It then became a simple process of moving existing styles into the second query if I didn’t want them to be applied to mobile devices, and adding new mobile-specfic styles to the first query.

The changes for mobile

Page widths

The site is currently fixed at 960px. I wanted it to be full width of devices up to 480px wide, so changed the page width to 90% for device widths 480px and below.

Navigation

The tabbed navigation simply doesn’t work. If shrunk down the fit a small screen it becomes impossibly fiddly to use. I’ve re-styled them completely, ensuring they have large hit areas, and allowing them to stretch, in a manner similar to that demonstrated by Ethan Marcotte’s ‘Responsive Web Design’.

Title

The graphical title didn’t work well with the revised navigation, so I moved the image-replacement technique to the larger-than-mobile media query and re-styled for mobile devices using the Typekit styles used elsewhere on the site.

Line-height

There’s a generous 1.8em line-height on some passages of text on the desktop version that feels uncomfortable on the mobile version when those passages are reduced to less than 300px wide, so I reduced it accordingly.

Background imagery

The CV page has a large typographic background image that makes no sense when cropped on the mobile version, and looks fussy when scaled down to fit. It is simply removed from the mobile version (by moving the image out of the global styles and into the larger-than-mobile query).

Whitespace

The desktop version uses a generous amount of vertical whitespace in its compositions to group elements together, and to give the design an airiness. In the linear mobile version the whitespace breaks the flow of the page, and so I reduced it.

Hover states

Obviously hover states on links have no value on a touch-screen mobile device, so all hover states are moved into the larger-than-mobile query (though I could have left them for the benefit of some future hover-sensitive touch screen device). I then double-checked that there were enough visual cues for links after those hover-states had been removed.

Homepage Carousel

I’ve removed the carousel on the homepage entirely for mobile devices using a simple (albeit crude) “display: none”. The decision to do this is more of a hunch than anything – a feeling that users on a mobile are likely to be browsing quicker than desktop users, and won’t be lingering long enough on the homepage to enage with the carousel. I’m not sure its advisable to second-guess the context in which users are using their mobile device, but I’m comfortable with the decision.

Tweaks and fixes

There was a fair amount of kinks to iron out (eg. margins between floated columns caused alignment issues when linearised in the mobile version, and some larger images needed to be changed from fixed width to percentage-based to stop the layout breaking).

Conclusion

And that’s about it. I’m not suggesting that this retro-fitting approach is preferable to rebuilding a fully responsive layout from scratch – it isn’t. But this exercise hopefully shows that with just a couple of hours work you can get a previously fixed width site looking pretty respectable on a mobile, and far easier to use.

To learn more about responsive design techniques I can thoroughly recommend ‘Responsive Web Design’, and to see some properly responsive designs (as opposed to the hatchet job I’ve described above), check out the Media Queries website.