Responsive Web Design: A Visual Guide
videos

Responsive Web Design: A Visual Guide

Tutorial Details
  • Difficulty - Intermediate

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!

Press the HD button for a clearer picture.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Tags: CSSVideos
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Zach

    Awesome tut! Also, it’s nice to see you following up on the comments so diligently.

  • Ivan

    Wow cool tut! Thanks Andrew I dont know about others NET.tutsplus.com users but I will start using it right now without delay.

  • http://nunoquelhas.com Nuno

    Very useful tut. Thank You!

  • http://jayphen.com/twitter Jayphen

    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!

  • http://www.2sidesdesignstudio.com Rob Jones

    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!

    • http://contempographicdesign.com Chris Robinson

      Percentages and Ems are the way to fly when doing responsive design, target ÷ context = result — FTW!

  • Chris

    Awesome Tut!!!!!!!!! Thank you!

  • http://www.trendyshowcase.com/ Ejaz Ahmed

    Great tut. Thank You!

  • http://simacom.de/webdesign تصميم مواقع

    good resource .. thank you for your effort

  • Kars

    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.

  • http://www.computerman.gr/ Petsoukos

    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; }
    }

  • http://audemar.codegenetics.net monkeynote

    I seldom response but this is an awesome tutorial! thanks men! you rock!

  • http://xandesigns.com Alex McCabe

    Great tutorial and very informative. Thank you.

    On a completely unrelated note, what colour scheme for Coda are you using?

  • Rinaldi

    Great tutorial. Thank you very much.

  • http://shineonlinemarketing.com Steve Datson

    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.

  • Blake Gilbertson

    Brilliant. Absolutely brilliant. Thanks a lot :)

  • http://petersenwest.com jbourne

    Great web design tutorial. This will come in handy working with my new clients in utah.

    Thanks for your hard work.

  • http://petersenwest.com jbourne

    Great web design tutorial. This will come in handy working with my new clients in utah. Thanks for your great contribution.

  • http://petersenwest.com Petersenwest

    Great Tutorial! Thanks for your nice work.

  • Will

    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.

  • Steve Wild

    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!

  • http://www.kreativeking.com Clemente – Kreative

    Wow, great tutorial. Im definitely going to use this.

    Thanks

  • http://josephbuarao.com Joseph Buarao

    Awesome Tutorial!!!!!!!!! Thank you! :) :)

  • http://codelabgh.com Joe Twumasi

    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.

  • http://eiwen.net Gerd

    Great tutorial. Thank you.

  • M. Holcombe

    excellent tutorial! very helpful as i reacquaint myself with css.

  • Adam Streak

    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 !

  • suresh

    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.

  • Nick

    Great Job on the video! I rarely comment on things — but this was extremely helpful!

  • http://scottmazariegos.com Scott

    Just what I was looking for. Thanks!

  • al

    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

    • Al

      found out later that respond.js does not work for IE8 locally, you do need to use a web server.

      Al

  • vinay

    how to learn responsive design

  • http://www.lemaire-immobilien.de Lemaire

    WOW. Great Job on the video!

  • http://blog.andreas-kamleiter.de AKamleiter

    Great tutorial. Thanks a lot.
    Can you tell me the name of the IDE oder editor you user?

  • Jason

    Awesome tutorial, while i prefer percentages and ems this would be a great place to start for anyone unfamiliar with media queries.

  • http://antik.web.id Agung Wiseso

    Responsive design is more popular since tablet / smpartphone release. Great tuts. Thanks

  • http://www.pricklypearmedia.com/ Angelos

    AWESOME video! Really really helped me kick-start onto the responsive scene.

  • Jose Luis

    Wow, this is great and powerful tutorial,
    Now I understand the css media queries !
    Thanks for share !

  • http://derek1906.site50.net/ Derek

    Awesome sauce!

  • Bharath

    Great Stuff.

    I like the way you showcased. Great Concept in very ease and simple way.

    Thanks and Keep posting.

    - Bharath

  • http://12snaps.com 12snaps.com

    Massive! THX!

  • http://12snaps.com 12snaps.com

    Massive! Thxx for explain !

  • http://rothenborg.com Jens

    What an amazing tut. Thank you so much for your kindness. Everything is explained in a crystal clear way, very easy to follow, and very useful information!

  • Mittul Chauhan

    Blesses from india ..

    A really Magnificant video ..

    Nice understanding step by step …

    I m really started to enjoying the tuts here .. great work guys .. go on .. god bless

  • http://7learn.com Loghman

    i cant download the source . whats the problem ?

  • Behzad Shabani

    what we should do for older browser, specially IE 8 and older?

  • Bounasser Abdelwahab

    amazing visual guide thanks a lot

  • http://www.ladsrack.com/ Mens Underwear

    brilliant

  • http://www.facebook.com/rodneialbuquerqueribeiro Rodnei Albuquerque Ribeiro

    Very nice tutorial, Andrew! Thanks for help.

  • woony

    excellent tut thx

  • WiWeb

    Excellent Tutorial! Thanks a lot.