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.

structure

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.

image

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.

image

For 480px or less (mobile screen), reset the #header height to auto, change the h1 font size to 24px and hide the #sidebar.

image

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.

211 Comments

Marlou
Dec 8, 2011 at 11:10 am

Finally, a simple tutorial with an understandable example. Thanks!

Web design Wolverhampton
Dec 8, 2011 at 11:10 am

Thanks for the tutorial and demo. Web designers ignore mobile devices at their peril!

Amit
Dec 8, 2011 at 11:30 am

Awesome tutorial! I love reading more about responsive design and hopefully people use it for a purpose because with great responsiveness, comes great responsibility. LOL

Dessign
Dec 8, 2011 at 12:01 pm

Awesome tutorial, nice and simple right to the point, Its basic enough for everyone to understand and give great points,

Marios

Razlan Hanafiah
Dec 8, 2011 at 12:36 pm

Thanks for the simple and clear example! :)

Damian Andrews
Dec 8, 2011 at 1:38 pm

Thanks so much for a great introduction to this subject. It’s definitely whet my appetite for more! Top job.

michel
Dec 8, 2011 at 2:06 pm

Simple and short… really cool tutorial to explain others this magic feature! thanks

artfanvikram
Dec 8, 2011 at 3:54 pm

Though small article, it helped me lot to get started with great feature of css, thankyou for your effort to share.

gerçek vajina
Dec 8, 2011 at 5:18 pm

Başar öğretici! Büyük bir tepki ile, büyük sorumluluk getirir, çünkü ben daha duyarlı tasarım ve umarım insanlar bir amaç için kullanmak hakkında okuma seviyorum. LOL

Renzo
Dec 8, 2011 at 7:12 pm

I will use these tips in my next client site.

Patrick
Dec 8, 2011 at 9:23 pm

I did search around and asking my friends, but none of them explain well. Thanks for sharing, simple explanation + good demo = great article.

Jacksonville Website Design
Dec 8, 2011 at 11:38 pm

good tutorial, thanks for sharing.

Kc Rajput
Dec 9, 2011 at 12:12 am

Simply best to understand responsive design. thanks

BMPlus
Dec 9, 2011 at 2:25 am

Great article with demo! :) Thank you for sharing this.

hallodom
Dec 9, 2011 at 4:16 am

Really like this tutorial. Assuming the sidebar has navigation in it would that be better coming above the content?

Kai
Dec 9, 2011 at 4:26 am

Nice tutorial. Thank you

Adeniyi Moses Adetola
Dec 9, 2011 at 9:51 am

Very interesting explained in easy terms. My site just got refreshed to be more responsive.

Agreeboy
Dec 9, 2011 at 10:30 am

I Agree!

Craig
Dec 10, 2011 at 4:26 am

Sounds too easy. I am about to start to do my first site with media queries. Thanks for the tute.

Web Design Malaysia
Dec 11, 2011 at 12:52 am

Thanks for this! Embarking on project soon that requires responsive designs. Should be compatible with handhelds, phones etc.

Tim
Dec 11, 2011 at 6:06 pm

Thanks for a great, easy to follow tutorial! Can’t wait to give it a shot!

Hompimpa
Dec 12, 2011 at 3:55 am

Hmm .. I’ve read all the inspiring responsive web design tutorial posts in your blog and I think this is just a summary of them all T_T

Wouter J
Dec 14, 2011 at 2:00 am

I totally agree with that.

The last time I see 2 types of posts:
– Freebies
– Responsive Webdesign

Can you write posts about other topics the next time? I’ve heard enough about this posts on webdesignerwall…

ways to say i love you
Dec 12, 2011 at 5:05 am

i’m not a programmer i just knew wordpress but this helps me a lot. kudus to a great tutorial

Marc Haunschild
Dec 12, 2011 at 6:18 am

Two things I’d like to add: NEVER EVER hide parts of the site without a hint for the user, how to get them back and always provide an EASY way to switch to the desktop version, so users find the things, where they are used to find them (e. g. search or hidden areas).
Never forget: Most modern mobile devices have really good zooming features, which make webpages with a complex layout easy to use and to read!
I know, my own blog uses responsive design, which I use out of the box, so m own site is not a good example, because my own site is always the last to be updated, but nevertheless it should not be this way. Responsive design CAN make the user experience much worse for quite a lot of people!
So you should know your readers and whether they want it or not…
And support the minority as well!

