Convert an Existing Non-Responsive Website to Responsive One

Over the past few years, Responsive Web Design (RWD) has moved from a simple design trend to the mainstream. According to a recent survey, more than 81% people are in favor of using Responsive Design technique to make their sites mobile-friendly. The key reason why people prefer to use RWD over other two approaches – Dynamic Serving and Separate URLs – is its ability to adapt to various devices and screen sizes.

Be it about converting an existing website to a responsive one or building a responsive site from scratch, Responsive Web Design has always been a big challenge to designers and developers. That's probably because they don’t know the right way to make a website responsive. In this article, I’ll show you how to convert an existing website to responsive in six easy steps.

Let’s start!

Step 1: Define Breakpoints and Plan Layouts

When building a responsive website, the first thing you need to do is to decide how many layouts you actually need for your non-responsive site. Since different devices require different layouts, you’ll have to plan a unique layout for each device which your website is being visited on.

To plan multiple layouts for different devices, you need to first determine breakpoints. This can be achieved by exploring your current design to find out the points where it breaks down naturally. Based on the content of your existing site, define appropriate breakpoints and plan how content would adjust to fit on different screen sizes.

Step 2: Add Responsive Meta Tags

When you’re done with breakpoints and layouts, the next thing is to get responsive design actually work in mobile browsers that render web pages at full-view and provide users with pinch-to-zoom in functionality for the content they really want to access. In case of responsive design, you’re required to change the zoom behavior for mobile browsers so that media queries could work properly. Insert the code snippet given below in the < head > section of your website:

< meta name="viewport" content="width=device-width, initial-scale=1.0" >

The viewport tag above not only sets the view at a 1×1 aspect ratio for all screen sizes, but also instructs the browsers to use the device width as the viewport width.

Step 3: Apply Media Queries

Media queries, which are the heart of Responsive Design, allow you to define CSS styles for a particular device on the basis of characteristics like screen width or resolution. Think of them as a powerful “if this size, then this style” tool that lets you adjust different layouts for difference devices.

If implemented carefully, media queries can help you deliver high-quality experiences to users across all available devices. To find out what media queries are perfect for your website, analyze breakpoints and layouts which you’ve defined in the beginning. For better results, start with media queries for small screen and move on to media queries for relatively larger screens.

Step 4: Perfect the Navigation and Typography

Handling Navigation and Maintaining Typography across all devices are two of the most common challenges everyone faces when turning an existing website to responsive. Where Navigation requires being intuitive and self-explanatory, on the other hand, typography needs to be legible and readable on all devices including mobile.

To compress your navigation and make it fully accessible on small screen devices, I suggest you to use either a drop-in or an off-canvas menu. And to achieve good legibility, flexibility and readability in Typography across all devices, take advantage of Responsive Typography — a consistent approach that uses CSS units like em and rem to let you maintain readable type across multiple devices.

Step 5: Make All Media Flexible

Since the most important aspect of responsive web design is flexibility, make sure that all media — including images and videos — are reasonably-sized. To make your all media responsive, not only you must be aware of the best sizes of media for your site but also be able to serve the right media for the device your website is being browsed on.

The reason why you should optimize media in a responsive design project is to design for a wide variety of devices. Phone screens are typically smaller; on the other hand, other devices like computer or TV screens have higher resolution screens. So it’s quite crucial to keep the layout flexible, which is possible by preventing each element from ever being larger than its container.

Step 6: Prepare for Different Types of Interactions

Last but certainly not least, make your site ready for different interactions offered by different devices. Where users operate a traditional desktop screen with a keyboard and a mouse, on the contrary, high-end devices — like iPhones and Android phones — is operated by fingers since they use touch as a primary input method. Understand this and prepare your site to handle different types of interactions.

It’s not always true that an interaction which works fine on one device will also work well on another. That’s mainly because all devices are different from each other in both hypothetical and practical ways. On a regular desktop, we use keyboard and mouse pointer while on mobile and tablet devices, we have nothing more than our fingers that are less precise than a mouse pointer. So, consider making your website friendly to fingers as well.