Mockup strategy for Responsive Web Design

Question

When making mockups for Responsive Web Design projects, should I separate them by Page or by Screen Size?

What are the pros and cons of the following:

• Page based: All the home page mockups in all different screen sizes
• Screen-size based: All the pages for width <= 960px

I'm using Balsamiq Mockups to make mockups and I prefer to store all related mockups in a file like homepage, login or 960px, 768px.

Answer 1

I personally prefer to have one file for each screen and for each responsive step, especially if they are a bit complex (for the exact same reasons Dominic mentions in his comment). But having one file per screen, with the steps inside, is equally valid. I think it will really depends on the sort of mockup / website you are putting together.

In regards to methodology, Balsamiq actually has a nice article on working with responsiveness that you might find useful.

We believe wireframes can show how web content will flexibly adapt to different grid widths and indicate rules for presentation. Some of the capabilities in Mockups could make it easier for you to communicate how your design would work with responsiveness in mind.

Their recommended technique is to use Symbols.

Technique #1:

• Create a single Symbol
• Place it in each target grid layout
• Override the inner layout in each instance

Technique #2:

• Create a single Symbol that has all of the inner layouts
• Use crop to put it in place on each target grid layout

Not sure if you are using these already, but they also have grid templates you can download.

Most of their examples seem to work on one instance only per file, showing the different states. I think the reason for this is to concentrate on layout design. If you are working on the way things will interact for every responsive step, then this organisation could be a problem because you will have to open each file and then create a new one holding the interaction for a single device.

Answer 2

I'd suggest mocking up, at most, the page 'framework' rather than individual pages for all individual sizes.

Ideally, you'd then get it into code ASAP and that's where the tweaking takes place.

The problems I've run into with high-fidelity responsive mockups is that they fail to take into account how the actual responsive framework works. So the customer has already signed off on a solution that is now going to be a nightmare to build as the framework has to be completely restructured.

Working 'loose' and getting it into code sooner than later can help remedy this and better manages expectations.