According to Statcounter 2020 survey, the most common desktop screen resolution sizes, starting 2021 are:
1920×1080 – 21.74%
1366×768 – 21.36%
1536×864 – 9.4%
1440×900 – 7%
1280×720 – 5.16%
1600×900 – 3.85%
1280×800 – 2.63%
What max-width do you set for your websites?
Top comments (12)
At base 16; I go at 75em or often 70em. For some content-heavy news sites, a general max-width sits at around 85-90em.
Content-wise, since lot's of projects serve ads, we are doing 768px, which is the standard ad size as max-width. The sidebar to the side goes at 300px and the left can be 160px. All defined by ads. This totals to 1228px. A generally okay gutter at 30px end sup at around 1288px or 80.5em.
Content-wise, the general rule I go by is the 60-80 characters per line, so defining width here is irrelevant until you get the font-size settings or use the ch width. For some cases, when there is longer-form content more, I tend to increase the characters per line to about 100 or even 110 lines.
A good note for the resolutions above - many people also prefer to zoom in. So even when the 1920×1080 – 21.74% is quite a lot, zooming in must also work out well.
Useful input, thanks for sharing 🙏❤
I set 960px, because my screen is 1024x768.
Hahaha, I thought the Egyptian pyramids were among the most ancient structures humans have made 😀😀Table layouts be like: hold my code 😂😂
None at all. The screen resolution size has no bearing on the browser window size, and I expect my web sites to be responsive to use whatever window size the user chooses.
If you can manage to make everything look good for ultra-wide monitors (up to 3,840 x 1,080) as well, that's good 👍
Well, looking good isn't the be all and end all of a website. A website is first and foremost a content delivery system and if the user wants their content delivered using the full screen area exploiting the maximum resolution. then who am I to tell them that they can't?
My job is to delivery the content in the most usable way within those limitations, even if it degrades the look and feel to my taste a little bit.
Having said that, it's fair to point out that I'm an n-tier software engineer with front-end skills, not a web designer. My job does not depend at all on me making websites look as good as they possibly can.
Fair enough👍😉
I depends on the design. I always do design in a program like XD or Sketch where it's much faster to iterate then code it once I have a design I'm happy with.
In general, I try to have no more than 80 characters per line, so my font size will have a big influence on the page width.
I usually go with 80ch for a comfortable line width. The width of the entire website depends on it's layout. If there are more features that can be stacked next to each other, I will use the available space
I usually start with 500px for text heavy sites.
But for complex web apps, like dashboards, for example, I would get as much width as possible.
Like some others said, it depends on what I'm using it for. Great question!