Responsive Web Design

by Ste Roberts

Responsive Web Design has become a buzz word over the last year or so. Responsive design is a collection of new technologies that allow a web designer to create website that is responsive and adaptive to the users screen size, platform and orientation.

What is Responsive Web Design?

Responsive websites will rearrange the content on a website to display a design that fits to the width of any given device. Using this approach allows all of your users to access the same information and eliminates the need for a separate mobile site.

Responsive - Layout Demo

Consider the image above, where A is the Header, B is the sidebar and C is the content. On a desktop you will see a 2 column layout with the header at the top. When using the website on a tablet in landscape mode the same layout will be presented but each of the columns is set to a percentage of the screen. On a Tablet in portrait mode the website adjusts itself to fit all of the content onto the screen by moving the sidebar to the bottom of the page allowing the content to fill the entire width of the page. Similarly on mobile the sidebar is shifted to underneath the content but the columns are much thinner.

Why is Responsive Web Design Needed?

The rise in smart phones and tablets that can access the web has increased from almost no use to accounting for 18% of all internet traffic in some countries and this has happened in just two years.

The problem with users browsing the web on a mobile device is that websites are typically designed to a set width (usually around 980 pixels). This means that when a mobile device opens a webpage which is not responsive, the whole page is visible with text and images appearing tiny on the devices screen. Although mobile web browsers have come along way in the past two years it is not all that user friendly and doesn't feel like a natural way to interact with content, it can be frustrating to use and navigate even with features such as; double tapping to zoom into part of the website and panning around by swiping a finger across the screen.

Responsive - Mobile Demo

Why do I need a responsive website?

Below is a breakdown of mobile traffic across the globe showing usage in 2010 and 2012 and the increase in the past two years.

Mobile Share of Web Traffic
  2010 2012 Increase
Africa 5.81% 14.85% 155.59%
Asia 6.1% 17.84% 192.46%
Europe 1.81% 5.13% 183.43%
North America 4.71% 7.96% 69.00%
Oceania 2.88% 7.55% 162.15%
South America 1.46% 2.86% 95.89%
Worldwide 3.81% 10.01% 162.73%

The table shows that global web traffic from mobile devices has increased by more than 160% and at the current rate mobile web browsing is set to overtake desktop by 2015.

On the whole mobile browsing is increasing steadily with no signs of slowing down, companies and advertisers alike are realising this and starting to push more and more content to mobile devices, for example youTube have recently integrated their advertising platform into their mobile apps for both Android and iOS.

YouTube Statistics

YouTube is the one of the most popular websites on the internet with “over 800 million unique users visit YouTube each month”.

The following statistics about YouTubes mobile audience have been taken from YouTube.

  • Traffic from mobile devices tripled in 2011
  • More than 20% of global YouTube views come from mobile devices
  • 3 hours of video is uploaded per minute to YouTube from mobile devices
  • YouTube is available on 350 million devices

Still not convinced?

  • Over 1/3 of Facebooks 1 Billion+ users access their Facebook using a mobile device.
  • 50% of Twitters 485 Million users access Twitter using a mobile device.
  • More than 200 Million videos are watched on YouTube everyday from a mobile device.

Show me

The 360fusion website you are reading this blog on is a responsive design, you can see this by opening the website on a mobile device or tablet (try changing the orientation of the device aswell). Alternatively you can scale down the browser window to see the responsive design in action.

360fusion Webiste

In Summary

  • A Responsive Design will rearrage content to fit any given device.
  • Content, Quality and Design do not have to suffer when creating a Responsive Website.
  • Mobile can no longer be ignored

A number of differnet techniques are used to create a responsive design and a number of considerations need to be taken into account. These considerations and techniques will change from client to client so if you feel that your website would be improved by a responsive design please do not hesitate to contact us.

Other blogs about

Go back