9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Wednesday, December 12, 2012

Responsive Web Design using CSS3

Smartphone revolution brings new features to the web development, it is time to change your website design into a responsive design instead of maintaining a separate mobile version . Responsive design will automatically adjust itself based on the screen size of the media devices. This post explain you how to use CSS 3 @media property and working with Internet Explorer using Modernizr.

Responsive Web Design using CSS3


Download Script
     Live Demo

Try live demo with different screen resolutions.

Step 1
Web layout divided into three horizontal parts are Hearder, Main and Footer. Here Header div divided into  two horizontal parts such as Logo and Nav and the same way Main div divided into Article and Sidebar.

HTML Code
<div id="header">
1 Header

<div id="logo">logo</div>
<div id="nav">links</div>
</div>

<div id="main">
2 Main

<div id="article">article</div>
<div id="sidebar">sidebar</div>
</div>

<div id="footer">
3 Footer
</div>


Wireframe
Responsive Web Design using CSS3

CSS
*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

Step 2
Now working with an unorder list <ul> tag.
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
....
....
</ul>
</div>

Responsive Web Design using CSS3

CSS
ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

Step 3 - @media 768px
Working with screen media resolution minimum width at 768px

Wireframe @media 768px
Responsive Web Design using CSS3

CSS @media 768px
@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

Step 4 - @media 1140px
Working with screen media resolution minimum width at 1140px

Wireframe @media 1140px
Responsive Web Design using CSS3

CSS @media 1140px
@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}

}

Step 5 - @media 480px
Working with Nav bar list media resolution minimum width at 480px. This is applicable for screen media resolution higher than 480px.
Responsive Web Design using CSS3

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}

Modernizr
Modernizr is a JavaScript library that detects the availability of native implementations for next-generation Web Technologies. These technologies are new features that stem from the ongoing HTML5 and CSS3 specifications.
Responsive Web Design using CSS3

HTML Code
For implementing lower version browser like Internet Explorer 7 and 8, you just include modernizr.min.js after style sheet inside header tag. download link.
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>

<div id="header">

<div id="logo">Logo</div>
<div id="nav">

<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>

</div>

</div>

<div id="main">
<div id="article">Content Here</div>
<div id="sidebar">sidebar</div>
</div>

<div id="footer">
Footer
</div>

<body>
</html>

Now this code works fine with Internet Explorer lower version.

Note: Modernizer doesn't support inline CSS.

style.css
Final CSS

*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}

@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}

}

Note: Modernizer doesn't support inline CSS.
Comments
{ 65 comments }
Chiranjeev Kumar said...

Hi Srinivas,
Thanks for this tutorial. I was looking for such a tutorial.. for my new responsive template.

Dennisbot said...

good work guy, your awesome!!! ,sharing!

Anonymous said...

Hello Srinivas. Is there a reason why you wouldn't use "Twitter Bootstrap" for this instead of coding yourself? Maybe "Twitter Bootstrap" is too much "over-head"? But, it sure makes it easy.

Muhammad Andik Cahyono said...

Thanks you,...
nice post (^_^)d

vayowebdesign said...

cool!!!

ThaiWebDevelopment said...

nice i love it. thank you.

ThaiWebDevelopment said...

love it. thank you.

Git Too said...

Thank brother

Jacobo López said...

Cool post

Santosh kumar said...

thanks but this is not work in google chrome why

Anonymous said...

Hi,

You would not use sidebar if in HTML5 but more something like aside tag.

ABDUL said...

I am loving It

Benson Shaji said...

Thanks buddy, This article is cool and definitely I will try to implement it on my website..

Adding on to the third Anonymous comment, Can't we use twitter's bootstrap to boost up the site into responsive mode?

Arslan said...

very nice Srinivas but I have question which new thing in CSS3?? this code same like CSS

Anonymous said...

great

Sathish K said...

Superb Post

johan said...

Its nice and all with responsive but this isent any breaking news. And also you could spend a little more time fomatting the css and html with indentation and comments.

Dito Argiatama said...

I decide to copy Kumar's comment

