The Colors of Christmas

Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you're not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we're primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.

The Series

Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:320px,480px, 600px,768px,900px,1200px @media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on... } In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you're not an immortal being with unlimited time, that effort should be spent carefully. Read more: Beginner's Guide to Responsive Web Design - Treehouse Blog http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design#ixzz2AvqoavGR Read more:

Resources

Responsive web design is about a year old now, and there are plenty of resources that can help you learn more about it. On our high-quality video training service Treehouse, we have many videos that go in depth on the topic. Here are some links: Responsive Web Design Video Course on Treehouse Video: Introduction to Responsive Web Design Ethan Marcotte's article on Responsive Web Design The W3C specification for CSS3 Media Queries great roundup of responsive design techniques via Smashing Magazine Hopefully this article helped, but if you're still feeling confused about responsive design, don't be afraid to leave a question or comment. If you're already utilizing responsive web design in your site or web application, share the link here so we can see!

Third

The spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.