1

I'm working on a new website and there's some debate regarding what width should be picked as maximum for the main, fixed-sized, grid (it won't be a 100% width layout). (Should it be 1100px? Should it be more?) In terms of width, from that point down, the grid will be fluid until it hits a breakpoint to be defined, then we'll switch to a smaller-screen layout.

I was trying to reason about all this using screen resolution stats (like https://gs.statcounter.com/screen-resolution-stats). However, these are obviously in true pixels. I was a bit surprised to find out that on my 1920×1080 laptop screen, the maximized browser width is "only" 1536 CSS pixels, which means a 1,25 pixel density I wasn't aware of.

On the other hand, these stats show a lot of 360px-width devices, which I suppose to be mobiles, but how could these be real pixels if they're supposed to have a pixel density of 2, 3 ou more?

There's something I can't quite reconcile here. Could you offer some guidance regarding how to reason about CSS-pixel dimensions from true-pixel screen stats when there's is no clear data about pixel density in relation to screen resolution?

In other words, how are those screen resolution stats supposed to be interpreted in web design if the units (screen pixels vs. css pixels) are not the same? Of course, this is not about how to write css but how to make informed decisions regarding the overall layout.

Improve this question
1
  • 1
    The 1.25 pixel density may be due to the Windows Scaling setting. Under 'settings>displays'.
    – PhillipW
    Jul 8, 2021 at 17:22

1 Answer 1

Reset to default
1

That's a common question, and unfortunately I think there is no real common answer, despite the one that tells you "it depends" 😅 (I'm sure you hate me right now 😁)

Statistics to the rescue (?)

Global stats are not really helpful since it covers all the countries, but it can give you a global trend.

The issue is that this kind of statistic doesn't give you:

  • Stats for your country (if it's a "local" website)
  • Stats for your type of users
  • Stats for your type of activity
  • Stats for your type of interface (website, web app, things you can do on it, etc.)

Sometimes, building a mobile solution is the first goal for a website because it is a web app focused on helping people on the move, for instance, or you are targeting an south african population for instance, which statistically use more mobile solution than desktop solutions. So you need to now your users.

Content First

Do not build you website regarding the screens that are or will be used for consulting your website. You should design regarding the type of content you've got.

Screen sizes are way too numerous to be able to give you a magic-number that will answer your question.

Put your different contents on the table, prioritize them, think of the space you need to make it readable and usable based on usability principles, and you should get a better idea of the global width you need to make things work perfectly.

And small reminder: responsiveness work in both direction, improve display for small screen, and adjust this display for really big screens too.

Pixel units versus other units

Well. Everything, at the end, is converted into pixels by the browser, even font-size. This put aside, modern development tend to use other kind of units to dimension the container width of a website, or for media-queries for instance:

  • em: relative to the body font-size (1em = 16px on most of the browser by default).
  • rem: relative to the root element (html element for an HTML document)
  • ch: is the value of the width of the "0", used oftentime for rich text content website.

They is no good or wrong preferring one or another.

In your specific case, and maybe the answer you are waiting for is that: pixel density isn't important unless you work with bitmap images (JPG, PNG). If a screen as a x2 or x3 density, you might want to push @2x images, meaning that you will create, for instance, a 120 x 120 px image to put in a 60 x 60 px area. To do so, you have attributes in HTML like srcset for img, or you can use picture HTML element. More info. Otherwise, the browser and your OS handle all of that density by themself.

Conclusion?

I tried to wrap up several concepts to guide you. I hope this will bring more answers than questions at the end :D

Improve this answer
2
  • Thanks for your detailed and certainly useful answer. However, I am aware of most of theses things and it doesn't answer my question (with may not be very clear). I'm editing my post to make things a bit clearer hopefully.
    – Glauber Rocha
    Feb 5, 2021 at 9:48
  • Hello :) Thanks for clarifying you first post. I'm not sure this make a difference in the possible answer, or maybe it's me who struggle with understanding what you are looking for. The Part of my answer about the pixel density is still right about it: most of the time, you don't care because the OS is handling the density difference. The only insteresting part is: media weight and width that must be aware of that density difference. For media (picture, video) you need to deliver high density assets. For the rest, the browser handle it by itself.
    – Geoffrey C.
    Feb 5, 2021 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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