Retrofitting Responsive Design on an Existing Website

[bcbounders]

I’ve been getting more and more requests lately for mobile versions of websites. Instead of going the sub-domain, mobile website route, I was hoping there was a way to “easily” retrofit responsive design into an existing site.

Anyone have any ideas/tools/suggestions for the best way (or any way) to do this without re-coding the entire site?

[JohnMotylJr]

Well, since i like doing things the hard way, i would suggest throwing in a media query and then work down from there, considering your containers, wrappers, etc arent responsive already

[CrocoDillon]

Those websites probably are designed for some minimum screen width, like 960px. Take every CSS that’s making it fixed like that and put it in a MQ with min-width 960px (or whatever), you’re done for everything bigger then that. Resize the browser to mobile size and start making tweaks to make it look good, you’re done for mobile. Then resize your browser from mobile size up and see where you need MQ breakpoints to make it look good for everything between mobile and big screens. That’s basically mobile-first, but reversed :P

Problem with mobile-first is browsers that don’t support MQs get the mobile ‘version’, you can of course target IE8 and less with conditional comments (like html5boilerplate does, same CSS file but prepend rules with `.lt-ie9`) and give them the 960px layout.

[bcbounders]

Thanks guys. Sounds like good advice… and a good place to start.

Was secretly hoping there was some “magic bullet” or “secret trick” to getting it done… but elbow grease it is! ;D

[Alen]

With RWD you have to think beyond changing bunch of widths to make your design “responsive”.

Your current content hierarchy might not make any sense for responsive layout. Your whole content strategy needs to change. Think about it, you are responding to screen sizes of ~ 1200px to ~ 320px. So for example, your sidebar at 1200px is above the fold, now at 320px it’s buried all the way on the bottom, because content has shifted. Is this content important to your visitors? If yes, is it the best idea to shift this content to the bottom on mobile devices?

What about images? Are they responsive too? Are you serving smaller sizes to mobile devices? What about performance and load times? What about modularity and expansion? Are new features going to be easily integrated? Ect! With RWD there so many things to think about. It’s not just about changing px’s to %’s.

In my opinion, if possible, rewrite from scratch. It will save you so much patch work down the line.

[croydon86]

Bear in mind converting an existing site into a responsive site is going to be painfully slow on mobile as you will probably end up using ‘display:none’ on a lot of things, plus it will load all your scripts/images on your current site, whether they are used or not.

It’s a quick fix and will save you time but don’t expect it to be fast, which is one of the most important things right now in the responsive world.

[croydon86]

Wrote this before I read @AlenAbdula comment, completely agree! In fact, if you are not willing to do it from scratch, leave it as it is!

[bcbounders]

Thanks, Alen & croydon. Appreciate the input.

Anyone have any thoughts on any tools/frameworks etc. that they really recommend for doing this kind of thing? HTML5BP? Twitter Bootstrap? That sort of thing? Is there anything that can give me a leg up on this sort of retrofit? Or am I going to have to dive in and just learn all of the issues/pitfalls, etc on my own (with Google’s search help, of course!)?

Thanks!

[Alen]

If you are retrofitting your current design it’s kind of impossible to use any of the existing frameworks without rewriting most if not all of your code. So might as well start fresh.

With so many frameworks available it becomes personal preference when deciding which one to choose. At the end of the day they are just tools. So pick the one that fits *you* best. You might need to experiment little with each but that’s okay, you’ll learn that much more.

I would start with the two most popular ones:

[Twitter Bootstrap](http://twitter.github.com/bootstrap/)

[Foundation](http://foundation.zurb.com)

Just to note. I am not telling you to forget about retrofitting your website. Try it and see what kind of results you get. Test your current site as is (load times, size, etc) then compare with the new mock up. Just be informed, so you can make educated decisions about the direction of your website.

[bcbounders]

Excellent advice… thanks, Alen! Gotta go carve out some time to start experimenting to see how things work.

Appreciate all of the input, everyone!

[Author]

Posts