Alex
Dec 13, 2011 at 6:40 pm

@marchaunschild

dude… chill. The UX can only be ruined by the designer, not responsive web design.

Good tut.

Adam Baird
Dec 15, 2011 at 10:07 am

You can’t really make blanket statements about responsive design and consistent user experience.

Its important to know YOUR users and how they are using your website on different devices. You need to adjust their experience accordingly.

buy arena carry
Dec 12, 2011 at 2:02 pm

nice coding sharing help me a lot

TheDave
Dec 12, 2011 at 3:29 pm

Why would you care about having <= IE8 support media queries?
And enable it with javascript?

That seems like a complete waste of time / effort / resources.

If a user is using an browser <= IE8, 98%+ chance they are on a desktop computer system, with a resolution that will handle your max design width (~980px).
Why not just make that the default width for items then, and then add in the media queries to shrink the size as needed?

What am I missing here?

Where are the stats supporting the need for <=IE8 browsers running at lower resolutions that would even benefit from media queries?

Stuart Robson
Dec 13, 2011 at 11:02 am

Don’t we also need img { max-width: 100% }?

Junior
Dec 13, 2011 at 2:24 pm

I don’t like your page header… I fixed one is better… at the rest, very clever content! Cheers

TutorialFeed
Dec 14, 2011 at 7:52 am

First I would say it is ultimate post. This is very useful for beginners who never know how to structure html. You have explained it in very simple steps I am really delighted. Your effort highly appreciated. Thanks a ton!!!

Johnny
Dec 14, 2011 at 10:00 am

Heh, very to the point. Great post. :)

Alex
Dec 14, 2011 at 1:13 pm

Thanks for your great tutorials on responsive web design. I am very interested in this topic, however I am at a bit of a heads with it:

So far, I actually DISLIKE it when I’m browsing the web on my iPhone and a site that I’m used to on my desktop actually appears different on the iPhone. I mean, the safari web browser enables me to look at any site with pinch-zoom functionality, double-tap to focus on a text column, double-tap out – and I actually prefer doing this to seeing a site all simplified for the 320px width.

Take ents24-com as an example. On the main web site there is a prominent search box where you search for events by category on a day in a town. On the mobile version, it is totally different and less intuitive, you have to set your location etc and the layout is different so I find myself going back to the main site or not using it at all.

I’ve not seen many articles on this… Really, why would an iPhone user want sites dumbed-down for mobile, when the browser handles it fine ( as long as it is tweeked to display correctly )…

Sam
Dec 16, 2011 at 3:54 am

I’m just attempting to read this article on my phone, I think one of these tips is actually making it more difficult: Every time I try to zoom in to see an image, the viewport resizes back to how it was..

Mike Evan
Dec 16, 2011 at 10:51 am

hate that IE usually needs some special treatment, no matter how simple is design, there will still be compatibility problems and each new version comes out the more problems it brings.
But thanks for simple tips!

MisterArcher
Dec 16, 2011 at 2:20 pm

Fascinating writeup. not sure why haters gotta hate. but lots of great nuggets of wisdom here. Thanks for sharing.

teguh
Dec 18, 2011 at 2:17 am

Thanks for this perfect basic tutorial

Tony
Dec 18, 2011 at 3:37 pm

Really useful tutorial, thanks!

Jon
Dec 19, 2011 at 12:48 pm

Useful, well summarized, thank you.

Sid Vel
Dec 20, 2011 at 11:21 am

Been testing various responsive grids. Loving it!

wiz
Dec 20, 2011 at 11:41 am

simple explain, but meaningful,
thanks for share

seven
Dec 20, 2011 at 12:51 pm

Nice posting. Thanks for featuring and explaining this :)

Jim
Dec 21, 2011 at 2:23 am

Good explanation mate, keep using those images with written notes on them, they are great!

Chris
Dec 21, 2011 at 5:52 am

Great explanation, this is great.

Salini rokya
Dec 22, 2011 at 12:04 am

Training for Web Design, HTML5, CSS3, jQuery,SEO and Blogging
99% Practical Training in.. Chandigarh

more:
webtechlearning.com

