Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I've put together a quick tutorial. I promise you can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge).
Step 1. Meta Tag (view demo)
Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Step 2. HTML Structure
In this example, I have a basic page layout with a header, content container, sidebar, and a footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide.
Step 3. Media Queries
CSS3 media query is the trick for responsive design. It is like writing if conditions to tell the browser how to render the page for specified viewport width.
The following set of rules will be in effect if the viewport width is 980px or less. Basically, I set all the container width from pixel value to percentage value so the containers will become fluid.
Then for viewport 700px or less, specify the #content and #sidebar to auto width and remove the float so they will display as full width.
For 480px or less (mobile screen), reset the #header height to auto, change the h1 font size to 24px and hide the #sidebar.
You can write as many media query as you like. I've only shown 3 media queries in my demo. The purpose of the media queries is to apply different CSS rules to achieve different layouts for specified viewport width. The media queries can be in the same stylesheet or in a separate file.
Conclusion
This tutorial is intended to show you the basics of responsive design. If you want more in-depth tutorial, check out my previous tutorial: Responsive Design With Media Queries.
This is a fantastic tutorial, thank you. One question, is it possible to have the pagewrap off center? I’m trying to use this but with the pagewrap div more to the left of the page.
Thanks again
testing this form
this instructions are confusing, 94% of 980 what is that? couldn’t you use standard screen sites, also couldn’t the same elements be used with percentages
94% of any max-width, is the total content width of a full-width page with 3 columns, where each column has 1% padding (i assume this could also, instead, be margin). It doesn’t really matter what the actual px number is… it’s about fluid space. It’s about retaining as similar-as-possible a look, regardless of screen resolution.
Also, 980 x .94= 921.2=total width of all “content” in a width, while preserving a minimum spacing of 1% on each side of each of 3 adjacent content sections.
1%| A |1% 1%| B |1% 1%| C |1%
1%| A |2%| B |2%| C |1%
A+B+C=94%
You could also say that “94%” is a single column (or div with nested columns inside), with 3% padding on each side.
3%|__94%__|3%
ALTHOUGH:
I see that in the aforementioned example, the total of the widths of the #content and #sidebar exceeds the width of #pagewrap by 1%, which tricked me at first, but…
Inside #pagewrap, you have 5% of #pagewrap’s width, worth of paddable/marginable space, and outside it you have 6% of the width of the screen.
According to my calculations, assuming no other elements occupying horizontal space, that leaves you with almost 11% of your total screen width, usable as padding or “whitespace.”
Seems like a good number, to me.
Anyway… i thought the whole point of “responsive” design was to create fluidity and display adaptability, as simply as possible, while retaining all functionality.
The point of “responsive” is lost when you start “coding” for specific conditions. It’s supposed to be responsive and adapt to any screen size, and never look like crap between “standard” or “predictable” resolutions.
Fluidity, simplicity, accessibility and function are key, here.
Very well described. I wasn’t familiar with CSS3 media query – now I am. I’m only now getting into web design at a level that I guess one would describe as “beyond basic.” Recently I’ve worked on an escort design site for escort web design.
thanks for the tutorial dude!
Hi, your tutorial is so simple and easy to understand. I translated part of your tutorial in Korean and posted on my blog. I haven’t published it in public. Let me know if I can use your tutorial on my blog.
I left your page link for credit. :)
Thanks,
I’m now not certain where you are getting your information, however great topic. I needs to spend a while learning more or understanding more. Thank you for wonderful information I was in search of this information for my mission.
Nice blog! Thanks for sharing valueable information.
Very nice. Thanks. < IE 9 rule and viewport tags are very valuable.
I think that media queries are simple by themselves, but the most difficult is being able to think a design that can easily fit to lower resolutions ( or higher ). The main problem is here and the mindset is quite much to be changed or adapted to this new particular problematic.
Thanks for sharing that.
Useful information.i will translate Turkish and post my blog with source link.best arcelik servisi.
Very usefull, but the point is: if the user has a little screen phone we load a whole assets, the big images for example; it´ll takes an strong part of the battery´s energy; no matter if the Css hiddes the big images…
So, I just was thinking…
is media query work with only html5?
Simple yet very informative tutorial for those who are new to responsive web design . Thanks for sharing and keep ‘em coming! :)
Thank you! The auto formatting from the phone was giving me issues. The meta data did the trick!
Amazing article, but my site is adaptive, its not a great view in less resolutions, i spoke with designer now working on responsive
Thanks, looking into doing a responsive website for my new site, and wasn’t 100%., ive been using viewport for ages didnt realise it was that easy to set styles based on width!
This does look like a great theme.
Hi ! friends sunglasses are really an mandatory objects these days. It not only enhance your look but sometime your overall personality. So do not wait come to gkboptical.com and buy online your spectacle .
This is informative, thank you
Great tutorial! Thank for this!
Nice Tutorial!
However, isn’t responsive design a bit more than this – In step 2 your HTML structure has fixed width elements so how is it responsive? Say the users viewport is subject to resize then wouldn’t your layout be non-responsive?
Being responsive tends to define element properties like width, height, gutter and padding to be in percentages of the available view-port isn’t it? Also this includes for the type elements too
by resize I meant on larger screens where res is greater than 1024×768.
The layout will stay fixed at 900px wide which is not an optimal size to start with. However, setting the container’s width as a percentage could solve this – like so .container { width = 93.75%; /*900/960 = 0.9375*/}