A common question for designers and developers is whether an existing website can be retrofitted with a responsive design. It's an understandable request—clients have put a lot of work into their website, and responsive is a challenge.
But to get the many benefits of responsive design, a responsive retrofit just won't cut it.
Can't I just add some media queries?
Some recommend quick fixes, like media queries to apply styles to viewport widths. This is inexpensive, and allows you to keep one code base—not several as with a new mobile site or app. Doing something for your desktop site is better than doing nothing, right?
The code base of a fixed-width site usually isn't easy to update. Even if you scale some elements to look better on a smaller screen, you'll also want to consider font sizes, navigation, hit states for buttons, etc.
The truth is, good responsive design is much more than just a front-end technique.
A common—and valid—complaint about responsive design is performance. Responsive websites are generally not as fast as they should be, which is especially important on mobile devices.
More often than not, it's because large images and scripts aren't handled the right way. They're sent to a small device and downloaded, just to be hidden from view. A responsive retrofit might help some images look better on a small screen, but it won't matter if a customer abandons the page because of a longer load time.
As Karen McGrane argues, responsive design won't fix your content problem. The biggest issue with retrofitting an old site is content, which media queries won't fix.
For one thing, design shouldn't be based on screen sizes, which come and go. And it's easy to make poor decisions about content on your site, like sending an important side bar to the bottom of a mobile screen.
Take the opportunity to opportunity to organize the content the right way, mobile-first and progressively enhanced. Most importantly, make sure there's a healthy separation between content and structure.
The many benefits of switching to responsive design make it well worth the effort. Don't settle for a stop-gap solution—build a mobile-first site with server-side components, and you'll see the same jump in traffic and conversion rates that so many responsive websites enjoy.
image via Brad Frost