10 Things to Consider When Converting Any Existing Site to Responsive

Accept it or not, Responsive Web Design (RWD) has now become a new standard for building websites. According to a recent survey, over 81% people prefer to use Responsive Design over other two mobile configurations – Dynamic Serving and Separate URLs. The reason why responsive design is so popular among designers is its ability to adapt to devices of all screen sizes.

If you have a non-responsive site and are planning to convert it to responsive, then you have landed to the right place. In this blog post, I’ve highlighted ten key considerations that you must take into account while converting a non-responsive site to responsive one. Follow these practices and you’ll be able to make your site as responsive as it can be, absolutely without hampering its usability, accessibility and performance.

Let’s begin!

#Analyze Your Existing Site:

This is the first and foremost thing you should keep in mind while starting existing website to responsive conversion. Dig deeper into your non-responsive site and visualize how you’ll be converting it into responsive design. By doing so, you would be able to decide what features you should keep in the responsive version.

Analyze the navigation system of your existing site and think how you can improve it while converting the site to responsive. Examine hidden elements, like email subscription and contact page, and determine how they should look and function in the responsive version. Also, if you find any irrelevant or outdated content on your current site, clean it up.

#Perform a Thorough Backup:

No matter how many times you previously have taken back-up of your existing site, take a complete backup once more to avoid any risk of data loss during the conversion. Despite the fact that backups take very little time and effort, they are often overlooked.

Hence, it would be better for you to have a latest backup of your existing site saved in multiple places so that you could easily restore your site if something goes wrong in the conversion process. Also, even if you feel you’re an expert, I would suggest you to never play with your site in the live mode.

#Define Breakpoints & Design Layout Accordingly:

In a responsive design project, one of the most important things to keep in mind is flexibility that can be achieved by determining breakpoints based on your current design. Breakpoints define how your site’s content will adjust to fit different resolutions and screen sizes.

So work out the appropriate breakpoints and accordingly, design your layout to fit different devices like mobile, tablet and desktop. Since breakpoints define the user experience for various different viewports, be very careful while defining them.

#Add Responsive Meta Tag:

To make your site’s viewport respond to different resolutions, don’t forget to add the “Responsive Meta Tag” to thesection of your website. Below is the code snippet that you need to include in your site header:

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

This will change the zoom behavior for mobile devices, preventing web pages from zooming in mobile browsers.

#Apply Media Queries:

Media queries are a great way to make your site look good on all kinds of devices ranging from smartphones to desktops. When implemented carefully, not only they optimize the readability of your site but also deliver quality user experiences on different devices and screen sizes.

Since different devices support different media queries, you would have to target each device according to its resolution. The best way to target each device is to create media queries for most used devices, analyze how content flows on all resolutions in-between the key ones and then tweak it if required.

#Clean Up the Clutter:

Even though the main purpose of responsive design is to deliver the same content to every user, I suggest you to strip away all the unnecessary stuff when converting your site to responsive for mobile and tablet devices. Doing so will not only enhance the user experience for small screen devices but also improve the page loading time to a great extent.

To know what elements are important on your site, delve into your Google Analytics account and analyze what people click on the most and what’s not being used for a long time. Keeping the purpose of each page in mind, remove everything you think superfluous.

#Perfect the Navigation:

Navigation is probably one of the biggest challenges, which we face when converting a site to responsive. No matter how good your current navigation is, you would have to make it fit on small screen devices. This is certainly not a simple task because the goal is to make each web page easily accessible on every device and screen size.

There are many types of navigation menus that you can use for small screen devices. In my opinion, you should consider using either a drop-in menu or an off-canvas solution to compress your navigation. However, what works best for your site totally depends on what kinds of products, services and content you’re offering.

#Get Your Images Right:

One of the major problems that developers face while working with responsive design is making imagery responsive. Not only you need to resize images proportionally but also you’re required to keep their performance up on all devices. That’s a very big challenge! Isn’t it?

Out of several techniques available to resize images proportionately in responsive design, the most popular is mentioned in fluid images article written by Ethan Marcotte – the father of Responsive Web Design. To prevent an image from looking “pixelated” or “stretched”, all you need to do is to set its maximum width to 100% as follows:

img { max-width: 100%; }

This way, the browser will always keep the image in proportion to its pixel value!

#Pay Attention to Readability:

Readability on all devices is another crucial thing that many developers overlook in responsive design. Despite of web font services like Google Fonts and Adobe Typekit has given us much greater flexibility to craft gorgeous typefaces online, we need to develop and follow a consistent approach make text legible enough on all devices including mobile.

Good legibility and readability can be achieved by taking advantage of Responsive Typography, which makes use of em and rem CSS units. However, readability is not limited to just text. To deliver users an optimal website browsing experience, you’re required to also pay close attention to design elements like buttons, icons, logo and slides including text etc.

#Optimize For Touch Screen Devices:

Since a wide range of devices – including mobiles, tablets and even some desktop computers – today use touch as a primary input method, make sure your site delivers a quality experience to users on touch devices. People use their fingers on touch-powered devices and therefore, you need to make your site as finger-friendly as possible.

To optimize your responsive site for touch screen devices, consider incorporating touch-specific features such as click-to-call and auto-form filler. Avoid using hover effects since most of the touch devices, except some Samsung devices, don’t support them. Also, keep forms on mobile as simple and straightforward as possible.