Responsive Web Design: A Visual Guide
Tutorial Details
- Subject - Responsive Web Design
- Difficulty - Intermediate
- Format - Video
These days, “one size fits all” is quickly becoming a dated concept. Luckily, with CSS media queries, we can now easily build responsive web designs that accomodate everything from your mobile phone, up to your massive desktop!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andrew Gormley
I'm a designer and developer from the City of Brotherly Love with a focus on web standards and emerging technologies. You can read infrequent ramblings on these topics and more on my blog or follow me on Twitter.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Awesome tut! Also, it’s nice to see you following up on the comments so diligently.
Wow cool tut! Thanks Andrew I dont know about others NET.tutsplus.com users but I will start using it right now without delay.
Very useful tut. Thank You!
It took a second for it to click that you were indenting in a sass-like way, but you aren’t actually using SASS.
The amount of repetition is horrific… I forgot how arduous writing CSS was before SASS!
I just finished reading Ethan Marcotte’s Responsive Web Design book; his approach is almost the same, with one major difference: He advocates using percentage-based values for layout and typography (he actually uses about half the book to explain how to do this). If a responsive design only has a few width-based “breakpoints”, percentages would have an advantage. With 4-5 breakpoints, I’ll bet the difference would not be that great.
It will be interesting to see which best practices are adopted in responsive web design moving forward.
Great tutorial and screencast; thanks for all the hard work!
Percentages and Ems are the way to fly when doing responsive design, target ÷ context = result — FTW!
Awesome Tut!!!!!!!!! Thank you!
Great tut. Thank You!
good resource .. thank you for your effort
Nice tut. Learned a few things! Btw, if you have a smaller desktop screen and want to test for larger resolutions, then I found testsize.com to be a nice tool. Can also test it for smaller resolutions. iPad: ipadpeek.com. For mobile testing I recently started using Opera Mobile Emulator.
I’m getting some odd results with my tests. I’m using a dual monitor setup and while testing the media queries on the “main” monitor,everything works just fine width scaling the browser window etc. But when I move the browser to the secondary monitor, I’m getting orientation landscape back and the design switches to the “tablet mode”.
Windows 7 64
Chrome:
Gets orientation on secondary monitor
FF5:
Gets orientation on secondary monitor
Opera 11.5:
Gets orientation on All monitors
IE9:
Works as expected
Sample Code:
/* CSS Document */
* { margin:0px; padding:0px; }
#pc { background:red; }
@media (max-width:1280px) {
#pc { background:white; }
#pc2 { background:red; }
}
@media (max-device-width:1280px) and (orientation: landscape) {
#pc { background:white; }
#tablet_andr_ls { background:red; }
}
@media (max-device-width:1024px) and (orientation: landscape) {
#pc { background:white; }
#tablet_ipad_ls { background:red; }
}
@media (max-device-width:800px) and (orientation: portrait) {
#pc { background:white; }
#tablet_andr_pt { background:red; }
}
@media (max-device-width:768px) and (orientation: portrait) {
#pc { background:white; }
#tablet_ipad_pt { background:red; }
}
I seldom response but this is an awesome tutorial! thanks men! you rock!
Great tutorial and very informative. Thank you.
On a completely unrelated note, what colour scheme for Coda are you using?
Great tutorial. Thank you very much.
Great video! I think some industries are falling behind on the mobile side of web design. By 2014 there are going to be more mobile internet users than personal computers in homes.
Brilliant. Absolutely brilliant. Thanks a lot :)
Great web design tutorial. This will come in handy working with my new clients in utah.
Thanks for your hard work.
Great web design tutorial. This will come in handy working with my new clients in utah. Thanks for your great contribution.
Great Tutorial! Thanks for your nice work.
If the only things that change are the stylesheets that determine which elements are shown when the browser finds out what medium and which screen size the site is loaded from, then isn’t the entire page still downloaded? On a mobile phone, it would take much longer if on a slow connection.
What a brilliant tut this is! interesting and informative. Loved the fast forward rather than the copy paste seen in other examples.
I’m still quite new to this site and this is the first tut that i have watched by Andrew Gormley, and i have to say this i’m looking forward to seeing many more!
Excellent work and thank you!
Wow, great tutorial. Im definitely going to use this.
Thanks
Awesome Tutorial!!!!!!!!! Thank you! :) :)
Thanks so much for tutorial on responsive web design using the rich media css gives us… :) :). Bookmarked this page and will use it as a reference.
Great tutorial. Thank you.
excellent tutorial! very helpful as i reacquaint myself with css.
This doesn’t work when we use IE9 browser and below. We need to use javascript :
1)html5.js
2)css3-mediaqueries.js
I have a doub’t, if I use this code from a local folder it doesn’t work but if I upload on the server it works fine !
Everybody talk about Responsive Design can be restructured through media queries for the display of different devices. You have given a clear and practical approach with good examples. I liked and understood it. I need to implement next. G8 work.
I have one more query, i.e.
1) what care is required to be taken by the graphic designer?
2) When we do graphic design for mobiles, there is a lot to keep in mind for the different applications such as Android, IOS, Windows mobile, etc. So when it comes to Responsive Design implying to these models, what care is required to be taken? Please let me know the tips and instructions, if any. This is really confusing me.
Great Job on the video! I rarely comment on things — but this was extremely helpful!
Just what I was looking for. Thanks!
trying to get this example to work on IE8, not having any luck with it, there is no change as you reduce the screen size so media queries are not working for me on my local pc anyway, using Windows XP, IE8
Al
found out later that respond.js does not work for IE8 locally, you do need to use a web server.
Al
how to learn responsive design
WOW. Great Job on the video!