Responsive Web Design Sketch Sheets

There are several well argued articles that champion the browser as the only place where the behaviour of adaptive/responsive layouts can be accurately described. This may well be true, but James Brocklehurst would still advocate starting the whole design process with sketches on paper. Put simply, using a pencil to think visually has an immediacy that is clouded once software interfaces and html/css are introduced — these should come later, after the initial design concept has been formed. But paper is static, responsive designs change according to display context. So how can you use the former to describe the latter?

Responsive designs consist of two main properties, a series of layout ‘states’ assigned to a number of specified viewport widths, and fluid-width layout elements that form a transition between the states. Jeremy Palford offers an easy solution for how to represent differing states within a sketch sheet by creating a series of adjacent rectangles for each sketch. James Brocklehurst has taken this idea and created two set of sheets, a thumbnailing version and a more detailed set of wireframe templates with some grids. The grey areas indicate the space below the fold. Not all possible display sizes or orientations are covered, but what he sees as the three most useful are represented.