Responsive web design

Responsive Website Design ^ What, Why And How

Many people come to me with requirements that mention responsive design but are not sure what it means exactly.

They ask for it usually having heard someone say that it's important. Here's the lowdown on Responsive Website Design - What, Why & How.

WHAT is Responsive Web Design?

Responsive design means a web design that caters to all kinds of screen sizes. When you say a website has a responsive design, it means the design adapts to the screen resolution of the device it is viewed on.

To see it in action, try viewing our website on different devices. Some other good examples are

- Mashable

- Mailchimp

Such a design uses CSS3 media queries, an extension of the @media rule along with flexible proportion-based grids & fluid images.

WHY is it Popular/Important?

The reason to worry about what your site looks like on mobile devices, is that when you view a website on a mobile device, let's say a phone, the phone screen zooms out to fit the entire site width to its own width.

This poses a problem because, then the contents of the webpage are not readable.

To actually read, you need to first zoom in to the correct percentage manually, and then keep on panning to continue reading. More often than not, you get lost at such a high zoom level and can't find what you want on the page.

To fix this, earlier when the percentage of mobile users worldwide was not as high as it is today, it was a standard practice to create a proper, pretty & advanced webdesign for the desktop website and then create a pretty much dull simple interface for mobile users. This interface had little design elements, if any and was basically a plain text boring version of the actual site.

However, today we have the technology to make websites look pretty much the same, with all kind of design elements - on desktops, laptops, tablets, tabs, phones or any other mobile device you can think of. This is achieved through building responsive web design.

Responsive design is where your website's total width and also the width of each of the elements in the design is flexible and adjusts based on the device's maximum width, thereby making the website's total width fit perfectly on the screen so that the page is easily readable.

They're calling year 2013, the year of responsive design. That's because with so many people using their phones & tabs and other mobile devices to browse the net, they demand that the websites they visit be just as easily accessible on devices other than desktops. Today, anyone who's hoping to get a lot of website visitors on various kinds of devices MUST go for a responsive design.

HOW It Works

Responsive design works by building the site using flexible grids that have widths in percentage values and then changing these values on the fly based on the device screen. This is done by declaring media screen CSS styles to control widths of specific elements and/or hiding/showing certain elements.

For example, if we wanted to target mobile devices, our media query might look something like the following:

@media screen and (min-width: 480px) { #contnt {max-width:100%; clear:both; float:none;} .social-box {display:none} } // and so on... }

To make all images have a flexible width, we would use the following query:

img {max-width:100%}

The property max-width:100% basically scales the element to the device's maximum width. And of course, the magic that makes it all work: Declaring the Meta viewport in your html header, e.g.

I hope this post helps you learn the basics of What Responsive Design is. If you have any questions, please add them in comments below.