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.

Improve this question
3
  • 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, 2017 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, 2017 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, 2017 at 20:15

1 Answer 1

Reset to default
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.)

Improve this answer
7
  • 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, 2017 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, 2017 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, 2017 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, 2017 at 19:22
  • 1
    @DarrylGodden My three favorite words!
    – Nate Green
    Jan 11, 2017 at 22:01

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