You’ve decided to convert your website into one that is responsive. Sounds easy, right? Not so fast. Converting a non-responsive website into a responsive website requires you to replace the current code with a framework that supports responsive web design, such as Bootstrap or Foundation.
Whichever framework you select, you need to:
- Identify the features of the website that must be replaced by the responsive framework and delete the code for those features. Conversely, identify the responsive framework features you want to employ. For example, a responsive framework will have its own main navigation bar code that you’ll want to use in place of the standard “desktop” code so that the main navigation bar renders properly on all devices.
- Once we know what needs to be replaced, we then update one page or template at a time with the responsive framework features.
While this conversion process may sound easy on paper, it’s actually a lot of work. Let’s say you use a two column template for your subpages, where the left hand column shows the sub navigation and the middle column shows the body copy. When a visitor views your site on a mobile device, you want the middle column body copy to appear first. Thus, you have to employ responsive code so that the mobile view stacks the content on top of each other, with the middle column appearing first.
You may also want to hide elements that appear on the desktop version of your website from the mobile version. For example, a footer on a mobile device may take up too much space. You can go through each feature on your site that you want to hide and embed responsive “hide” code to that feature.
If your website has videos on it with fixed height and width measurements, you need to embed responsive code on the videos so that they render properly. If you don’t do this, the video will look huge on a mobile device.
Other examples include images. You need to embed responsive code on all your images so that they automatically resize to fit the device.
So – as you can see, converting your website to a responsive website is a lot of work, and that’s why we often recommend that you tackle responsive when you do a full redesign.