A shift towards responsive web design requires more than acquiring new coding skills. Organizational changes may be in order, including a shift towards agile development, and a blurring of the lines between design and code. To best facilitate the prototyping of a responsive design the developer and designer should be sitting down together and creating comps using a browser rather than Photoshop. It is difficult to consider all of the implications of the different breakpoints without a working model. Insisting upon pixel perfect implementation is no longer a reasonable expectation, but frequent tweaks are inevitable.
A great tool for use in rapid prototype development is placehold.it, which can dynamically create images on the fly using the URL query string. While creating your model, you may want to see what the design looks like with a 960x400px hero image, only to determine 960x300px would look much better. Instead of creating mock assets in photoshop, or putting a border on a div and treating it like an image consider placehold.it.
Placeholdit allows you to generate images on the fly. Want an image 350x150px? Set your background image url (or img src) to http://placehold.it/350×150.
There are also options to change the background color and the text overlay.
<img src=”http://placehold.it/350×150/333333/fff&text=nifty!”>
Tips: the first color represents the background (333333), and the second represents the text color (fff). Everything is optional except size, which always comes first. Specifying only one dimension will create a square.