Hi Srinivas,
Thanks for this tutorial. I was looking for such a tutorial.. for my new responsive template.

Anil Kumar Panigrahi said...

Thanks cool post ...

LOLBits.Com said...

Hi,Nicely explained . I think below 300px the top nav menu should be a dropdown , it will be useful ..

hima javvadhi said...

Hi Srinivas

You make me Run my Engine :) Very NICE

Anonymous said...

Hi,

thank you very much.

Mukesh Dak said...

Thanks

Mukesh Dak said...

Thanks a lot for so much explanation

Pedro Javier Abril Chautá said...

very nice post brother

wanafans said...

Hello Srinivas,

Very awsome. I tested on Firefox and on Google Chrome and it's working 100% (by the way, this also for: Santosh kumar).

Very useful and helpful codes. Thank you!

Anonymous said...

nice

Nick Johnson said...

Nice, explanatory blog.....
I like the way the author presented the article....

Mark said...

Nice!!!

Anonymous said...

wow.. nice,, srinivas..

Anonymous said...

You forgot the best part of Modernizer.
The Javascript object Modernizer.x to check for browser capability.

For instance;
Modernizer.canvas ? "apply canvas" : "fallback when canvas not available" ;

Mohmmed said...

Hey there's something with me here ain't right , i downloaded your simple file i changed the name of the modernizr file in the head's src to see if there's any change will happened , the page still function the same so what's the trick here it's still working wither there's a responsive framework or doesn't , i deleted all the cashing from my browser if you gonna suggest that as a reason !!!

Ajay Chakradhar said...

thnq bro...ur post is awesome

Karen Ramirez said...

This article is good! Thanks for this!

Terry Hale said...

The codes are working really well. This really helped me out.

Akshay Bhende said...

I had a query the code for Modernizr ie hack only works if the code is running live on server is there any way u can run it on local machine. Media query's not working for ie7, ie8 on local? is there a way to run it...

Srinivas Tamada said...

@Mohmmed

Check with lower version browsers like IE7 and IE8

Vivek Moyal said...

Really a great tutorial over response css. thank you

Alexander said...

Very good article ;)

Manish said...

Very nice. Today responsive design has become so necessary.

rahul said...

good tutorial, thanks for sharing

sam Jasper said...

good work

galoo.com said...

fantastic tutorial! finally, some practical info that we can test

Anonymous said...

What about the following scenarios.
1. We have images in the page.
2. We have images in a modal popup.
3. What if we are accessing the website from old mobile phone have opera or other legacy browsers.

Anonymous said...

Good vry good post

hareesh arava said...

Thanks For Nice post.I'm using Bootstrap,Zurb Foundation, this time i can go through your Style.

redzone1117 said...

Youre the best, chief. Keep up the good work

Srinivas said...

Very useful one.

Asim said...

good post

Anonymous said...

awesome job buddy.

Andrzej Błądek said...

bardzo fajny tutorial :)

Aqib Shahzad said...

Hi Srinivas,
Thanks for this tutorial. I was looking for such a tutorial.. for my new responsive template.

kuldeep singh said...

good job buddy!!!!!

Nikhil Bhivgade said...

nice article

thanks...

Admin said...

Excelent tutorial!! tkanks.

Ramesh N said...

very easy to understand. Nice tutorial.Thanks.

aginanjarm said...

Hi srinivas,
what kind of application do you use to draw wireframe? thats look cool :D

Siva Sakthi Velan Raja Gopal said...

Hi Bro..
Very Useful and easy to understand the responsive web design.. Thanks bro..

ShaNi Ax said...

bundle of thanks very nice artical <3

ronak goda said...

good one...

Anonymous said...

cool =)

WEB DESIGN said...

Awesome tutorial. It really helps me a lot. Thanks for the sharing.

NaviOz said...

Awesome tutorial dude! Thanks

Monika said...

Another great article.. This is really a step by step guide for responsive web design CSS. Thanks a lot.

Logoonlinepros said...

Thanks you so much for this beautifully described tutorial!!

Post a Comment