Grow your CSS skills. Land your dream job.

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

Comments

  1. 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. 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. 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. “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. 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. 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. 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. Hey chris, the file you get after downloading isnt working.. you only get a blank screen with your voice.

  10. 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?

    Jelmer

    PS: I love your comment preview. :)

  11. Dave
    Permalink to comment#

    Great video, thank you.

  12. @ 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. @Saeed
    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. 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. 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. Permalink to comment#

    Thank you, Chris! Great video.

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

    • 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. 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. 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. 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.
    Miguel

  28. Permalink to comment#

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

  29. Permalink to comment#

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

  30. 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. 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
    Thoughts?

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

    Regards.

  35. Marylka
    Permalink to comment#

    Great video, thank you.

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

    Yo,
    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.

    Thanks

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".