Tim TrottTim TrottDon't quit

Responsive Web Design – 5 Reasons for Upgrading

By , Tuesday 6th August 2013 in Web Design

Responsive web design is the only practical design for a modern business web site. Google is encouraging businesses that use separate web sites for computers and mobile devices to combine them into a responsive web page. This article gives five reasons business should switch to responsive web design.

Life was so much easier when, as a web developer, all you had to worry about was Internet Explorer and a minimum screen resolution. Nowadays there are a plethora of devices, large and small, and an almost infinite array of screen sizes to code for. This is where Responsive Web Design comes in.

What is Responsive Web Design?

Simply put, responsive web design as a design pattern that allows the website appearance to adapt itself according to screen size. With one HTML document and responsive media queries, a website can adapt itself to look good on a small mobile device, a tablet and on desktop. This not only saves time, money and resources developing individual desktop and mobile sites but it also provides a much better customer user experience, thus increasing sales and conversion rates.

Example of non-responsive site
Example of non-responsive site

In these two pictures we can see the difference between a traditional web design and a responsive web design. In the image above, the website is not responsive. The smaller the window or device, the smaller the website is and the more difficult to read. In most cases the users would have to zoom in to read the text and scroll around to see anything else that does not fit on the page.

In the image below, you can see that the layout of the site and the font size have responded to the size of the screen and ensures that the content remains visible. For example in the tablet and mobile views, the side navigation has been removed and replaced with a drop down at the top to save space.

Example of Responsive Web Design
Example of Responsive Web Design

Why Should I Upgrade to Responsive Web Design?

Mobile devices account for almost 15% of online traffic (2014, source) and this is expected to double or even triple. Update in 2014 - Mobile devices now account for nearly 60% of online traffic (source).

Traditionally, a site would redirect to a "mobile friendly" version of the website. This meant that companies had to develop and maintain two separate sites - one for desktop users and another for mobile users. A responsive website design allows all devices, regardless of screen size to show an optimised view, all from the same website.

Here are some more reasons to upgrade to a responsive web design.

Improved User Experience

By presenting users with an optimised website for their display size, they are able to locate content and interact with the site much easier than an unoptimised site. For example, a standard non-responsive site may require a user to pinch-zoom in and scroll around to use a simple form, whereas a responsive site would naturally show the form in a way that the user does not require to put any effort into using it.

Increase sales and conversion rates

If the user is not required to think about, or put effort into using the site they are much more likely to continue using it, revisit your site and successfully complete a transaction.

Consolidate your analytics and reporting

If you are running two separate sites, you may be combining figures from Analytics programs to consolidate overall traffic and sales data. With a responsive website where all devices and platforms are running as one you no longer have to do this as everything is already collected together. In Google Analytics you can create traffic segments to analyse and compare traffic from any platform and screen size to see how you are performing.

Save time and cost on mobile development

If done correctly, responsive web design shouldn't cost any more than traditional web design. It's just a case of implementing the correct design pattern from the start. The simplest method is to use our responsive website design template which takes the mobile first approach in that you code the site for a mobile device, then "add" screen sizes upto desktop. The benefit of this is that mobile deviecs only load content that are specific to mobile devices not desktops. The main advantages of this are faster page loading times and reduced bandwidth.

Another solution is to implement the Twitter Bootstrap framework which handles responsive design.

It is Recommended By Google

Responsive web design is not only recommended by Google, it is also becoming an important ranking factor in search results. Sites optimised for mobile show a little "mobile friendly" icon next to them in search results when viewing on a mobile device.
google-mobile
google-mobile

Try It!

This site is fully responsive. Try resizing your browser window if your on a desktop, or if your on a mobile or tablet you should already see an optimized view of the site.

My website and its content are free to use without the clutter of adverts, tracking cookies, marketing messages or anything else like that. If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.

About the Author

Tim Trott

Tim is a professional software engineer, designer, photographer and astronomer from the United Kingdom. You can follow him on Twitter to get the latest updates.

Further Reading
Leave a Reply

Your email address will not be published.