How To Create Responsive Web Design?

What is Responsive Design?

Every class of device offers a different browsing experience. How can we provide website visitors with a polished experience regardless of the device they’re using? One solution is to essentially offer two websites; one for “mobile” visitors, and another for traditional computer users. But that just takes us from “one size fits all” to “one size fits a few”.

Responsive/Adaptive Design (broadly called Responsive Design for short), is an alternative. It’s a set of techniques for designing and developing websites that respond to a wide variety of browser resolutions, made possible by modern CSS3 and HTML5 technologies.

A note about Relative Sizing

We will employ a simple technique of shrinking the body type as the browser width decreases. Since the font size is declared in ems and thus everything is relative to the body, this has the result of cascading down to the other elements and shrinking them, too. It’s nice and simple and looks something like this:

body {
font:1em/1.5em 'Verdana', 'Arial', sans-serif;
}
@media screen and (max-width:800px) {
body {
font-size:0.8em;
}
}
@media screen and (max-width:400px) {
body {
font-size:0.7em;
}
}

In our example code above, the media queries kick in at 800px (reducing the type down to 0.8em) and at 400px (reducing the type even further to 0.7em). To see that in action, have a look at demo 1 and resize your browser window.

Adding the transitions

The code for initiating the transitions is extremely simple, and is only this long because of the vendor prefixes:

body {
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

Once that code is added, you’ll see that the resizing happens smoothly (over 0.2 seconds) instead of jumping suddenly. For proof, check out demo 2 .

Lets do it for Images

You can add a transition to virtually any element you want (although be aware of how resource-intensive this might be), and applying one to images results in an even more obvious effect as the image grows and shrinks. To try it out, I’ve added an img tag into my markup and amended the CSS as you’d expect:

body {
font:1em/1.5em 'Verdana', 'Arial', sans-serif;
}
img {
width:400px;
}
@media screen and (max-width:800px) {
body {
font-size:0.8em;
}
img {
width:300px;
}
}
@media screen and (max-width:400px) {
body {
font-size:0.7em;
}
img {
width:200px;
}
}
body, img {
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

You can see the final thing in action by visiting demo 3 and watching how both the type and image grow and shrink as you re-size your browser window.

Caution

As with anything that relies on relatively new, still-in-flux technology, be sure to exercise caution if you decide to put this into practice. Browser support is not universal (and behaviour is still inconsistent, even when supported), and as I mentioned above, applying transitions to multiple elements can be a little resource-intensive. I’d be wary of putting this into practice on larger sites with more elements to contend with.

File this under ‘ UI effects that are essentially rather useless but add a nice little touch if anybody happens to notice them ’.

Media Queries for Standard Devices

Here are some standard screen resolutions for widely used standard devices. You can consider them while targeting the different screen resolutions of devices like Smartphone (Portrait and Landscape mode), iPads, iPhone 4, desktops, laptops, larger screens, etc.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
/* Styles */
}