we are developing a Parallax website to present our product. The Website should be accessible from any device (Mobile, Tablet and PC) and we are considering to work with 3 different layouts.

  • Standard layout for monitor > 1024 px (PC)
  • Mobile Portrait for monitor <= 480 px
  • Mobile Landscape
  • Tablet 768 px

Using this approach, our designer is working with Photoshop and InDesign and he's creating 3 different mocks per page. One for Mobile, one for Tablet and one for PC. Is this the correct approach or inside InDesign should we have more than 3 viewports? If yes, what would be the correct resolutions for each viewport just as a classic standard?

  • To do what? Who will be using the mocks? What are your users doing?
    – Peter
    Jul 24 '15 at 12:03
  • Apologize, I think I used the wrong terminology. We are designing the layouts of the web pages using Photoshops and InDesign. Right now we are using 3 resolutions 320x480 768x1024 1600x900 Is that enough?
    – Raffaeu
    Jul 24 '15 at 12:07

When I want to use breakpoints I always model them after Bootstrap breakpoints as I assume they had to put some time and research into which ones and how many are the best. For them it is:

  • Extra small devices Phones (<768px)
  • Small devices Tablets (≥768px)
  • Medium devices Desktops (≥992px)
  • Large devices Desktops (≥1200px)

Then at work we have an extra breakpoint xxs at 480 for portrait phones breakpoint.

You could likely leave it with just the 3 options 480 768 992 and be fine in most use cases since most layouts that work on 480 will work on 320 and 992's layout will look fine on 1200, just make sure images and tables and other blocky elements are allowed to scale responsively to account for those gaps.

As for mocks, it depends entirely on how specific you want to be. Personally, I would only design a mock for each breakpoint that a darastic change happens at. If at the mobile breakpoint the lead image goes away and a dropdown nav takes the place of the topnav I'd make a mock to show that. But if the only difference between desktop and tablet is that one block of text floats down below the other I think it'd be redundant and a waste of time to make a whole new mock.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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