DEV Community

loading...
Cover image for What max-width do you set for your websites?

What max-width do you set for your websites?

madza profile image Madza ・1 min read

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?

Discussion (14)

pic
Editor guide
Collapse
xavortm profile image
Alex Dimitrov

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.

Collapse
madza profile image
Madza Author

Useful input, thanks for sharing 🙏❤

Collapse
yoursunny profile image
Junxiao Shi

I set 960px, because my screen is 1024x768.

<BODY BACKGROUND=black>
  <TABLE BORDER=0 WIDTH=960 BACKGROUND=white STYLE="margin:0 auto">
    <TR>
      <TD ID=content>
        <H1><IMG SRC=welcome.jpg BORDER=0></H1>
  </TABLE>
  <P COLOR=green>This page is best viewed on Internet Explorer 4.0 with 1024x768 resolution.</P>
Enter fullscreen mode Exit fullscreen mode
Collapse
madza profile image
Madza Author

Hahaha, I thought the Egyptian pyramids were among the most ancient structures humans have made 😀😀Table layouts be like: hold my code 😂😂

Collapse
alohci profile image
Nicholas Stimpson

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.

Collapse
madza profile image
Madza Author

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 👍

Collapse
alohci profile image
Nicholas Stimpson • Edited

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.

Thread Thread
madza profile image
Madza Author

Fair enough👍😉

Collapse
tylerlwsmith profile image
Tyler Smith

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.

Collapse
iamschulz profile image
I am Schulz

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

Collapse
kayis profile image
K

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.

Collapse
realtoughcandy profile image
RealToughCandy.io

Like some others said, it depends on what I'm using it for. Great question!

Collapse
almarrr profile image
Almar Groenewald

Website width 1120 or 1240. For content (like blog or news) mostly 650-700.