Website Retrofitting: Responsive Keyhole Surgery

In many cases fixed width websites, that are not optimised to work on smaller screen devices, can be responsively retrofitted. Meaning the same site design remains in tact while the layout is adapted to respond to different width devices. To create a responsive site, or mobile site, as they’re often semi-mistakenly called, a complete redesign is often not necessary. By editing only CSS, a layout can be re-worked to be responsive. This provides a better experience, particularly for mobile users, making the site more valuable.

A Responsive Retrofit Experiment: The Irish Independent

To put this to the test and demonstrate what can be done with a fairly complex layout, I spent a few hours making adjustments to the, which, at the time of writing, looks like this:

There is no issue on tablets really, but on smaller screens users suffer the pinch-and-zoom headache to magnify content and navigate. The Independent recently stated their intent to increase their digital offering, so it seems there is a great opportunity for them to do so, with fairly little effort.

I took a sample from the home page, made changes to only the CSS for the site; the HTML remains exactly the same, as does the JavaScript. With this low interference responsive keyhole surgery method (which I picked up from Ben Callahan), I was able to produce the following results:

There are a few challenges I cut corners on. The slider isn’t functional, and the control thumbnails would take some creativity to find a small screen solution to maintain the current functionality. Also I cheated and disabled fixed top menu. Despite that, the experiment was successful and shows that the Irish Independent could, with relatively little effort, get their website to work on smaller screen devices.

View the live demo.

Here is an elongated version of what the demo looks like on an iPhone width screen.

Can My Site Be Retrofitted?

One of the main criteria to determine whether a responsive retrofit can work or not, is  how well the content is marked up in HTML. Correct source order is usually necessary also. In about 30 minutes we can usually figure out if a retro fit will work. If you would like a review of your site, get in touch. And of course, if a retrofit will work with your site we would be happy to help make it happen.

Paddy O’Hanlon is a web designer and one of the principals at Logo24. He is a lover of good semantics, well documented and architected CSS, and beautiful, content-driven design. (Really the design-guise is a cover-up so he can covertly feed his travel addiction and climb many rocks around the world). He tweets @Paddy.

Comments make us happy