Make Responsive Design Quickly

Jump To:

Introduction
Meta tag
HTML Structure
Media Queries

Objective

Main objective of this blog post to give you an idea about Responsive Design.

Step 1 Introduction

Responsive design is not a big issue now. If you are still not familiar with the word “responsive”, then open a website and resize your browser. The website will automatically fit as per the browser size. That’s called responsive website.

It can give best view in Mobiles & Tablets. So, responsive design is used to display website as per the screen size. Let’s take a look on how it can be achieved.

Step 2 Meta tag

The Mostly mobile browser scale HTML pages to the wide view port width so it can fit on the screen. The viewport Meta tag is used to achieve this. Following viewport tag tells the browser to use the device width and disable the initial scale.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Some old browsers like IE8 doesn’t support media query. For that you can use media-query.js or respond.js to support media query in IE.

<!-- [if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Step 3 HTML Structure

In the following example, I take a basic page layout with a Header, Footer, Content and Sidebar. I am giving a fix height to header i.e. 180px; content panel is 600px wide and sidebar is 300px wide.

Step 4 Media Queries

We can make the responsive design using CSS3 media query. Following rules will affect viewport having width 980px or less. We should always take widths in percentage instead of pixel so that it will remain fluid.

/*For 980px of less*/
@media screen and (max-width:980px)
{
#pagewrap{
width:94%;
}
#content{
width:65%;
}
#sidebar{
width:30%;
}
}

Now, for 700px viewport or less, specify the #content and #sidebar to auto width and remove the float so that it can display as full width.

/*For700px of less*/
@media screen and (max-width:700px)
{
#content{
width:auto;
float:none;
}
#sidebar{
width:auto;
float:none;
}
}

For 480px or less (same as mobile screen), set the header height to auto and change the font size to 24px.

/*For700px of less*/
@media screen and (max-width:700px)
{
#header{
height:auto;
}
h1{
font-size:24px;
}
#sidebar{
display:none;
}
}

You can write any media query as you like. In this media query you can apply many CSS properties as per your requirement. You can also use "min-width" instead of "max-width". The media queries can be in the same "stylesheet" or in a separate file.

I hope you find this blog very helpful while working with responsive web design. Let me know in comment if you have any questions. I will reply you ASAP.

Got an Idea of Responsive Web Development? What are you still waiting for? Contact us now and see the Idea live soon. Our company has been named as one of the best Responsive Web Development Company in India.

Created on : 09 February 2015