I held up the belief that you should design right in the browser and skip the design phase. But I came to the same conclusion as the author: thinking in code is a completely different process than drawing things and trying out how your site might look like. My best advice is: draw on paper first, using just a pencil and an eraser. This forces you to focus on structure and relationship rather than pixel-perfection. Hence, by going analog, you focus on function rather than on design as the critics say.

What you do next is up to your preferences. I think it is worth it to transform your sketches to wireframes. In most of my cases that was still a more open process than fitting the sketches into CSS directly - especially if you have designers, business people and coders involved.

One possible solution for wireframing that was already available in 2012 is Illustrator or InDesign. Both have global colors, symbols for reusable content and are vector-based so you can scale it for your responsive designs.

There are less good ressources on wireframing with Illustrator, but I found these two most helpful:

- http://www.designsprint.net/ - http://design.tutsplus.com/articles/10-tips-for-building-wir...