Break Out the Scissors and Glue for Your Next Responsive Redesign

Building websites with scissors and glue. Image: Webcredible

Web developers are still figuring out the best tools and workflows for creating responsive websites, including falling back to good-old pen and paper. As we noted earlier, Zurb released a nice set of responsive sketchsheets — paper templates for sketching out responsive layouts.

That’s not the only paper trick we’ve seen lately. Alexander Baxevanis of Webcredible recently posted another idea about how paper can come in handy to mock up a responsive site. Baxevanis’ post walks through how he and his team printed out a paper model of their site to wireframe and mock up a new responsive website:

I started by printing out screenshots of some of our most important pages. Each person was given one or more of these screenshots, some empty paper, a pair of scissors and some glue. The only instructions I gave was to try and slice up and rearrange page content so that it fits in a single-column layout.

Baxevanis touts the method’s speed and flexibility since the there’s less sketching and, with each content element cut out separately, it’s easy to rearrange everything and try various combinations.

Naturally there are some limits to how well you can mockup a site using paper, though Baxevanis does offer a clever solution to one problem — fold a piece of paper showing a long list of stuff to mimic a drop-down menu. The main caveat is that this probably works best if you’re starting with an existing desktop site; those adopting a mobile-first approach would probably need to make some modifications to the process.

For more details and more images of the mockups, head on over to Webcredible’s blog.