Responsive Design Kit

If you’re planning in developing a responsive project the following articles will get you up to speed with everything you need to know.

Although I agree with Ethan Marcotte in regards to how the different breakpoints should be added to your project, sometimes you just need to target specific devices.

While the W3c Group is working hard to figure out responsive images the following approaches will take you a long way.

Remember the design should always dictate the breakpoints and not the other way around.

Update 2013-05-14

I must say I completely agree with Joni Korpi on his post Leaving old IE behind and also with Chris Ferdinandi in Mobile First and Internet Explorer.

The Mobile first approach allows you to make a clean break with legacy browsers. By simply not wrapping the narrower/mobile layout inside a media query you allow older browsers, that don’t understand media queries at all to display the mobile design - which is usually a one column layout that focus on the page content.

For modern browsers, that do support media queries you can then go crazy, and use all the modern techniques for structuring the page content and elements.

It’s a win, win kind of deal.

This is Responsive, a website by Brad Frost that has a lot of great examples of responsive patterns as well as other responsive design resources.

Update 2013-07-14

Nothing ground breaking here but the following article gives a couple of really good suggestions on how to use SASS (or Less) to implement responsive design, the easy way.