0

I came to a point when I needed to decide what would be the container width for my pages. My project involves designing a web platform with a dashboard and a side menu for navigation.

enter image description here

I made a little research and found the top screen resolutions among our users:

enter image description here

Some more factors to consider:

  1. This is going to be a platform only for desktops (no mobile or tablets).
  2. We use 8pt spacing across out design.

What do you think? what would be a good container width? How do you decide?

4
  • 1200 is fairly common, and would capture all your users but the 1440s while being close enough to all but the 900s to not be obnoxiously small. Dec 11, 2022 at 14:28
  • Are other apps simultaneously used with your app? Dec 11, 2022 at 15:58
  • 1
    Don't worry about the width of your artboard, but the max-width of your container that holds all the content. If your max-width for your container is 1200px, then it doesn't matter whether your artboards are 1660px, 1920px or 4000px. I like using 1660px widths because they're optimal for the Macbook I'm working on, and our container almost never exceed 1200px anyway. Dec 12, 2022 at 9:19
  • Whatever you decide, you should pay more attention to the trend in the data rather than what it says exactly right now, since hardware specifications will change over time and so you should always design in a way that allows you to adjust for future changes.
    – Michael Lai
    Mar 20 at 22:49

2 Answers 2

0

Not sure why you want to rule out mobile devices, but I guess the rule of thumb these days for desktop only usage is to expect the sizes to continue increasing as the hardware cost decreases.

However, I think you should design for optimum display of the interface and data rather than the screen size especially since there is more than enough room on an average desktop display to show everything that you want. You can then try to optimize the display for the resolution and dimensions that is most common amongst current and anticipated future users.

0

I might not understand the question, but it strikes me that picking a fixed width for any component/control/container is a bad choice.

  • As you see with your usage statistics, there is quite some variation (and I will be angry if I bought a big monitor and your program only uses two-thirds of it).

  • As Michael pointed out, the future will bring greater resolutions.

Under the terms "responsive" (relayouting as appropriate to the given screen size) or "adaptive" (showing different information depending on the given screen size), there are more flexible approaches.

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.