A introduction to Responsive design techniques

The world is going mobile, more and more people and moving away from desktop in favour for smartphones and tablets when it comes to browsing the web. Various studies show that the mobile usage of the web will be higher than from the desktop within the next 2 to 5 years. A recent study, showed that in the last nine months (July 2012) ecommerce traffic from mobile has doubled.

Until very recently, you would only design your website with HTML and CSS only for desktop, not caring too much, how the website would look and interact on mobile devices. However, this has now all changed and greater focus must be on mobile users.

Why do we need responsive web design?

The old-fashioned approach would be to create one version of the website for mobile users and one version for desktop users. However, this brings many problems, as nowadays there are many different mobile devices, from basic mobiles, smartphones (which have much larger screens), and tablets in various sizes. Not to mention they all run on various OS platforms.

This is where Responsive Design comes in. This is relatively new approach to constructing a website. It moves away from rigid, static & pixel based grids to fluid, adaptive and percentage based grids, which adapt and change depending on the device screen properties, like width of the device or aspect ratio of the screen. This means you just need to build one website but with many device types in mind and your websites layout can adapt to the different screen sizes, aspect ratio etc. This is all possible and very easy to do using @media-query extension that was created as a part of CSS3 by W3C. This extension allows your website to detect various device screen information and load or modify the CSS rules to match, for the best viewing experience.

How do you create a response website?

To do so we can add following media-query rule into our CSS:

@media screen and (max-device-width: 300px) {
.header {
display: none;
}
}

To start we need to explain the query above contains two components:

1. Media type it refers to (in this case it’s screen)

and

2. The query itself which describes the media feature we want to inspect (in this case its maximum device width) and the value it should match (300px)

So basically CSS code above will only be applied if we are viewing it on screen (so it’s not i.e. for print) and the screen resolution is not higher than 300px. This way we can adjust what is displayed on the screen depending on the physical characteristics of the device.

We also can use media queries at the time we link CSS file with the html:

<link rel="stylesheet" type="text/css" media="screen and 
(max-device-width: 300px)" href="mobile.css" />

Also it can be used as a part of the @import rule:

@import url("mobile.css") screen and (max-device-width: 300px);

All those three ways will do the exactly same thing which is to load extra CSS rules if certain device screen criteria’s are matched. So we look at media queries as for conditional statements to load extra CSS rules or modify existing ones.

Of course maximum device width is not the only parameter of the device we could inspect. Actually W3C @media-query specification provides a number of various features we test the device against:

Device width & height: so we can inspect exact dimensions or minimum and maximum ones (device-width, max-device-width, min-device-width, device-height, max-device- height, max-device- height)

Orientation: so we can check if devices is viewed in portrait or landscape:

@media screen and (orientation: portrait) { … }

@media screen and (orientation: landscape) { … }

Aspect ratio:

@media screen and (device-aspect-ratio: 16/9) { … }

Number of bits per colour of the output device:
```
@media screen and (min-color: 2) { … }
```
(in the example above the query will only apply with devices at least 2 bits for each colour component)
Resolution which gives information about density of pixels on the device:
```
@media print and (min-resolution: 300dpi) { … }
```

Moreover you can test multiple properties as above in one single media query giving your very powerful and precise tool, i.e.:

@media screen and (max-device-width: 300px) and (orientation: landscape) {
 .header { 
display: none;
}
}

The last thing to mention is the support of this feature across various browsers. As would expect it’s natively supported by modern browsers (FF 3.5+, Safari 3+, Chrome, Opera 9.5+, IE9+) and mobile based browsers on Webkit engine & OperaMobile. However if you would like to use responsive design based on media queries on older browsers (including IE6 & IE7) then you can use 3rd party javascript libraries like css3-mediaqueries.js which promise to apply media queries to older browsers including IE5+, FF1+ and Safari 2.

Blog