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!