Website development and design blog, tutorials and inspiration

Responsive Web Design - 5 Reasons for Upgrading

Responsive Web Design is becoming a major ranking factor, so make sure your website is responsive.

By , 6th August 2013 in Graphic 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 a 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 ensure 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 up to desktop. The benefit of this is that mobile devices only load content that is 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 you're on a desktop, or if you're on a mobile or tablet you should already see an optimised view of the site.

Further Reading
Comments

There are no comments for this post. Be the first!

Leave a Reply

Your email address will not be published.