Responsive web design is a technique for creating websites that “respond” to a given user’s device in order to provide an optimal user experience, regardless of the device’s screen size and orientation.

A responsive website reorganises itself based on the size of the “viewport” available to it, making it easier to use and more accessible in general.

Responsive Web Design

 

Before the advent of the iPhone in June of 2007, the majority of websites were designed for display on desktop sized screens. At that time the range of screen sizes that web designers needed to account for was fairly limited.

The iPhone changed all that, it heralded the coming of a much larger range of device sizes. With the availability of all these new devices Web designers needed to find a approach that didn’t involve a separate design and development phase for each new device on the market.

In May of 2010 Ethan Marcotte’s seminal article on Responsive Web Design proposed a solution.

http://alistapart.com/article/responsive-web-design

Ethan developed his initial thoughts in a groundbreaking book which is now in it’s second edition.

 

Ethan Marcotte - Responsive Web Design

 

There are three main issues that need to be addressed when making a website responsive, they are:

Fluid Grids

Responsive websites are built using relative measurements like percentages in order to describe a device’s available space.

Fluid Images

Images need to be able to adjust their sizing so that they can adapt to their container’s width. Also, because more and more devices these days have different pixel densities (2x or 3x) then it is advised to use vector images where possible and provide larger images when not.

Media Queries

Media queries are used to reorganize elements of a website’s structure. Sometimes this means hiding and showing different elements depending on the space provided, swapping out a navigation menu for example.

So, why do you need to know about this? Well according to this recent IMRG Press Release mobile channels now account for 40% of all online retail sales.

http://www.imrg.org/index.php?catalog=1769

 

IMRG Mobile Sales

 

IMRG chief information officer Tina Spooner said: “The impact of mobile on general user behavior has been extremely significant – most of us now carry our phones around 24/7 and regard these devices as being a central part of everyday life.”

Web usage on mobile devices is not going away any time soon. If your website is not optimised for these devices then you may be losing out on potential sales.

If you’re not sure whether your business could benefit from an upgrade to a responsive website then there are a few things you can try out which will give you a better idea of whether to consider it.

Try looking at your website on a phone. Do you find it difficult to use? Can you read the text and navigate around the site easily? Can you fill out contact forms or click on your company’s phone number? If your site is difficult to use on smaller devices then you may need to update it.

It can take a significant amount of time to fully upgrade a website that is not responsive. It usually requires rebuilding a site from scratch. So, if you’re planning a new website, you definitely should build a responsive site from the very beginning. This approach will save you time and money in the long run.