0

For my client, I need to design for a 24" monitor. How many px would my viewport be approximately (in Chrome, FF)? Is 1520px too safe? Should I assume a higher width?

Edited: This is for a data entry application with tabular data. The browser will not be resized.

closed as off-topic by maxathousand, DasBeasto, Mayo, SteveD, JonW Jan 12 '17 at 15:06

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – maxathousand, DasBeasto, Mayo, SteveD, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

  • You can easily assume a 1520 px width - but you also need to know how many applications will be displayed at the same time. – Mayo Jan 11 '17 at 18:57
  • One application open - full width. Should I go 1620px? Is that save? I don't have a 24" to test. – janeh Jan 11 '17 at 18:59
  • 1
    I just checked the display resolutions of all the 24" external monitors available on major e-commerce websites in my country (India) and none of them exceeds 1920 x 1080 (1080p Full HD). I believe you would be safe considering the same as your target width while designing your screens. If possible, rather ask for your clients' monitor model and do some research on it. That would serve you better than just eyeballing the target resolution and hoping it would work out a-okay. – ikartik90 Jan 11 '17 at 20:15
1

1440 is probably a "safe" minimum. I believe most displays that size would be 1920, these days.

For your app, though, I don't think you can safely assume a certain pixel width. Modern displays come with a dizzying array of resolutions and densities.

Instead, try to design your pages to respond gracefully to any screen width. Using typography-based units like em, rem, and ch, you can set up your pages to lay themselves out according to the content, so that the design is more flexible. For wide data tables, you will probably need to set a reasonable maximum width to aid readability, in addition to handling how the app responds when the viewport is smaller than you expect. (Even on a 24" monitor, browser windows could be any size at or below their resolution.)

  • I am using ems, I still need to know how many columns I can fit in my table. It's a productivity app, so I am wondering if 1520 is about safe. PS. The app is for data entry people - not casual browsing. – janeh Jan 11 '17 at 18:50
  • 1440 is probably a safe minimum monitor resolution to use during the early phases of your design. I'd recommend having conversations with your client about which columns are prioritized, so that you can tuck the appropriate ones away at smaller viewport sizes. – Nate Green Jan 11 '17 at 19:04
  • From searching online I see that most 24" have 1900 width, you don't think that 1440px is too safe? – janeh Jan 11 '17 at 19:19
  • It's a safe minimum resolution you could expect, IMO. If your client knows that all the 24" monitors will be 1920, then design for that. I just don't think you can safely assume that all your users' viewports will be that large. (And, note that I am not using "viewport" and "monitor"/"resolution" interchangeably.) – Nate Green Jan 11 '17 at 19:22
  • 1
    @DarrylGodden My three favorite words! – Nate Green Jan 11 '17 at 22:01

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