Mockup strategy for Responsive Web Design (from a programmer point of view)

Question

When making mockups for Responsive Web Design projects, should I separate them by Page or by Screen Size? Which one would be more helpful when I start writing the source code?

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

Screen-size is an overall approach that can covers a lot of device display of today market. But Page based approach allows to create a perfect application designed for each mobile device screen.

Today the recommended approach is Screen-size based because the amount of devise increase every day with different screen size and characteristics.