: Mockup strategy for Responsive Web Design 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:

@RJPawlick971

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.

Vote Up Vote Down

@Voss6371140

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.

Vote Up Vote Down