Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
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. –  Dominic Sep 22 '13 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 '13 at 15:24
add comment

2 Answers

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.

share|improve this answer
    
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 '13 at 9:05
add comment

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.

share|improve this answer
    
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 '13 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 '13 at 14:13
    
thanks for the explanation! –  Mahdi Sep 23 '13 at 15:25
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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