Jose
Dec 22, 2011 at 10:54 am

Awesome explanation. This is what makes bloggers like you so crucial to our web development endeavors. Thanks!

Keith Davis
Dec 24, 2011 at 8:17 am

Responsive design is all the rage now.
I use a Genesis child theme and the guys over at Studiopress are really getting into it.

Nice to have a crystal clear explanation.

jimmy bell
Dec 25, 2011 at 4:43 am

nowadays! wp is powerful blogging platform, is it also need these type of optimization?

Chandrru
Dec 26, 2011 at 1:21 pm

really its ourstanding tips, really helpfull with this article, expecting more from this topic..

Pozycjonowanie stron bielsko
Dec 26, 2011 at 4:57 pm

Great explanation, i must try this in my project.
Article really helpfull and usefull, well done!

snaphy
Dec 27, 2011 at 9:10 am

thank you.. this tuts really helpful..

Debbs Hosting
Dec 29, 2011 at 5:53 am

I’ve been browsing the web for design basics. i must say, i’ve got some really great sites this included! Thanks for the tips man, you don’t know how much greens your saving me. Hope for more in the future.

Wade
Dec 30, 2011 at 1:30 am

Awesome thank you for posting

Andrea Ballerino
Dec 30, 2011 at 5:43 am

Thank you….very useful tutorial.

Spanish Villa
Dec 31, 2011 at 7:19 am

There must be a better solution rather than having to re-write all CSS on every website?

Don’t mobile and pad browsers have auto-scaling anyway?

Ben Sheedy
Jan 3, 2012 at 10:25 pm

That’s the beauty of media-queries. You can have base CSS that handles the elements to be consistent across all the platforms. (fonts, colours etc)

And, then target the elements that have to change to better suit that size (such as alter the layout, maybe increase overall font-size).

Saves building a separate mobile version of the site.

Swami Prakashanand Saraswati
Jan 3, 2012 at 1:50 am

Yeah..! This actually helps us in creating responsive designs. Thanks for your concern.

Andre Morris
Jan 3, 2012 at 11:30 pm

This article is right on time for a client that is having problems with multiple devices and their existing website. Time for an upgrade!

Julia Agnes
Jan 6, 2012 at 9:25 am

Hello! Responsive web design is a trend of 2011. Will it be a trend of 2012?

Mohsin Nazir
Jan 6, 2012 at 11:25 am

layout in design is necessary

PrinterPrinting
Jan 8, 2012 at 2:29 pm

Great article! Thanks for the advice, greatly appreciated!

web designers directory
Jan 9, 2012 at 12:12 am

Really interesting article, thanks for posting

Chandu
Jan 9, 2012 at 4:35 am

Yup good explanation, thanks

kataskeyh istoselidwn
Jan 9, 2012 at 2:20 pm

hehe, i do not usually follow template designs, feels like they are a limit on my mind:)

edgar
Jan 10, 2012 at 2:38 am

Thanks, the viewport metatag helped me…

website design
Jan 10, 2012 at 12:16 pm

hey, helpful blog .. good work

WPTidBits
Jan 11, 2012 at 10:28 am

Thanks a lot. Your tutorial made me redesigned my site to a responsive layout. Very useful and easy steps to follow for beginners. Do write more tutorials like this. Thanks!

Website Design Malaysia
Jan 13, 2012 at 4:27 am

Thanks for the really great tutorial! Great guide.

Web Design Warwick
Jan 13, 2012 at 8:40 am

Great introduction to the subject – looks like more and more sites will be designed this way so its good to get an understanding.

web design new York
Jan 14, 2012 at 9:08 am

hi this is very good article for new web designers that will help more for newbies… we also web design company,, good blog keep on posting..

Web Designer Salerno
Jan 15, 2012 at 4:32 pm

Thanks for this interesting tutorial.

Dustin
Jan 17, 2012 at 12:06 am

This saved my life! :) B)

référencement grenoble
Jan 17, 2012 at 3:13 am

thx, this article is helpful. for mobile devices, you can also try jquery mobile, it’s great and you don’t have to choose a specific format. have a look on the website !

hyvaa
Jan 18, 2012 at 3:28 am

Great Tut. Thx :)

Glenn
Jan 18, 2012 at 9:48 pm

