Responsive Web Design: A Visual Guide
videos

Responsive Web Design: A Visual Guide

on May 27th 2011 with 153 comments
Tutorial Details
  • Difficulty - Intermediate
Download Source Files

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
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

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.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://bit.ly/cLZXGi Julian

    Nice! Couldn’t come at a better time as I’m looking to expand into the mobile arena.

  • http://www.stevendavisphoto.com Steven Davis

    Very nice video. Thanks :)

  • Anthony

    Hey Andrew,

    Thanks for a great tutorial. Media queries is something I’ve had on my ever expanding ‘to do’ list for a while now.

    This tutorial is very easy to follow and really shows the importance of using media queries. I’m excited to give them a go!

    With that said, I’m going to take a look at my own website right now and see about adding some.

    Thanks again!

    • http://andrewgormley.com Andrew
      Author

      I’ve been meaning to do a screencast on this for a while and I figured I might as well strike while the iron’s hot. Glad you found it helpful!

  • http://www.almoste.com Bhawan Virk

    Thanks for this visual guide

  • Dieter

    I really like this tutorial. I believe that smartphone surfing will become more and more important in the future. So I’m going to have to make a habit of using these media queries.
    Thank you Andrew

    • http://andrewgormley.com Andrew
      Author

      Thanks! Using phones or tablets to view websites is already becoming the norm, so that’s why it’s so important to keep on top of these great new technologies that make our lives easier. Hope it helps you create some kick-ass sites.

  • Richard Feliciano

    FUCKING AWESOME! or like we used to say in Brazil “DUCARALHO!!!”

    • http://andrewgormley.com Andrew
      Author

      You learn something new every day. Thanks for the props, man.

  • Michael

    Awesome, will be definitly used in my next project.

  • Steven

    This is a great screencast! Very good structure, the code is explained really well and the sound and video are very clear. I’d like to see more screencasts of this author.

  • http://twitter.com/hubriz Art

    Very informative. I like the CSS Media Queries and no need to mess or created separate stylesheets for other mobile devices. Awesome tutorial!

  • Don

    This is great, thanks heaps!

  • Nelson

    Finally a tut on responsive web design!

    Thanks!

  • http://boomsite.com.au Andrew

    Media queries are great, and this is an excellent run down of what they are and how they work.

    The concern I have is making users download content which they will not see. For example, the large image of the pizza is not shown to smartphone users, but they will still download it. Coupled with the fact that mobile connections are slower the problem is worsened.

    Are you aware of any techniques to avoid making users, especially mobile users, download more than they require?

    • http://andrewgormley.com Andrew
      Author

      Hey Andrew,

      You bring up an interesting point. Your argument seems like a valid point for actually creating a separate mobile site: minimizing the amount of cellular data used to download images, CSS, etc. However, the goal here is to make the same site as accessible as possible for all users regardless of device. We very well could have kept the image in place, I simply chose to prioritize the content over imagery. I’m not sure if there’s a way to tell a mobile browser not to download images that are set to “display: none”, but I’ll certainly investigate and follow up with you.

      • http://www.worldwidelighthouses.com/ Danny

        There is no way to do this with front-end technologies (HTML, CSS, JS) as far as im aware. You’d have to do this with server side technologies such as PHP by looking at the HTTP headers and working out if a device is a mobile phone, tablet etc. Then serving a page based on that, some not including images in the HTML (perhaps for mobiles) and some that retain the images (such as for the tablet or desktop)

        You could also use on the fly image re-sizing and optimization in PHP

        Links
        http://php.net/manual/en/ref.image.php
        http://wideimage.sourceforge.net/

        :)

      • Pat

        Nice screencast!

        The debate has been raging for a while now whether media queries are the answer to everything mobile. The simple answer is they aren’t but in combination with other techniques you can create efficient mobile sites.

        This article is a good read to give you a bit of perspective on the debate… http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ …It brings up the point raised about downloading unwanted images.
        Some browsers download the images even if they are set to ‘display: none’.

  • http://newarts.at Drazen Mokic

    Very nice, love Videotuts done by talented speakers

  • http://www.themespice.nl Johan

    Wonderful tutorial. Well thought out and clear.
    And Andrew you have a clear voice, with good diction!
    A pleasure to hear you speak.

    • http://andrewgormley.com Andrew
      Author

      Thanks! I have a few more up my sleeve, so with a bit of luck you’ll be seeing more of me around these parts.

  • http://www.jamesfairhurst.co.uk James

    Very useful, been getting into the topic myself recently and posted an article on “Responsive Images”, came up with a solution using jQuery & PHP:

    http://www.jamesfairhurst.co.uk/posts/view/responsive_images_with_php_and_jquery/

  • Gigasquid

    Thanks for this tut. Unfortunately in Win XP SP3 this MP4 crashes the latest VLC media player and throws a Visual C++ Runtime assertion failure.

    It does open with Quicktime and plays ok just as long as I don’t touch the player controls.

    Very sensitive, just like me :)

  • Olivia Heller

    Thanks for this great tutorial on media queries! Clear, quick, to the point, and nice way to structure the code. Inspiring presentation, with relevant examples. Would have been good to have such a complete tutorial for some months ago, but is not too late now either.

  • http://www.wijzijnrood.nl JaapRood

    Nice screencast, good to see this topic covered like this.

    Media queries are awesome to make the same website work on different screensizes. There is however still a very good case for a seperate mobile site, especially for webapps. Think of the website of a public transport website, users at home would probably want to plan their route and buy tickets, users on the go want up to date travelling info right away. This case would benefit from a seperate mobile site to deliverr the optimal experience.

    • http://andrewgormley.com Andrew
      Author

      I totally agree with you and keeping with your example: Here in Philly we rely on Septa for public transportation, their site is http://www.septa.org. A small group of developers here decided that a mobile-optimized version of the site would be perfect for smartphone uses, especially since Septa doesn’t offer one, so they put together the awesome http://isepta.org.

      Even though the two sites aren’t affiliated, I think Septa could learn a thing or two from the guys operating iSepta.

  • Scott Mackey

    That was putting it simply, amazing! You covered a lot, explained it well and easy to understand. Think that made my top tutorial so far. Nice work and look forward to more screencasts from you Andrew.

  • http://www.lojogroup.com lojogroup

    Thanks for the CSS media queries that really helpful for the designers in video format that clarifies well. With lack of proper knowledge sometimes the contents contents cannot displayed, problem wit players or code.

  • http://www.evanoconnell.com Evan O’Connell

    Trent Walton’s most recent post is about responsiveness. Check it out http://trentwalton.com/2011/05/10/fit-to-scale/

    • http://www.andreyshipilov.ru/ Andrey Shipilov

      Is it OK that the main content which is that case — text, is even less than half of the screen? 32% to be precise.
      http://gyazo.com/6a83643368a5868c372ef34c3c2ee429.png

    • http://andrewgormley.com Andrew
      Author

      Wow, FitText is really slick. Might have to utilize that in my next design. Thanks for the link!

  • http://www.andreyshipilov.ru/ Andrey Shipilov

    Thank god I do fluid websites for almost 10 years, and certainly don’t need that.

  • http://www.jvsoftware.com Javier

    Great tutorial! I didn’t know it was that easy heh

  • http://www.thoughtresults.com Saeed Neamati

    Good quality. Just like always.
    Let’s support CSS3. Read CSS3 Multi-Column Layout Module.
    Thanks

  • Saad Salman

    I enjoyed this podcast a lot. Thanks for clear & descriptive tutorial. I have two questions though:
    1) What would happen in IE 6, 7 & 8? I don’t have windows machine to test it my self.
    2) Do Andrew Gormley has any other tutorial on best practices to follow when styling HTML5 based markup?.

    • http://andrewgormley.com Andrew
      Author

      Hey Saad,

      IE6-8 will disregard the media queries entirely, so no changes will be seen when scaling down the site. There are, however, JavaScripts that allow for the use of media queries in these older browsers, something like Adapt.js would be a great place to start: http://adapt.960.gs/

      This is my first tutorial here on Nettuts, but I’m hoping to add more as soon as I can. Thanks!

    • Pat

      For IE6-8 you could also use this javascript library http://code.google.com/p/css3-mediaqueries-js/ . With this library you don’t need to place your css in separate files like with Adapt.js, your media queries can be used as they are.

    • Ollie

      I wouldnt worry about IE, you would never view a site on a table or smartphone through IE anyway

      • Ollie

        *tablet or smarthphone

  • http://imanto.com Anto

    Thats pretty epic man, is there any chance i could download this video?

  • http://gtawebdesign.co Toronto Web Design Company

    Thanks for sharing! It amazes me how your team is able to keep publishing such wonderful articles. Hope you keep sharing more such tips.

  • http://www.visual-blade.com Daquan Wright

    What theme are you using for your text editor Andrew? I use e text editor and I wonder if I can get that. xD

    Also, beautiful tutorial. I really enjoyed seeing responsive web design in action, such a powerful technique.

    • http://andrewgormley.com Andrew
      Author

      Hey Daquan,

      I’m using Coda for Mac with Ethan Schoonover’s awesome Solarized color scheme, which can actually be used for a variety of text editors.

      And thanks! Glad you found it helpful.

  • Netphager

    COOL !

  • ben

    Excellent quality tutorial. Really professional and a great learning experience.

  • Darren

    Thanks, just what I needed to get started.
    For a while now I’ve been wanting to look into this.

    Cheers Andrew.

  • http://sjkdesign.co.uk JK

    Hi could you please tell me what coda colour scheme your using? And / or where you got it ?
    Great tut.

    Cheers

    J

  • http://www.mtoag.com/ PHP Programmer

    These guideline are really perfect. Your provide a nice and perfect Idea.
    I am impress Really its rocking info.

  • Brian Artka

    Great video Andrew. It makes complete sense, and was what I needed to jump into offering this to my clients. I’m looking forward to Ethan’s book, but your overview is a nice kickstart. The Media Queries site is a great find too.

    • http://andrewgormley.com Andrew
      Author

      I’m also excited about Ethan’s offering. Pretty much all A Book Apart books are an instant purchase. He’s definitely the pioneer of this technology and I’m sure the book will provide more of his excellent insights.

  • http://www.marvinhagemeister.de Marvin Hagemeister

    Good intro for people not familiar with media queries. One suggestion though: It would be better if font sizes are declared with percentages instead of pixels. Because if you set font-size: 100% on the body and go from there, then 100% will always be the optimal font-size for the device in question.

    • http://andrewgormley.com Andrew
      Author

      Good point. The 100% font-size declaration is part of the HTML5 Doctor Reset and not something I generally use, but in the case of a responsive design percentages seem like a pretty natural progression, especially when you get down to the last (fluid) state.

  • Potado

    Woah, I love the way you indent your css!

  • Jack

    Brilliant tut, look forward to the next one!

  • Aldo

    Thanks man!!

    excellent tutorial! I didn’t realize the video last 25 min XD

    looking forward to see more from you

  • http://enlivenlabs.com Dave McNally

    Thanks for featuring http://tileabl.es Andrew!

    • http://andrewgormley Andrew
      Author

      Thank *you* for doing such kick ass work! Count me among your fans.

  • Donna

    This is the best tutorial I’ve seen on responsive web design. Can you recommend a strategy for people who like using 960 grid systems? Is it time to give up on 960 grid systems?

    • http://andrewgormley.com Andrew
      Author

      Hey Donna,

      No need to drop your favorite grid system. 960.gs has built an add-on javascript that allows your site to scale accordingly with something similar to, but not exactly the same as, what I’ve illustrated here. Check it out: http://adapt.960.gs/

      Another option would be to check out grid systems with media queries built in like http://www.getskeleton.com, http://978.gs/demo, and my personal favorite: http://cssgrid.net

  • http://www.swastiksolutions.in Hiren Khambhayta

    Great tutorial, the latest technology comming up next.

  • http://tarnoff.info Greg Tarnoff

    How do you best address things like Retina display? Based on pixels only, an iPhone 4 would use the same CSS as your iPad in landscape or portrait, yet the CSS for the smartphone is clearly the better solution for it.

    • http://andrewgormley.com Andrew
      Author

      Hey Greg,

      There’s actually a media query specifically for the iPhone 4:

      @media (-webkit-min-device-pixel-ratio: 2) { }

      I usually save that one for last since special considerations need to be made when developing for iPhone 4 like double size images, text-shadow adjustments, etc.

  • Greg

    I’ll second Anto… is there anyway to get a copy of the video to download? Would be good to watch offline… Thanks!

  • Brian

    Eeeek. At first glance, it seemed like media queries solved world hunger, and ended poverty in one fell swoop, but upon some further investigation, they seem extremely problematic.

    Take this chart spelling out mobile browser support for media queries:
    http://www.quirksmode.org/m/css.html#t021

    It states about half the browsers listed support media queries. Specific browsers lacking support include Android G1, G2, Blackberry Mobile and IE.

    Perhaps this isn’t as bad as it sounds in the context of the market share of various browsers. Can anyone attest to this?

    • http://andrewgormley.com Andrew
      Author

      I can’t speak to the Android mobile browser landscape as a whole, but in my personal experience with friends who use Android devices they rarely ever use the built-in browser and often opt for something more robust like Dolphin or Fennec. I’m not sure what the capabilities of those browsers are, but if they’re based on recent versions of Webkit or Gecko, you should be pretty safe.

  • http://davidbecerra.com David B.

    This is excellent! Thank you for sharing. I’ve been reading up on this topic for a while and definitely need to start implementing these on my projects.

    Thank you!

  • Lukeoly

    I got so much out of this thanks. But i have one question; When you call in a separate stylesheet for say a mobile device instead of having the css in the regular stylesheet, Is there any way of completely ignoring the regular stylesheet when the media query stylesheet is used?

    • http://andrewgormley.com Andrew
      Author

      What you’re asking for would be better handled using Javascript to call in certain stylesheets as opposed to using media queries.

      However, a lot of people have been advocating a mobile-first design method. So in essence what you’d do is have your primary stylesheet created for the smallest mobile device you’re targeting and then use media queries as the device size/resolution grows. One big example of this is Andy Clarke’s 320 and Up: http://stuffandnonsense.co.uk/projects/320andup/

      Hope that helps!

  • http://robguilfoyle.com Robbie Guilfoyle

    This is truly a wonderful tutorial, having this in my arsenal may change the emblem in my garage from (FORD) to (BMW)!

  • http://www.sitegeeks.gr Web Design Greece

    As always a great video. really helpful thank you

  • http://denbuzze.com Christian Vuerings

    Andrew, thanks for this nice tutorial.

    Is there a specific reason why you didn’t add a viewport meta tag to your HTML?

    For example HTML5 boilerplate uses it:
    https://github.com/paulirish/html5-boilerplate/blob/master/index.html#L19

    • http://andrewgormley.com Andrew
      Author

      Hey Christian,

      That was just an attempt to keep the HTML side of things as simple as possible. Generally I use something like:

      When working on sites for clients, but as you can see in the screencast, forgoing it isn’t always the worst thing in the world.

    • http://andrewgormley.com Andrew
      Author

      Ugh, what was supposed to be above was the following line:

      <meta name=”viewport” content=”width=device-width”>

  • Ben

    Wow. Very lucid. Thank you.

    Stupid question: what program are you using to write code? You never identify it by name.

    I am a novice, bungling his way through Dreamweaver, and looking for something lighter and simpler.

    • http://andrewgormley.com Andrew
      Author

      Ben,

      I’m using Coda, which you can scoop up on the Mac App Store or via the developer’s website: http://panic.com/transmit/

      If you’re coming from Dreamweaver, you’d definitely appreciate the performance boost you’ll see with Coda and also some familiar features like a built-in FTP client, native Subversion support, and more. Hope you like it!

    • http://andrewgormley.com Andrew
      Author

      Definitely posted that before I had my morning coffee. The URL for Coda (in case you couldn’t find it) is: http://www.panic.com/coda/ — Sorry for the mix up!

Newer Comments →