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.

  • 1
    This is really a preference thing, though I hope someone may be able to add some reasoning to help you choose one way or the other, or even an option you haven't considered. Personally, I prefer to keep every instance, be it screen size, alternate layout or other, in a separate file with a descriptive name, probably including screen size, making it easy to find what I'm looking for at a later date.
    – Dom
    Sep 22, 2013 at 15:20
  • @Dominic Thanks for the comment! I agree that it's so close to a personal preference but I hope someone who has experienced both several times, comes up with the pros and cons. :)
    – Mahdi
    Sep 22, 2013 at 15:24

2 Answers 2


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.

  • Thanks for the answer! I like the article! The layout design thing also makes sense. I still hope to get more answers, because I'm about to start a new project and I don't want experiment on that one. I don't want to slow down the overall development, just because it's not easy for developers to work with the mockups, and hope to really get more helps here. Thanks again!
    – Mahdi
    Sep 23, 2013 at 9:05

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.

  • Hey, thanks for the answer but I think I'm a little bit confused. What do you mean exactly by page framework? Are you referring to the Page based option in my question or is that a different thing?
    – Mahdi
    Sep 23, 2013 at 9:13
  • By framework I mean just ver napkin-sketchy. "Header navigation will wrap, left column will pop below center column, etc". Very generic 'rules' of how a generic page on your site will behave.
    – DA01
    Sep 23, 2013 at 14:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.