Good info regarding the responsive design. There isn’t to much info available on the web regarding responsive design so I am glad to stumble upon this!

Vincent.Zhao
Jan 19, 2012 at 12:43 am

Thanks for your nice tutorials!

Could you please tell me what tools do you use to write blog articles?
Windows Live Writer?
Thanks in advanced.

raybak
Jan 19, 2012 at 2:13 pm

nice little tutorial for web beginners.. thanks for this..

Joe
Jan 19, 2012 at 7:43 pm

Nice to read your tutorial on responsive design and media queries, give me a big picture on how implement it in my redesign website. Thanks…

Damian
Jan 20, 2012 at 2:26 am

Putting it into action

Innovative Web Provider
Jan 20, 2012 at 7:35 am

This is very helpful for since I am still a newbie on web design. I’m gonna try this and practice. Thank you so much!

Web designing in chennai
Jan 20, 2012 at 2:33 pm

recommended to my friends :)

Myles Kedrowski
Jan 20, 2012 at 3:04 pm

Great post. Over the past few weeks we’ve really been perfecting our responsive design and development skills. Came across this article while searching Google for tips and tricks. Thanks for sharing!

ccccccccc
Jan 22, 2012 at 11:17 pm

pepe

shreejaya
Jan 23, 2012 at 1:43 am

This 3 rules useful to end user

Thanks for sharing with us

sdfs
Jan 24, 2012 at 3:41 am

fsdsdfsdfsd

Taufik Nurrohman
Jan 28, 2012 at 1:56 am

abcde…

David
Jan 26, 2012 at 3:43 pm

This is exactly what I was looking for, and very concisely written. Thanks!

Jay Jalaram Extrusions
Jan 27, 2012 at 5:22 am

I have to still implement this on my website, but I am under research on whether to make the css unnecessary lengthy by including the css styles of all type of devices (all major 3-4 types) or make 1 general css and add addition for responsive styles and call based on devices. As these are two tricks used in recent trend.
Any suggestion?
If reply back.

Glen Wheeler
Jan 27, 2012 at 7:59 am

How did you come up with these values? and Why max width 980 if the page wrapper is only 960?

@media screen and (max-width: 980px) {

#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}

}

thanks,
Glen

Taufik Nurrohman
Jan 28, 2012 at 1:55 am

That’s usually used to ensure that the side room is not too narrow.

GraphicDesigner
Jan 28, 2012 at 3:34 am

#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}

}

Exactly what I did today LOL

Bob

M.H.Awan
Jan 30, 2012 at 3:35 am

Awesome one.Blogger Tricks.

Attitude Design | Graphic Design Portfolio
Jan 30, 2012 at 11:22 am

Many thanks for this tutorial!

vettivong
Jan 30, 2012 at 1:11 pm

Awesome clarification. this can be what makes bloggers such as you thus crucial to our internet development endeavors. Thanks!

Ben Clarke
Jan 31, 2012 at 4:37 am

I have only recently been getting in to responsive web design and im looking at using it on my new portfolio site im currently in the process of building (Work+Girlfriend seem to get in the way of this though :D)

Sara Stollings
Feb 1, 2012 at 10:15 am

Responsive web design is very important to my company and I, especially in this day and age. People are accessing websites on their phones more and more and instead of practically creating a whole new site, responsive design allows you to go from big monitors down to iPads and smart phones.

Check out my companies website for another example of responsive web design! http://www.cemahcreative.com – Web Development, Design & Consultation.

Elke Hinze
Feb 1, 2012 at 11:11 am

I first heard about Responsive Web Design when I saw Ethan Marcotte speak at the Future of Web Design 2010 conference in NYC.

It immediately made perfect sense to me and I have started to implement it in nearly all my projects.

Why build multiple designs to suit different resolutions and devices when you can do it one time?

Thanks for the article.

kamran
Feb 2, 2012 at 6:02 am

thanx, this is exact which i want about design

Kristina
Feb 3, 2012 at 1:47 pm

Thanks for this article and sharing your knowledge! Helps with understanding Responsive Design and getting it to work properly!

Ken
Feb 5, 2012 at 5:57 am

Nice introduction. It’s a great thing to learn responsive design. There’s foresight and can really help a business cater well to the market who aren’t anymore restricted by a stationary desktop.

