If you are surfing the internet from various devices than you probably found yourself in the situation where you tried to read on your mobile phone the tiny content on some websites. Then you tried to zoom or scroll and finally left the site because the user experience was just irritating. Some websites offer Apps which solve the problem for a particular device, but they take time to install, use memory space and require regular updates.

The concept of responsive web design is a relatively new trend based on the concept introduced by Ethan Marcotte, a web designer and developer, who wrote the book Responsive Web Design and became famous instantly. In this book he discusses a new approach to web design which better suites the nature of the numerous devices for surfing the internet and better addresses user behaviour.

 

So what is responsive web design and what are the advantages?

 

The term "responsive web design" (RWD) refers to websites that adapt their appearance on all screen sizes, resolutions and devices (tablets, smartphones, ipods, kindles, desktop or laptop computer screens).

It is also called “adaptive web design” or “fluid web design” for optimal user experience.

Advantages of responsive web design are:

  • Optimal user experience on all kinds devices
  • Access to the internet in the same way on all kinds of devices
  • Easier navigation customized for all kinds of devices
  • Instant updates on all devices (whereas mobile Apps have to be updated separately for each device)

 

Yet how important is it to make a website adaptable for all kind of devices?

 

"The web's moved beyond the desktop, and it's not looking back. The number of devices we're designing for is growing just as quickly as mobile traffic."    Ethan Marcotte

 

Estimates by Morgan Stanley show that in 2014 the number of mobile internet users is going to surpass the number of desktop user. Meanwhile, the shift to mobile is happening at an extraordinary speed.

 

number of Mobile vs desktop internet user

Internet via smartphone and tablet experiences a meteoric rise, as Y&R Switzerland in a communication study writes: 70 percent of the Swiss in 2013 surf internet via smartphone and 31 percent use their tablet. A similar result was shown recently in the study "Media Trends" presented by the Association of Swiss Media in June.
No other country has so high percent of internet use per smartphones as Switzerland, and now almost half of Swiss households own a tablet - that's world class. 
According to MUI 2013 study, 74 percent of the Swiss surf internet via some kind of mobile device and mobile Internet use is widespread equal in both sexes.

Mobile internet user Switzerland
*Media usage in Switzerland
Source: Media Use Index 2013 research, Y&R Group Switzerland
mobilee_user_switzerland
*Media usage in Switzerland
Source: Media Use Index 2013 research, Y&R Group Switzerland


With so many people surfing the web on smart phones, tablets and other mobile devices, it is necessary to include responsive design in your internet marketing strategy.


How to achieve responsive web design?

 

Responsive Web Design is achieved with three essential components: flexible grids and layouts, scalable images and the use of media queries.

Fluid grids

The composition of the responsive page is determined by the fluid grid. As the expression implies a fluid grid is modular in order to ensure that site content is presented in a number of columns suitable to the width of the screen. Having in mind the ergonomics of each device, the contents are rearranged differently but always within the grid. It is important to specify the various dimensions fluidly in percentages or relative values (em) rather than in fixed sizes (pixel).

Flexible images and typoghraphy

The images and typography adapt to the screen size of the specific device with their size and position and the menus can switch to different dropdown formats, as opposed to the horizontal display mostly standard for desktop versions.

Media queries

Media queries are the key element for responsive web sites. They determine the screen size of the device that the site is being accessed from, recognize the device whether it is a tablet, a laptop or a smartphone, and then use CSS to show the website interface in a suitable format. Media queries use various parameters for detection of the display (type of output media, screen dimension, width/height ratio, pixel density, screen orientation, etc.).

picture responsive web design

 

Design and development approach

 

The fact that responsive web design is kind of a 3-in-1 solution (mobile+tablet+desktop/laptop) doesn’t neccessary mean it will reduce the development costs because there are many parameters to be considered. The concept phase takes much more time and effort than classic website design because the designers have to think in three different layouts and developers need to set three different pages which function as one. That is why it is very important that designers and developers work closely together from the beginning to avoid conceptional and functional mistakes.

It is recommended to begin with design of a smartphone layout with essential content and then enrich with additional details for other platforms with bigger displays. This approach is called "Mobile First".

 

The future of responsive web design

 

In the mid and long term we expect all websites to have responsive designs, as users will not accept the nuisance of being restricted to one device only. Yet before starting a new website design project, it would be advisable to research more about the cost and advantages of the adaptive design. Clients may think that the use of responsive design can substantially reduce development costs since no App development is needed, but this approach requires a lot of work. Despite becoming increasingly popular, responsive design also has its limitations. To make substantional savings using responsive design, improvements have to be made in the production process and the development of tools. 

We only touched the subject and the main issues in this article. If you want to find out more on responsive web design, here are some useful resources:

Books:

 

Online Articles: