Building responsive websites can be daunting. After all, instead of just one desktop layout you're creating at least two, probably three or even four layouts to handle different breakpoints and screen sizes. That means considerably more work, which can feel overwhelming if you don't have a good plan of attack.
One of the better plans I've seen recently comes from developer David Bushell, who recently outlines 5 Tips for Responsive Builds. Among his suggestions there are two standouts, the first being "utilize breakpoint zero." For Bushell "breakpoint zero" just means "start by writing HTML in a semantic and hierarchical order. Start simple, with no CSS at all and then "apply the basic styles but don't go beyond the default vertical flow."
In other words, keep your layout slate blank as long as you can so that when you do start adding layout rules you can spot problems with different breakpoints early and fix them before changing things becomes a major headache.
The other highlight of Bushell's post is the suggestion that you maintain a CSS pattern library -- reusable snippets of CSS you can drop in for quick styling. There are a ton of ways you can do this, whether it's something formal like SMACSS (pronounced "smacks"), OOCSS, or just taking the time to write a style guide with some sample code. The point isn't how you do it or which method you use, but that you do it.
Be sure to check out Bushell's post for more details on these two suggestions as well as the other three ways you can help make your responsive design process a bit smoother.
