The bottom line
Use the HTML5 document type
NO inline styles as usual (I don’t have to tell you that), these will come to haunt you for days especially when you’re using CSS3 Mediaqueries and get your Responsive game on.
As always try to make browser defaults work to your advantage. For example; a <div> by nature will be a block element and so will be a 100% width wheres a <span> is an inline object with auto width.
When building a responsive design try to think of a Mediaquery as a last resort. You can do a lot without using any overwrites as long as you use the browsers default behaviours to your advantage. Overwrites are often costly in terms of efficiency, speed and developer readability. Overrides append to the already existing applied CSS rules so you get all the original state/styles of the object plus the added overwritten styles.
I’m not saying Mediaqueries are a bad thing, but don’t use it as an excuse for lazy development.
jQuery (duhhh, not explaining that one)
Modernizr is a feature detection library.
In these wonderful times where there are thousands of devices with each their own specs and capabilities Modernizr proves to be an essential tool for detecting said features.
Respond.js is a compatibility layer that works alongside Modernizr to function as a polyfill for browsers that lack Mediaquery support, thus making it possible to view your responsive design in all it’s glory on obnoxious browsers such as IE.
Now that I’ve made you read everything above I’m gonna enlighten you with the fact that all this knowledge was just one click away. If you point your browser towards http://www.initializr.com you can get going in a heartbeat. Below you’ll find a graphic showing you a solid default setting for most of your projects. Don’t necessarily use the supplied CSS files as I’m about to explain you why below.
CSS Preprocessors improve on CSS in many ways.
Adding features that should have been in CSS at the first place.
Working with a preprocessor often allows you to simplify your readable styles and accomplish easier cross-browser compatibility.
I’d recommend using Sass in combination with Compass (http://compass-style.org)
Compass has many built in Mixins which makes cross-browser compatibility a breeze.
Resets all browser defaults harmoniously so you have a flat base to build from.
Compass can do this for you by using the reset mixin at the top of your sass document like this: @import “compass/reset”. This is incredibily useful and I’d say it’s invaluable for getting proper cross-browser compatibility right.
Random tips and tricks
Responsive image gallery
RoyalSlider (A full responsive and touch-enabled image/video/content slider).
Font-Awesome (a font based icon set which contains a few hundred icons and is expanding every release). http://fortawesome.github.io/Font-Awesome
Vectors, vectors everywhere!
Because of the wide range of resolutions you’ll be designing for, try to make use of the scalability and flexibility of Vector Images (SVG). Your logo’s can default to using SVG with a fallback to PNG for the non-fortunate browsers to support SVG (I’m looking at YOU IE!).
DEVICES DEVICES DEVICES DEVICES!!!
Have your devices at hand at all times during the development of responsive designs.
You can only experience the true state of things if it’s on the device your visitors plan on using.