The most frequent question I often get asked from designers is, “What should the maximum size of the site be?” I will openly admit that this has always been a question that has plagued me for some time now. Usually, I say, “It’s the maximum width of the browser or device.” I know that’s embarrassing, but it didn’t dawn on me until a few months back that we should be setting a maximum width on a DIV that adjacent to the closest section element.
To start, I figured I look around and see what other prominent websites out there are doing. And to my surprise, there is a consistent pattern of use. There isn’t a defined size that fits all, definitely, a variety of max-width settings is established as a definitive border. The following list below are just a few that I’ve researched that utilize this technique.
If you go to any of the sites listed above and zoom out to about 25%, you will see a distinct container that holds the main portion of the site. This will sometimes include paid banner ads and side navigations, but the point is, is it contained?
NYT COOKING – (2020PX)
BEaming HEalth – (1240PX)
NPR – (1300px)
IMDB – (1280px)
The Verge – (1100px)
Setting the maximum width of these containers ensures scalability. Once set, you can place key media query points for that DIV which will allow it to conform depending on screen sizes. You can utilize CSS grid or Flexbox settings to add additional depth to your designs.