How to create Responsive Web Design

0
599

Now a days Responsive web design is most important and necessary thing in websites. You see today mostly all websites has responsive design. The purpose of responsive design is to make your website flexible in all devices. It makes your website like an mobile app.

Now I am going to show you basic development of responsive design. To newbies it seems like an difficult but actually it is very easy to do. In this post I give very basic steps so I hope you can understand it easily. Before continue reading you must know HTML and CSS because it is full of HTML and CSS only.

Step 1:

In first step you have to add viewport meta tag to reset the device width. The viewport tag changes the device width as viewport width and disables the initial scale. You should include this meta tag in section.

In responsive design you are going to use media queries but Internet Explorer 8 and older version does not support media queries. So you should use media-queries.js to make IE8 support media queries.

 

Step 2:

In second step you should create your HTML page. Here I give you basic html page with header, content area, sidebar and footer. See the demo of this html page without responsive.

html structure

 

CSS File:

Step 3:

In third step you should use media queries to make the above html page with responsive design. You can write different set of media queries with different width.

Here I am using three media queries which is given below,

DOWNLOAD

Now see the demo of above html page with Responsive design (Resize your browser to view responsive design). There are many responsive website testing tool available in online you can use it to check your website.

These media queries help to apply different CSS to give different layout for specified device width. You can place this media queries in same stylesheet or can create another stylesheet.

In this way you can create responsive design using different media queries. Finally you learned how to create responsive web design and if you find this post useful don’t forget to share.

LEAVE A REPLY