SEOrisk
Feb 5, 2012 at 3:04 pm

Thanks for the easy-to-read tutorial. I was able to get it installed right away on my site.

My question for you is: how important is it to support browsers less than IE9? Aren’t we primarily talking about mobile browsing when we use responsive design? Are there many (any) smart phones running IE7, for example?

Thanks again!

Oliver
Feb 6, 2012 at 7:12 am

Thank you for this great tutorial.

24SevnLibrarian
Feb 6, 2012 at 1:47 pm

I work in a public school and am responsible for the school website. Right now I am using a template, buT i am experimenting with other designs on my own in the hopes of replacing it with something more user-friendly and fitting for our school. In the meantime, everything is switching to HTML5 and CSS3, but my district isn’t there yet. How do I adapt to responsive design using ASP and older CSS?

maxOman
Feb 6, 2012 at 4:36 pm

You could try javascript’s innerHeight/innerWidth properties to get the window size.

maxOman
Feb 6, 2012 at 4:33 pm

Thanks for the post…
We used to do stuff like that with Javascript long before CSS3

Tường Thọ
Feb 6, 2012 at 9:20 pm

Nice post, thank you very much because that post, I will learn it when design my site^^

assasas
Feb 7, 2012 at 12:19 am

qwerty

David
Feb 7, 2012 at 10:19 am

Hi!
I have a question… If my page is visited by some resolution, could be 1280×1024, the browser loads the content made for the other screen resoutions (1024×720 – 144×900 -1366×768 etc ?? the thing is that my website loads different size images depending of the screen resolution, and would be bad thing if loads everything… thank you

Waco Webdesign
Feb 7, 2012 at 12:25 pm

Thx that after some Google I found this. Just what I was looking for. Thx a lot

Roseville Web Design
Feb 9, 2012 at 6:47 am

The functions you showed up in your blog clarifies better designing, with all this we all need the designing more keen.

Cambridge Designs
Feb 13, 2012 at 10:08 am

great stuff guys …. Just tweeted about this, Thank you

FX Web Design Perth
Feb 20, 2012 at 8:19 pm

Great information, thank you!

Web Design Melbourne
Feb 22, 2012 at 4:08 am

Thanx a lot!
After a long time I got some good stuff to read, especially that ‘Media Queries’ part that clearly shows the flow of the design.

Tony
Feb 22, 2012 at 9:03 am

Thx a lot!

TJ
Feb 27, 2012 at 3:16 pm

This is a great introduction tutorial.

Responsive Design is definitely becoming the standard in web design. More and more people want their websites to be easily viewable on a variety of devices including computers, tablets and mobile devices. Traditional websites with fixed widths are limited in their capabilities, but responsive websites can resize and adjust based on the size of the users screen. Responsive web design isn’t necessarily new thinking, but it’s definitely becoming more popular in modern web design.

If you’re interested in checking out responsive website examples, head on over to http://www.gottaloveresponsivedesign.com. It has a lot of great examples of websites using responsive design.

Myron
Feb 27, 2012 at 6:38 pm

Your responsive theme works really well. How did you hide just the ads in the sidebar? Is it by using two sidebars one below the other and hiding the one with the ads on it?

Ron Richardson
Feb 27, 2012 at 7:23 pm

Thanks for the simple tut! I’m curious how you would handle navigation/menu wrapping?

Steffen Daleng
Feb 29, 2012 at 7:10 pm

Very good tut. Thanks alot.

Romi
Mar 2, 2012 at 3:10 am

Very nice tutorial. It helped me to make a base to do responsive design.

Thanks !!

Life Insurance for Diabetics
Mar 5, 2012 at 4:29 am

This is great thanks!! :)

online sticker printing
Mar 5, 2012 at 5:37 am

This is a great introduction tutorial. Thx that after some Google I found this.

Mario
Mar 6, 2012 at 4:12 am

Can you do a tutorial on how to hide the header and footer from a page in a responsive theme? I want to keep it fluid still I know how to create a standard page where I can do that but not with responsive themes.

Jeff Kee
Mar 7, 2012 at 4:45 pm

Using responsive scale designs on my new business site – I’m using the Skeleton CSS grid as a base, which saved me a lot of time! And the framework code is clean & easy to understand, and so far it looks great on iPads & iPhones, as well as Blackberries.

