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.
#102: Braindump on Responsive Web Design
Chris Coyier
on
(Updated on )
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.
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”
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.
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.
This the post you are talking about?
https://plus.google.com/113127438179392830442/posts/3ZeYxcNa1kL
Bingo
“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 ;)
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.
Ethan Marcotte’s book did wonders for my understanding of responsive web design. I highly recommend it!
Love it, truly inspiring CSS, ill be coming back for more…
Really nice chris! well done. Haven’t used any responsive web design in any projects yet. I’am looking forward to it though!
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.
Hey chris, the file you get after downloading isnt working.. you only get a blank screen with your voice.
Hi Chris,
I was wondering why you used the
left: 100%plus a negativemargin-left, instead of cancelling the value withleft: autoand doingright: 0in one go.Or does the transition then fail?
Jelmer
PS: I love your comment preview. :)
Great video, thank you.
@ 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 :)
@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
Chris, is there any way you can host these videos on a non-IGN site too? My work blocks IGN as a “games” site.
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.
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.
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.
I absolutely agree with you Chris, great video. Keep up with the good work!
Thanks for making all these cool vids.
Thank you, Chris! Great video.
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.
Are you aware that your screen resizing tricks restart the video every time?
Also, regarding a comment you made in the video about a 800k CSS file should be mitigated by gzip compression.
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.
No video.
Just says: “SublimeVideo Player is not properly registered for this site.”
That’s ssyad.
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.
I was wondering what the extra space was on the right edge of the iOS device. Did you confirm that it’s the scrollbar?
Awesome 25 mins there Chris, please keep the RWD stuff coming!This responsive and mobile has me excited about web design again.
Great post would love to see more videos like this, just general over views on random topics.
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
You are missing a “d” in “width.”
take a look at the way I implemented the responsive Web Design in alicelists.com. any suggestion, thx
please see alicelists.com in firefox, safari,chrome and safari …
I do not think IE will work….
This video is great! I’m going to apply responsive web design to all of my future projects!
Very inspiring and interesting stuff. Thanks!
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
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)
Great video, thank you.
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.
Great video, thank you.
Great stuff! I appreciate the time you put into creating these videos. Keep them coming!
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!
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.
Very awesome! Made a Free RapidWeaver Stack using your FitVids – http://www.onelittledesigner.com/rapidweaver-stack/cleanVideos/
Great works as always Chris
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
Whenever we talk RWD to the non-techies there ends up being a LOT of glazed over eyes. To help explain it we developed this tool.
http://www.finecitizens.com/defineResponsive/
You can also add in a URL to see how sites react as the device changes.
http://www.finecitizens.com/defineResponsive/#/www.css-tricks.com
Ultimate tutorial :) I really had a problem with responsive web design.