#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. 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.

    • 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. Jon
    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. 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. 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. Chris
    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.

    • Kelly Cook
      Permalink to comment#

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

  6. kyle
    Permalink to comment#

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

  7. Shawn
    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. 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. 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. Jelmer
    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. Dave
    Permalink to comment#

    Great video, thank you.

  12. 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. 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. 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. derek
    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. 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. Aaron
    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. eddie
    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. Eduf
    Permalink to comment#

    Thank you, Chris! Great video.

  20. 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!

    • 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. Sean T
    Permalink to comment#

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

    • 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. 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. Gabe
    Permalink to comment#

    No video.

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

    That’s ssyad.

  24. Sondre
    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.

    • 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. 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. Brett
    Permalink to comment#

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

  27. MIguel
    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. kbg
    Permalink to comment#

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

  29. kbg
    Permalink to comment#

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

  30. 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. martin
    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. kruelintent
    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. Ranjeet
    Permalink to comment#

    Great video, thank you.

  34. Patrick
    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. Marylka
    Permalink to comment#

    Great video, thank you.

  36. ray

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

  37. keith
    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. Lucas
    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. JHawes
    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. Sinagod
    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.


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.