How to make an Existing Website Responsive

Making an existing website into a responsive website is an issue that many organisations are currently struggling with. When a considerable amount of time and development has gone into the existing website, rebuilding everything in a new framework can represent a significant investment for a business.

How important is it really for a company to have a responsive website and what difference is this likely to make in the long run?

In April 2015 Google stated that it favours mobile friendly websites in the search algorithms. In simple terms, all things being equal, Google is likely to favour responsive websites over non responsive. If the majority of opportunities for your business come via the website, then this has the potential to hinder carefully nurtured organic search rankings. Mobile usage is constantly increasing and according to recent statistics currently one third of traffic worldwide is being generated through mobile phones.

Responsive Website Graph

As most people have experienced at least once, the user experience on mobile phones for non-responsive websites is considerably inferior. Website visitors on mobile devices are likely to favour responsive websites over non responsive for competing products. If the decision has been made that a responsive website is required for the business then how can this be done? There are many different approaches to achieving this goal but three main options:

  1. Complete rebuild
  2. Convert existing website to responsive
  3. Create separate dedicated mobile website

For large organisations it is highly likely that significant investment has been made into the existing site and building an entire new site simply to work on mobile may not be justifiable. In that case the options are reduced to the last two, convert the existing website into responsive or develop a dedicated mobile website. Both of these options have been discussed in detail below.

Responsive Website Example

Convert your existing website into responsive

Converting an existing website to responsive involves website developers taking the existing website and converting the code to responsive. Fortunately frameworks such as Bootstrap and Foundation can be used to assist in upgrading the website’s code. For small websites this can generally be done in one go, the recommended approach for larger websites is to adopt a phased approach choosing one part of the site to make responsive first, following phases will then see the rest of the site converted to responsive. Benefits of this approach are; learnings can be taken from the initial phases through to future phases, the period for taking the site responsive is shorter, development can take place as budget allows. The main disadvantage of this approach, however, is the possibility of the site feeling disjointed until all phases of development are complete.

Develop separate dedicated mobile app

This option involves building a separate site purely for use on mobiles and tablets. The user is redirected to this website when a mobile/tablet device browses to the domain name. Advantages of this option are the ability to tailor a fully mobile centric user experience and can be cheaper to implement initially. Disadvantages of this approach are that with the distinction between devices becoming blurred, it can be difficult for a website to determine whether a small screen size is a small desktop or a large tablet, meaning the wrong site could be served to the user. Additionally, this option essentially requires maintaining 2 websites.

Regardless of the method chosen, which will largely be determined by the resources available to the company, the business model and primary method of lead generation, making an existing website responsive is an achievable goal for any organisation.

Monique Oosterbaan

Author: Monique Oosterbaan
Published: 27/06/2016