Responsive Design

Hi,

Recently I came across a client request for a responsive website. Here is a small tutorial how you can achieve it.


Firstly, what is responsive design? It is basically a technique of web designing where the layout, design or content of the website adjusts itself based on the device from which it is being viewed. The device can be mobile phone, iPad or laptop.

The basic idea is very simple. When a webpage is opened in a device, the change that a web page goes through, as far as design is concerned, is the width of the browser. Responsive design allows designers to define different styles for different widths. That way the css changes dynamically based on the browser width, hence making it device independent.

Download Demo: responsive_design.zip
(Open the demo1.html in any browser and reduce the width of the browser to see the effect)


Following are 3 snapshots of the same page in different devices:

For Laptop/Desktop (Assumed width: 1500px):

For smaller devices such as iPad (Assumed width: 1000px):

For even smaller devices such as mobile phones (Assumed width: 600px):

Explanation:

The main trick is plain and simple. You just need to create three different styles for three different width. The width that I have assumed above, can be changed. It was just for my convenience. To achieve this we use the media query.

for example:
@media screen and (max-width:1000px){
    #.........................................................
    #....your css if screen width is 1000px
    #........................................................
}

@media screen and (max-width:600px){
    #........................................................

    #....your css if screen width is 600px
    #........................................................
}

This is all that you need to do to achieve the above. You can add 'n' number of widths to your webpage.

I am not a designer and this is what I have understood in around 30 minutes, so this is very raw. This is a very basic level example. You can make this concept as crazy as you want. For example, in smaller width you can change the menu to a dropdown, change the site logo based on size and so on.

Download: responsive_design.zip

Hope this helps!!!