With the constant evolution and popularity of mobile devices, designing web sites responsively is essential. Unlike designing for a static or fixed web site, the fluidity and flexibility of a responsive site can make the design process tricky and at times almost impossible to successfully convey visually your design ideas.
We are here to help you out by highlighting some of the most useful and basic tools available for responsive design: A pencil and some paper. Or, just to be clearer, sketchsheets specifically for designing responsive websites. Here they are:
Printable Responsive SketchsheetsBootstrap, the LESS Framework 4 and the Semantic Grid System.
All sketchsheets are free to download, ready to print and you can also grab the PSD templates if you need to convert your grids into graphic mockups.
Responsive Web Design Sketchsheets by Jeremy PalfordThis set of responsive web design sketchsheets are based on the work of Denise Jacobs. The collection includes support for various device sizes and are totally free to download.
Responsive Web Design Sketchsheets by James BrocklehurstThis collection of responsive web design sketchsheets includes two sets of sheets — first, a thumbnailed version followed by a more detailed set of wireframe templates with grids. These sketchsheets are based on the ideas discussed by Jeremy Palford (mentioned above). The set is free to download and also comes with PSD templates.
Responsive Sketchsheets by ZURBThis set of sketchsheets includes both responsive and regular sheets, though you can also choose to download only the responsive sketchsheets as required. These sketchsheets can help you design for mobile as well as desktop devices and even off-canvas content.
Premium Responsive Sketchpads
Responsive Sketch Pad ($13.95)Responsive Sketch Pad helps you generate cross-platform application ideas as well as visualise how a given design prototype will look across multiple devices.
For a closer look at its features, I will leave you with this short video:
How About Something Different?Yes, seriously. An alternative solution is not bad, is it? I mean, look at all those sketch pads that cost almost $13? Agreed, having your own sketch pad or book is all fun and good, but, come on! $13 for some sheets of paper!
How about using something basic and humble for responsive sketching? Something that is really, really, really simple! Something that is probably lying right there, next to your computer screen. Something like... an A4 sheet of paper?
Alright, some of you may find that idea hilarious. So before I take your leave, I will drop in a quote from Sam Hardacre, putting a case for A4 sheets:
The best thing about A4 sheets of paper for responsive sketching, aside from being cheap, is the fact that a single sheet can fold multiple times and give us the basic screen sizes we may be designing for. The plain A4 sheet can be used to sketch a desktop layout, fold it in half and you have two tablet sized canvases on which to sketch out portrait and landscape layouts, fold three more times and you have a basic smartphone canvas to sketch on.