On February 2, 2012 In Coding with , , tags

Responsive design wire frame using media queries

Today we started redesigning mobifreaks. As part of it we want it to be responsive. You all know, we do something at mobifreaks and their user won’t get any freebie that’s nearly impossible. So, let‘s build a responsive design using media queries together.

responsive design wire frame

First of all, what are media queries. Media queries are set of conditions, which are used to style html elements based on media type, screen size, orientation, resolution, width, height, aspect ratio etc,.
HTML 4 and css 2 supports media queries, which means almost any browser would support them. It also works in high end mobile browsers too. Until now we all know, how to tailor css for print and screen. Something like if an h1 have 2em for screen we can redefine 1 em for print. In the same way we can create multiple style sheets for multiple media types.

<link rel=”stylesheet” href=”screen.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print”>

Now, let’s think of the above procedure. It works great but it sends two http requests. Can we reduce them to one, I say yes with usage of media queries it is possible.

Just add whole styling for print in print media query and all screen styling in screen media query.

@media screen{
    h1{
        font-size:2em;
    }
}
@media print{
    h1{
        font-size:1em;
    }
}

How it works

@media media-type{
	/* styling for the condition */
}

Now, we know how to define a different style using media queries. To build a responsive design, we are going to use media type, max width and min width.

Before that we should know about screen types for which we are going make the template responsive. In our case we making responsive design for 7 screen sizes, screen widths are 1280px, 1024px, 800px, 640px, 480px, 320px and 220px.640px is for both old monitors and IPhone 4. 480px, 320px and 220px are for other mobile devices. The 1024px and 800px will work for normal size monitors and iPod both landscape and patriot. By default, we will be making simple html document with header, content, sidebar and footer with a wrapping around it. The code will look something like this.

<!DOCTYPE HTML>
<html>
	<head>
        <meta charset="UTF-8" />
    	<title>Title of the page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1"/>
        <link rel="stylesheet" href="style.css" type="text/css" media="all">
    </head>
    <body>
    	<div class="wrap">
            <header>header
            </header>
            <div class="content">
            	<div class="col1">content
                </div>
            	<div class="col2">sidebar
                </div>
                <div class="clear"></div>
            </div>
            <footer>footer
            </footer>
        </div>
    </body>
</html>

Basic css for the above markup would be.

body{
	margin:0;
	padding:0;
	color:#000;
	background:#1d1d1d;
}
.clear{	clear:both; }/* clear's float from both side */
.wrap{
	width:1200px; /* required */
	padding:40px;
	background:#fff;
	margin:0 auto;
}
.wrap,
header,
footer,
.col1,
.col2{
	/* for smooth animated effect */
	transition:all .2s linear;
	-moz-transition:all .2s linear;/* firefox */
	-webkit-transition:all .2s linear; /* safari and chrome */
	-o-transition:all .2s linear; /* opera */
	-ms-transition:all .2s linear;
}
header,
footer{
	height:150px; /* fixed just for demo */
}
header{
	margin:0 0 40px 0;
}
footer{
	margin:40px 0 0 0;
}
header,
footer,
.col1,
.col2{
	/* play with this styling or just remove it */
	background:#b1eaff;
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
	-o-border-radius:.5em;
	-khtml-border-radius:.5em;
	border-radius:.5em;
	padding:10px;
}
.col1{
	width:820px; /* required */
}
.col2{
	width:300px; /* required */
	margin:0 0 0 40px;	/* change the margins if you have 
changed float:left to float:right */
}
.col1,
.col2{
	float:left; /* reverse the polarity, if you want your sidebar 
on left make it float:right [don't forget to reverse the margins to0]*/
	height:500px;
}

After seeing the above css. you may have noticed that height was fixed to header, col1, col2 and footer.It is a bad practice to fix height for the content which has scope to grow, so we fixed just for the demo.

.Before showing css code for the media queries, we should know about max-width and min-width. Max-width means maximum width of the screen or window. Min-width means minimum width of the screen or window.

@media media-type and (condition){
/* styling for the condition */
}

On the above code and is used to add two conditions, which means the styling in the media query will work only when both conditions are satisfied.Now let see a basic example

Think we are styling a layout only when the maximum size of the screen is 1024px.

@media all and (max-width:1024px){
    body{
        background:#2d2d2d;
        color:#aaa;
    }
}

In the same way we will create responsive design template using width and padding for 7 screen sizes

@media all and (max-width:1280px) and (min-width:1024px){
	.wrap{
		width:984px;
		padding:20px;
	}
	header{
		margin:0 0 20px 0;
	}
	footer{
		margin:20px 0 0 0;
	}
	.col1{
		width:624px;
	}
	.col2{
		width:300px;
		margin:0 0 0 20px;
	}
}

The above styling will only be applied, when the media type is All and screen size between 1280px and 1024px.

@media all and (max-width:1024px) and (min-width:800px){
	.wrap{
		width:760px;
		padding:20px;
	}
	header{
		margin:0 0 20px 0;
	}
	footer{
		margin:20px 0 0 0;
	}
	.col1{
		width:400px;
	}
	.col2{
		width:300px;
		margin:0 0 0 20px;
	}
}

The above styling will only be applied, when the media type is All and screen size between 1024px and 800px.

@media all and (max-width:800px) and (min-width:640px){
	.wrap{
		width:600px;
		padding:20px;
	}
	header{
		margin:0 0 20px 0;
	}
	footer{
		margin:20px 0 0 0;
	}
	.col1,
	.col2{
		width:580px;
		float:inherit;
		margin:0 0 20px 0;
	}
}

The above styling will only be applied, when the media type is All and screen size between 800px and 640px.

@media all and (max-width:640px) and (min-width:480px){
	.wrap{
		width:440px;
		padding:20px;
	}
	header{
		margin:0 0 20px 0;
	}
	footer{
		margin:0;
	}
	.col1,
	.col2{
		width:420px;
		float:inherit;
		margin:0 0 20px 0;
	}
}

The above styling will only be applied, when the media type is All and screen size between 640px and 480px.

@media all and (max-width:480px) and (min-width:320px){
	.wrap{
		width:300px;
		padding:10px;
	}
	header{
		margin:0 0 10px 0;
	}
	footer{
		margin:0;
	}
	.col1,
	.col2{
		width:280px;
		float:inherit;
		margin:0 0 10px 0;
	}
}

The above styling will only be applied, when the media type is All and screen size between 480px and 320px.

@media all and (max-width:320px) and (min-width:220px){
	.wrap{
		width:200px;
		padding:10px;
	}
	header{
		margin:0 0 10px 0;
	}
	footer{
		margin:0;
	}
	.col1,
	.col2{
		width:180px;
		float:inherit;
		margin:0 0 10px 0;
	}
}

The above styling will only be applied, when the media type is All and screen size between 320px and 220px.

Its time to give, whole set.