Tobias Wagner
Mar 9, 2012 at 5:46 am

Sweet post! Short and clear to understand the basic concept of responsive design. Thank you.

wall321
Mar 9, 2012 at 7:09 am

Using responsive scale designs on my new business site – I’m using the Skeleton CSS grid as a base, which saved me a lot of time! And the framework code is clean & easy to understand, and so far it looks great on iPads & iPhones, as well as Blackberries. Desktop Wallpaper, HD Wallpaper, Wallpaper Background
Desktop Wallpaper

Texas Web Developers
Mar 10, 2012 at 12:33 am

I am a starter and this is surely going to be of great use to me. Thank you for the worthy sharing and waiting for such other articles!

wall321
Mar 10, 2012 at 6:53 am

Thanks for the simple tut! I’m curious how you would handle navigation/menu wrapping Desktop Wallpaper, HD Wallpaper, Wallpaper Background
Desktop Wallpaper

yani
Mar 13, 2012 at 11:43 pm

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

only a comment
Mar 17, 2012 at 10:37 am

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

Only A Response
Apr 21, 2012 at 12:55 pm

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.

Escort Website Design
Mar 17, 2012 at 7:15 pm

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.

Stein
Mar 21, 2012 at 4:07 am

thanks for the tutorial dude!

Jinho
Mar 22, 2012 at 3:26 am

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,

backpain
Mar 23, 2012 at 4:21 am

Nice blog! Thanks for sharing valueable information.

Nicolas
Mar 26, 2012 at 6:27 am

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.

Fatih
Mar 28, 2012 at 2:36 pm

Useful information.i will translate Turkish and post my blog with source link.best arcelik servisi.

DiegoQ
Mar 29, 2012 at 6:35 pm

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…

v
Mar 30, 2012 at 7:36 am

is media query work with only html5?

Gustavs Jurisons
Apr 3, 2012 at 3:55 am

Simple yet very informative tutorial for those who are new to responsive web design . Thanks for sharing and keep ’em coming! :)

Robert
Apr 25, 2012 at 10:20 pm

Thank you! The auto formatting from the phone was giving me issues. The meta data did the trick!

css gallery submit
Apr 27, 2012 at 8:21 am

Amazing article, but my site is adaptive, its not a great view in less resolutions, i spoke with designer now working on responsive

Web Design Hampshire
Apr 30, 2012 at 5:00 am

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!

magazin
Apr 30, 2012 at 12:54 pm

This does look like a great theme.

Abhishek
May 1, 2012 at 6:48 am

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 .

Arjun Rk
May 1, 2012 at 11:38 pm

This is informative, thank you

Christine
May 2, 2012 at 10:58 pm

Great tutorial! Thank for this!

Praveen
May 4, 2012 at 8:22 am

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

Praveen
May 4, 2012 at 8:34 am

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*/}

Vic Dinovici
May 10, 2012 at 9:27 pm

there is no need to use media-queries.js or respond.js. There is no mobile using IE8 or older.

Daniel
May 14, 2012 at 2:40 am

It has use if you’re developing mobile first and have defined media queries for larger resolutions.

Shay Grantham
Jun 7, 2012 at 12:28 am

Please clarify: Do you mean you set @media screen and (max-width: 980px) { … } but the default css is less than 480px?

rooeto
May 14, 2012 at 1:03 pm

was made​​. :) Thanks.

Arjun Rk
May 16, 2012 at 3:26 am

This is awesome thanks

Kristen
May 22, 2012 at 9:39 am

Just what I was looking for! Thank you! This makes responsive design a lot easier to understand.

Looking forward to trying this out

Ray
May 25, 2012 at 4:34 pm

Great article! Excited to get started

TrufflesForACause
May 27, 2012 at 7:41 am

This is a greet article. I am really appreciated. You have informed useful plan to visitor. Thanks for sharing with us.

Social Network
May 27, 2012 at 1:30 pm

Like this post!

Michael Persson
May 29, 2012 at 6:32 am

This is not really new. I made mobile websites for clients also back in 2005. By then nobody had mobile phones with internet connections. Now is the time for mobile device design or as you say “Responsive Design” in order to deliver the content you want at any device based upon the screen size… Maybe not a correct way to select what each user wish to experience but its maybe a good start… and we have to rethink the way we publish information to different people….

