#102: Braindump on Responsive Web Design

In which I show and explain the very basics of what "responsive web design" has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.


  1. User Avatar
    Benjamin Sterling
    Permalink to comment#

    Around the 3:27 mark I could have sworn you were going to break out into a Cat in a Hat type of story. I’m thinking of Green eggs and Ham.

    Great breakdown of Responsive Web Design.

    • User Avatar
      Patrick Neal
      Permalink to comment#

      I thought the same thing, Benjamin haha. “They could be on a train, the could be on a couch, they could be in a house…” I was waiting for “They could be on a mouse!”.

      On that note fantastic video… Lots of useful reference sites and always great insight rather than just “how-to’s”

  2. User Avatar
    Permalink to comment#

    Awesome video, I’ve been avoiding responsive web design for a while now, but after watching your video and checking out those JS libraries, It feels like the right time to start really making use of it.

  3. User Avatar
    Christopher Burton
    Permalink to comment#

    I was reading a post on Google+ that Paul Irish linked to about using min-width instead of max-width. Of course I can’t find it.

  4. User Avatar
    Jan-Marten de Boer
    Permalink to comment#

    “Anything that is a number or a color”
    If you take a look at http://lievheid.nl/color.php?color=bada55 you’ll see that colors can be really simply calculated. Hex values are actually numbers in a 16base system. Since we work with a 10base system, we add the letters A-F to complement the missing numbers, but in essence it’s a number and if you turn it back into the 10base, it turns out it’s just the same as RGB values. And since they’re numbers, just like margins you can calculate the difference between them and make it animate ;)

  5. User Avatar
    Permalink to comment#

    Great video Chris, I still have yet to fully get my hands on responsive web design as I’m not all that creatively gifted when it comes to working out what should go where and such but i think buying Ethan Marcotte’s book may help boost my enthusiasm towards it.

    • User Avatar
      Kelly Cook
      Permalink to comment#

      Ethan Marcotte’s book did wonders for my understanding of responsive web design. I highly recommend it!

  6. User Avatar
    Permalink to comment#

    Love it, truly inspiring CSS, ill be coming back for more…

  7. User Avatar
    Permalink to comment#

    Really nice chris! well done. Haven’t used any responsive web design in any projects yet. I’am looking forward to it though!

  8. User Avatar
    Saeed Neamati
    Permalink to comment#

    This is where you know about the mysterious transitions of CSS-Tricks (and also 70 thousand visitors a day).
    Great explanation Chris. But to be frank, the whole information this video gave me could be transferred in 10 minutes, not 25 minutes.

  9. User Avatar
    Alaa Nayfeh1
    Permalink to comment#

    Hey chris, the file you get after downloading isnt working.. you only get a blank screen with your voice.

  10. User Avatar
    Permalink to comment#

    Hi Chris,

    I was wondering why you used the left: 100% plus a negative margin-left, instead of cancelling the value with left: auto and doing right: 0 in one go.

    Or does the transition then fail?


    PS: I love your comment preview. :)

  11. User Avatar
    Permalink to comment#

    Great video, thank you.

  12. User Avatar
    Krsiak Daniel
    Permalink to comment#

    @ Chris
    at time 08:16 I was like
    * what was that?
    * the green icon there in the google search with name “daniel krsiak” ?

    I saw all you videos mate but this is the 1st time I am in it !
    sort of funny and cool at the same time :)

  13. User Avatar
    Krsiak Daniel
    Permalink to comment#

    I believe Chris could say all the info in 5 minutes if talking real fast ;)
    but this ain’t the reason people are watching his videos

    he is a true storyteller, having a great voice, entertaing and interesting explanations
    3/4 of tutorials on web are rigid, gray and boring not css-tricks.com

    apart being knowledgeable person second half which makes this web useful and worth coming back
    is it’s charm fulled by Chris personality and his wit

  14. User Avatar
    Eric Steinborn
    Permalink to comment#

    Chris, is there any way you can host these videos on a non-IGN site too? My work blocks IGN as a “games” site.

  15. User Avatar
    Permalink to comment#

    Great screencast as always, but just wanted you to know it doesn’t currently show up under the “videos” section. Thought you would want to know. Thanks again for the vid.

  16. User Avatar
    David Welch
    Permalink to comment#

    Dear Chris – Excellent podcasts/screen, keep them up!

    I have an issue in that any (max-width) that is 410px and below is not affected, eg. @media screen and (max-width: 411px) {} works, but @media screen and (max-width: 410px) {} does not. Any thoughts?

    I also, notice that the browser vertical scroll bar dissappears.

  17. User Avatar
    Permalink to comment#

    Crazy, was reading Ethan’s book and checking for jQuery plugins when I thought “Hey, wonder if Chris has posted on Responsive design yet” … get to your site, and your latest post is just that!
    Really enjoyed the screencast, I sincerely think this topic deserves a deeper dive and you, my friend, should be the one that straps on the S.C.U.B.A. gear, lol.

  18. User Avatar
    Permalink to comment#

    I absolutely agree with you Chris, great video. Keep up with the good work!
    Thanks for making all these cool vids.

  19. User Avatar
    Permalink to comment#

    Thank you, Chris! Great video.

  20. User Avatar
    Richard Dale
    Permalink to comment#

    Totally agree with your last point Chris.

    I’d been viewing responsive web design as just more work that will be very hard to quantify to the client but you are right it is a way to set real web design apart from all the templates and web building websites out there.

    When you see software such as Adobe Muse and Edge you begin to wonder where its going to leave us but like you say its things like this that help to set proper web design apart.

    Thanks mate!

    • User Avatar
      Wesley Terry
      Permalink to comment#

      It’s not that much extra if you take the mobile first approach. Then you can just set your container widths as you move up, instead of reformatting everything down. Just a tip.

  21. User Avatar
    Sean T
    Permalink to comment#

    Are you aware that your screen resizing tricks restart the video every time?

    • User Avatar
      Sean T
      Permalink to comment#

      Also, regarding a comment you made in the video about a 800k CSS file should be mitigated by gzip compression.

  22. User Avatar
    Wesley Terry
    Permalink to comment#

    I referenced this screencast in a post about creating a new voter resource here: technical voting. Your resources give me more ammunition when pushing for these new techniques.

  23. User Avatar
    Permalink to comment#

    No video.

    Just says: “SublimeVideo Player is not properly registered for this site.”

    That’s ssyad.

  24. User Avatar
    Permalink to comment#

    Great video, in regards to the extra space on the right side for iOS devices, I am fairly certain it is the safari scroll bar, I have had strange behavior coming from it, probably because I haven’t kept in mind that it is transparent, but still needs space.

    • User Avatar
      in progress
      Permalink to comment#

      I was wondering what the extra space was on the right edge of the iOS device. Did you confirm that it’s the scrollbar?

  25. User Avatar
    John Macpherson
    Permalink to comment#

    Awesome 25 mins there Chris, please keep the RWD stuff coming!This responsive and mobile has me excited about web design again.

  26. User Avatar
    Permalink to comment#

    Great post would love to see more videos like this, just general over views on random topics.

  27. User Avatar
    Permalink to comment#

    Hi. Cris, great video.
    I can´t see anything in “Coda” (my text editor) or in http://jsfiddle.net/ if I use the code you type in the video

    @media (max-with: 500px) {
    	body {  background: red;  }

    Any suggest for me pls.?

    Thank you.

  28. User Avatar
    Permalink to comment#

    take a look at the way I implemented the responsive Web Design in alicelists.com. any suggestion, thx

  29. User Avatar
    Permalink to comment#

    please see alicelists.com in firefox, safari,chrome and safari …
    I do not think IE will work….

  30. User Avatar
    Brent Galloway
    Permalink to comment#

    This video is great! I’m going to apply responsive web design to all of my future projects!

    Very inspiring and interesting stuff. Thanks!

  31. User Avatar
    Permalink to comment#

    This is soooo awesome, i have just migrated from flash to to html, and it’s just such an exiting time to pick up that trade :D

  32. User Avatar
    Permalink to comment#

    Hi. I love this and used it as inspiration for the new version of my website too. However. I have a question (I have posted it in your forums too)

    Responsive design is great to fit your one page solution onto any size browser and still look great but what about a mobile working on WAP…

    Is it STILL best to catch the browser in script and bounce to a lightweight HTML only version for mobiles?

    If so, is there any way of identifying mobiles on wifi that could handle the larger page or is it best to give them the HTML only version and offer a link to the full site should they want it.

    Here is the forum post: http://t.co/wp9IJvna

    Tom (kruelintent)

  33. User Avatar
    Permalink to comment#

    Great video, thank you.

  34. User Avatar
    Permalink to comment#

    Hello Sir,

    This is a real great post.
    I just noticed the layout repositioning in your site after I watched the video at home with a wider screen, at work I got a smaller one.

    I now know how to deal with this issue thanks to you.


  35. User Avatar
    Permalink to comment#

    Great video, thank you.

  36. User Avatar

    Great stuff! I appreciate the time you put into creating these videos. Keep them coming!

  37. User Avatar
    Permalink to comment#

    Hi Chris, thanks for a great site, although I’m a very new CSS fan and a far less than intermediate coder I believe you’re right on the money here – Responsive makes a lot of sense.

    I may have a stupid question: I was looking at screen sizes and pixels after watching your video, and I see that Galaxy’s latest smartphone now boasts 1000px width landscape on a 5.3 inch screen. Does this mean if I use the ‘min-width: 1000px’ this phone will now render the same content identically on its small screen that we would see on most 10-12 inch notebook screens?

    All the best!

  38. User Avatar
    Permalink to comment#

    Uhm… I saw you opened calculator on Spotlight, but you just need to write math operations directly in Spotlight and it would make the operation directly.

  39. User Avatar
    Permalink to comment#

    Very awesome! Made a Free RapidWeaver Stack using your FitVids – http://www.onelittledesigner.com/rapidweaver-stack/cleanVideos/

    Great works as always Chris

  40. User Avatar
    Permalink to comment#

    Great overview chris, thanks for sharing your brain with us. I’ve been fighting the responsive design thing for a year within drupal. Sometimes I really want to go back to hand coding, but I didn’t understand the @media query nor the database stuff to head back to it. You’ve gave me hope that I can divorce drupal and hand code my sites once again.


  41. User Avatar
    Jean Thompson
    Permalink to comment#

    Ultimate tutorial :) I really had a problem with responsive web design.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.