How wide should a page typically be set to for maximum compatibility?

Are there any guidelines for how wide a page should generally be set to when designing layouts, so that you 1) have enough room to actually place objects, and repeating groups with many columns, but 2) will still work on a lower resolution display or if someone is zoomed in?

All my pages are about 1585 wide, which honestly still feels small to me when trying to fit things in, as when viewing them on our ThinkPad laptops or monitors which are either set to, or scaled to 1920x1080 if not higher in most cases, there’s always a lot of extra white space on the right hand side so always seemed fine. On anyone with a high DPI display, the scaling is always set to at least 1920x1080.

However, when viewing this now on my 13" MacBook Air the scaling is set to look like 1440x900 since that panel isn’t as wide as our ThinkPad’s, and all the layouts get cut off or overlap or look poor. On another one of my users who does have a ThinkPad with a 1920x1080 panel, she has her screen zoomed in to make the fonts bigger, and it does the same thing as on my Mac, with the header that’s normally 50px tall now instead being 300px or so and cutting off other elements.

I can mess with responsiveness and whatnot, but was just wondering if there’s an ideal width to use as a base to start with and go from there that most people aim for. Thanks!

This is a good reference:

2 Likes

@lmoreau I like the site linked by jici as it gives a good explanation.

I also think, page width and breakpoints are more of a personally issue, rather than a universal “best practice” as you can find by comparing some major sites and their breakpoints ( they are usually different ).

I think ensuring that no matter what page width you start with ( I use 1200px ) you should be keeping things in mind for how will it expand, and shrink ( ie: responsive design )…I usually allow my pages stretch to fit the view port, but I have content that will not go beyond 1080px…this way large screens have color ( if the page does ) from one side to the other ( ie: no white margins on sides ) but the content stays as I created it, and centered.

Then when scaling down, I run in the responsive editor to see where my sites breakpoints should be, and like the linked article, I usually end up with 3 or 4 breakpoints, for mobile, tablet, small screen computer and large screen computer.

Took me a day of scouring the internet and reading lots of articles like the one linked, as well as forum posts to decide it was up to me to set things up as I see fit.

2 Likes

For mobile devices I do (min width 396) max width (414)

It doesn’t help for old iPhone but every other phone seem to be ok with it , even androids