Thanks

Thiết kế lô gô
Jun 3, 2012 at 10:39 pm

Great post… isn’t that funny though that this very website is not responsive? Viewed on a 1024×768 screen, you gotta scroll horizontally :-/

cheerfulface
Jun 4, 2012 at 8:13 pm

Not true. This website is responsive. Which browser were you using? :p

Colin
Aug 1, 2012 at 8:52 am

Probably IE8 or worse. Why people continue to use IE at all is beyond me.

Slimhuren
Jun 14, 2012 at 4:56 am

Great information, thank you!

Rich
Jun 20, 2012 at 12:18 pm

…thanks for this! I’m learning this new technique of site building and this is great as a novice designer! I know that peoples posts can’t always be interpreted in the correct context of the writer but some people with more knowledge on this subject seem to be quite rude? Everyone’s entitled to their opinion but maybe just thankful that someone has taken the time to post a tutorial to help those less fortunate than those with more knowledge or education on the matter! Cheers!

Graham Miller
Jun 21, 2012 at 3:39 pm

I think http://www.responsivegridsystem.com is worth a look if you’re new to Responsive Design.

Vishal Bansal
Jul 9, 2012 at 6:04 am

Hi

i have a website which is compatible with ifone but not with other smarts fone like samsung galaxy y (Android Base).

Any one help me with this issue.

Thnx Alot

Gil
Jul 13, 2012 at 9:41 am

Awesome tutorial. Really covers the basic of creating a responsive website. Thanks alot!

yebos
Jul 18, 2012 at 10:09 pm

Thanks alot!

adeel
Jul 19, 2012 at 6:36 am

Can i convert my html css website into responsive design by using above codes please let me know ASAP?

Prasad Sambari
Jul 19, 2012 at 10:54 am

This is a greet article!. Thanks alot for sharings this article.

igneta
Jul 20, 2012 at 4:24 am

interesting. Thanks

Bhausaheb Zaware
Jul 23, 2012 at 6:45 am

This is nice artical… thanks!

idui
Jul 28, 2012 at 2:05 am

You know what. This article is straight forward than what smashing mag and others offer. This is what i wanted. Thanks a lot. Others talk about history of mobile and all other crap which develoeps and designers arent just intereted in . Thanks heaps for the great tut on responsive web design

Nichive
Aug 4, 2012 at 1:49 am

If I may say, responsive web design aren’t totally dedicated for mobile browser (especially those older type of phones). But it does handle different screen width in a neat way. Say no more to those scroll bars, for sure :)

Web Design
Aug 6, 2012 at 4:07 pm

I ‘ve just finished my first responsive site. Thank you for the information, especially for the viewport meta tag.

Automotive Management Service
Aug 9, 2012 at 2:27 am

My site how can i help me in indexing again in bing..

Abdus Samad
Aug 11, 2012 at 2:59 am

Awesome tutorial, helps me a lot to understand the technique. Hats off to you.

John DePasquale
Aug 14, 2012 at 4:21 pm

Very well written article. You are right… this is easier than I though now that you explained the basics.

Agustín
Aug 19, 2012 at 8:52 pm

Can you share the css file of the demo pleaseee? thank you!

Big Mac
Aug 29, 2012 at 11:38 pm

Wow (noob), you don’t know what you’re asking.

prash
Sep 3, 2012 at 7:13 am

LOL….
What an innocent question…
LOLssssss

BaLanZe
Sep 24, 2012 at 11:16 pm

Noob if you ask for the css file of this demo it is very ease you just have to open the demo in your browser and click on “see source code” that is implemented on any browser and you will be able to see all the code. The css in this case is on the same html file between the tags. Hope I helped. By the way, very good article for people like me who is learning.

seo
Aug 20, 2012 at 3:24 pm

This is nice artical… thanks!

Prapti
Aug 30, 2012 at 7:38 am

Very Nice article
and very useful
Thanks!

Alquiler yates Ibiza
Sep 3, 2012 at 10:41 am

Very well written article. You are right… this is easier than I though now that you.

TinLe
Sep 4, 2012 at 8:14 am

