I have seen old questions about this subject but they are quite old. I guess things change so that is why I ask this. I want to be updated.

I am about to design a web page mockup in Adobe XD. I will only design in XD - coders will then transform my designs into a webpage. I don't have any data of the users since it is a new project.

The page will be responsive of course. I don't want it to be full-width design but rather a fixed width webpage with different breakpoints all the way from large monitors all the way down to smartphones.

I am trying to find where these breakpoints should be. I want to start designing the maximum width page and then move my way down when it comes to size.

However, what should the max-width be for people with 4k screens? It is so confusing because of different scalings and different monitors. Where should the breakpoints be? I have seen that Google's Material.io recommends breakpoints but it is all in dp instead of px. AdobeXD does not work with dp. I just wish someone could tell me what breakpoints to use in XD so that I can start designing.

Any tips would be greatly appreciated!

  • FTR: dp unit is not available in web CSS, but px is the equivalent unit according to stackoverflow.com/a/31715400/1176601 (CSS px is actually a device independent unit, not to be confused with hardware pixels / physical device resolution) – Aprillion May 19 '19 at 14:19

Trying to use a pixel width for a standard size has been a losing battle for years and no web developer or designer should have that as a goal. You do not know, and cannot reliably determine, the size of anyone's display size. So don't do that.

The best response I've ever read about this question is, start with the smallest possible display width--which is 320px for mobile devices but you could start at 280px--then widen it out until it looks like $#%&. That's your breakpoint.

  • I prefer to start at the largest width and then work my way down. What would you choose as the largest display width? 1920px? – bahh May 19 '19 at 16:03
  • 2
    bahh that is a bad practice, its very easy to think in the largest width, but when you are reaching smaller devices it will be very difficult to relocate things and usability can be damaged. Mobile First practice! – Juan Jesús Millo May 19 '19 at 16:57

Speaking for myself, using a 27″ 4K monitor for Windows, a Mac laptop Retina display, as well as other external monitors at workplace, I usually set the OS scaling to approximate 1 HD resolution.

Sometimes I change the effective resolution by zoom (zoom out to fit more windows onto screen or zoom in for reading when leaned back), but in the last 10 years I needed larger width than 1920px only on very rare occasions, each time for an Excel or DB query with more columns than any UX expert would consider healthy.

I have observed that some users with 4K-ish monitors that don't set up the scale in their OS (the few non-programmers I've seen in the wild) tend to zoom every web page and lean closer to the monitors with non-web applications.

So, to answer How to decide max-width, I'd recommend to do a small testing / observation of your own target audience, and unless you have a very special case I believe considering max-width of 1920px should be more than enough in 2019.

For many use cases (e.g. single-column designs, ...), even 1280px will be most likely good enough, but that could be a conclusion reached after considering the 1920px and deciding for auto margins around a centered content...

Disclaimer: the above is considering max-width of design mock-ups, using device-independent CSS px unit, but the image resolution might be desirable 2x or 3x for higher pixel density devices

  • to clarify, considering 4K is still an engineering concern, to make sure to set the default zoom level or font size for people who don't scale their OS + create image assets in proper resolution, SVG icons, ... just no need to consider it that much in design mockups (assuming my anecdotal evidence is generalizable) – Aprillion May 19 '19 at 14:17
  • So starting with 1920 px (content) and then scaling down all the way to mobile is a good way to do it? – bahh May 19 '19 at 16:03
  • Unless you have a visitor using a 4K monitor and your image is full screen width. Then your image is totally unusable. – Rob May 19 '19 at 17:07
  • @bahh as I said, I'd recommend to do a small testing / observation of your own target audience.. – Aprillion May 19 '19 at 21:32
  • @Rob why do you think people are capable to tell the difference? I would appreciate a link to a good research about this, not just a clash of our 2 opinions.. – Aprillion May 19 '19 at 21:35

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