How to Make Your Website Mobile Friendly

With the way people use the internet today, the design principal known as ‘Responsive Design‘ has become an integral component of any website. Being fitted with responsive design means that your website will render and display neatly and consistently across any type of mobile device; be it a smartphone, tablet or a traditional desktop computer or laptop.

With 1.6 million smartphones and 450,000 tablets in use in Ireland, not fitting responsively means not future proofing your website, and is cutting off your nose to spite your face in terms of reaching all of the potential users that would have otherwise be possible.

But what to do if your existing website is not responsive, you wish to make it so, and are considering your options. Let’s imagine you are in the less than ideal situation where your initial build was a big design project and that build did not include the foresight for mobile optimisation.

If you are in this position, there are a few options available:

1. Use a ‘Responsive’ CSS Stylesheet

This involves re-drafting your websites ‘stylesheet’ so that it will ‘stretch’ or ‘shrink’ to fit the particular viewing screen.

Pros

• This method involves using your existing code.
• This method will allow support across a large range of screen sizes.

Cons

• Responsive design is achieved using modern principals in CSS3. If your existing website is not styled with CSS3, this could prove very cumbersome.
• Trimming back some elements of the code and rearranging elements can take a lot of time to get right and also to test.
• The cost therefore would reflect the above points.

2. Use a Responsive Retrofit by adding an independent Responsive CSS file

This requires coding a separate mobile-friendly stylesheet, which will be activated when the site is viewed through a mobile device.

Pros

• This method also uses your existing code base.
• Since there is an independent stylesheet for responsiveness integrated, it will not interfere with the CSS design laid out for desktop.
• Cost to perform is reasonable if the existing sites coding framework adheres to good design conventions.

Cons

• The existing code base may lack flexibility or be somewhat incompatible with retrofitting

3. New Build with Responsiveness incorporated from the start

Pros

• This is the most flexible option in that it will ensure that your site displays correctly across all device screen sizes and is fully optimized for each.
• It is future proofed for new devices
• It gives your website and you a great image

Cons

• It requires going “back to the drawing board” somewhat.
• It requires new planning and strategies.
• It would be the most expensive option

Summary

As should be apparent, there are a lot of factors to consider when making the decision to adopt responsive design. Each case of course is subjective and can depend on your needs as a client and of course your budget. In an ideal world we would always recommend going for option 3 and reinventing the site with responsive design built in from scratch, but nevertheless it stands to reason that some sort of mobile accessible site is better than none.

That said, bearing in mind also that it is sometimes more logical and less cumbersome to completely rebuild, the key point to take from this blog is that each case is subjective and each set of pros and cons must be thought out clearly, in order to expand your site to mobile devices in accordance with your budget.

– Sean at enhance.ie