Thanks, so helpful. I saved a lots time to setup my app

Sara
Sep 5, 2012 at 10:10 am

Thank you so much for the info. and for the example code. Great, informative post!

jobin
Sep 10, 2012 at 3:29 am

Thanks, so helpful. I saved a lots time .Very well written article. You are right… this is easier when u described in small steps….

Casey
Sep 15, 2012 at 7:32 pm

I love this tutorial! It has been incredibly helpful in designing my website. I am fairly new to web design and am having some difficulties using this design template and having it work in IE and Firefox. Safari works great…

Any help would be appreciated!

Casey
Sep 15, 2012 at 7:39 pm

Ok, I think I may have found a problem and would appreciate help with a fix:

I included the script for media-queries.js, but I have my css as a linked stylesheet. Apparently that doesn’t work? Do I need to do all of my css styling inside the html file? Is there a solution to access the media queries on my linked css file for i.e. and firefox??

Javier
Sep 27, 2012 at 3:01 pm

Thank you very much!!!! I was going crazy trying to figure out how to have my site to look great no matter where it was display!!!

Club Silver
Oct 11, 2012 at 9:39 am

An excellent and concise explanation of the use of media queries in responsive design!

Cyprus Web Design
Oct 11, 2012 at 1:29 pm

Thanks for the source, scratching my head all day trying to remember the tag. :)

Arun
Nov 19, 2012 at 7:32 am

Simple and good..

anmol
Nov 27, 2012 at 6:43 am

Nice and easy, but please give me more simple css rules.

anmol
Nov 27, 2012 at 6:46 am

Sir, you show HTML Structure and css but i think you forgot css trick for header portion actually i can’t understand which area support #pagewrape its header or whole body part i mean like container.

anmol
Nov 27, 2012 at 6:50 am

I make header part for my experiment and in this part i used left side logo and right side menu but i can’t create i used this css:
.maindiv{width:980px; margin:0 auto;}

@media screen and(max-width:980px){

#pagewrape{width:100%; overflow:hidden;}
.logodiv{float:left; width:40%; text-align:left; padding:10px 0 0 0;}
.menudiv {float:right; width:60%; text-align:right;}

}

and my html :

Logodiv
dd : aa

Please tell me where i am wrong way?

Thank you

Anup
Nov 27, 2012 at 12:54 pm

Perfect post for starter. Can you please suggest some framework which are supporting responsive design?

Harsh
Dec 6, 2012 at 4:24 am

Really very nice and easy tutorial for basic understanding, my search ends here for understanding the basic for responsive website.. Thanks for sharing.. Thanks a lot.

Admin
Jan 31, 2013 at 6:27 am

thanks for this tutorial it means a lot for me

Manaqib
Feb 1, 2013 at 3:17 am

hanks for this tutorial. really helpful

Marvin
Feb 2, 2013 at 4:35 am

Thank man. Really helpful.

Brian
May 8, 2013 at 10:09 pm

Hi,

Great tutorial. It’s great to see what could be a very daunting boiled down into such a simple tutorial.

I have one problem though. I tested this tutorial out on a simple “under-construction” page I needed to update. It worked perfectly, and when I narrowed the width of the browser window on my laptop it reformatted as it should have.

However, when I tried to view the page on my iPhone (iPhone 4 running iOS 6.1.3), the error message, “Safari cannot download this file”. Do you know of any common problems that may cause this?

Again, I love the tutorial. I’ve bookmarked this page for future reference.

Thanks,

Brian.

Afzal
May 27, 2013 at 11:45 am

You have describe responsive designs in such a nice way or in a kind of series..

Snow & Ice Clearance
Jun 1, 2013 at 6:29 am

Hello !
I am impressed with this technique of using meta tag. This is nice way for getting responsive design in just 3 steps.
Thanks.
Snow & Ice Clearance

Harry Pulau Tidung
Jun 4, 2013 at 6:44 pm

Very useful tutorial
Thaks alot

Sangita Chakraborty
Jun 5, 2013 at 12:42 am

You have describe responsive designs in very simple way,this is really helpful..

Cynthia Lewis
Dec 14, 2016 at 6:51 am

Nice tip for making responsive design.

Sasa Gojic
Dec 19, 2016 at 7:01 am

Thanks, this is really useful.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.