Using the data provided, I calculated the minimum window size in order to have full viewability among a percentile subset of the audience. Here are the answers:
Modern desktop screens are too wide for efficient reading in a browser. We're long past the point where it makes sense to maximize the window. My browser viewport is approximately square in shape, and occupies about 66% of the screen area. To the left I have my tab-treeview, and to the left of that, various other windows cascaded.
Which made sense when everyone was browsing at 800x600. But these days who knows what the size of an initial page view is. Not just devices, but windows within those devices.
My favorite viewpoint anecdote: Many sites like to assume (like the article mentions) that a good 'mobile view' cut point is 768px. And some of those sites, in particular NodeBB (back when I used it), use the particular media queries `max-width: 767px` and `min-width: 768px`. On the right laptop, on the right version of everything, if you drag the title bar to one side of the screen so it resizes to fit half the screen, Chrome will report the width 767.5px and the site will immediately break fantastically.
I just want it to look good when I have the window set to half a screen wide at 1080p. There are some websites that'll switch to a mobile design when it's that narrow, and it's incredibly annoying.
I'm on a 24" monitor at 1920x1200. However, I never ever maximize my windows, especially not my browser.
The latter is because as an interface designer I want my viewport to always be the width of whatever a user has at a maximized window on a 1024x768 resolution, as this is currently our lowest significant resolution used on the website. Also, I feel it's a nice width for consuming content on the internet.
Currently I expect a browser window to be at least 950px width on the desktop. I only change to designs for lower resolutions on mobile devices.
I am not entirely sure how common it is, but it should be a small fix and won't hurt to support smaller resolutions on the desktop as well. Thanks for the feedback.
Or mobile browsers just set a viewport width of 960px if no viewport settings are specified. This is a sane assumption since if a viewport width isn't explicitly set the page was probably designed for desktops.
When people lay out desktop sites, 960px is the smallest common minimum design width. Many of these sites are statically laid out, and if rendered with the width of 949px would require horizontal scrolling.
Except when do you ever use the browser at actual full screen? Your window decorations, desktop environment, and browser UI cruft reduce the viewport size by a few tens of pixels.
And if you do use actual full screen, that's probably even more uniquely-identifying!
I think debating where the breakpoints should be is fair. My rule of thumb is that a site should not go to “tablet” mode until it’s below half the width of a laptop monitor: ie anyone on a laptop should be able to put two windows size by size and still see the “full-width” version.
However, this is impossible to actually implement, because we don’t get media queries in “what percentage of the screen is visible,” we just get how many pixels (or virtual pixels) we have to work with.
One variation on the authors idea: suppose that browser vendors implemented media queries differently so they provided “screen=small|medium|large|xlarge”. Then the widths which trigger these layouts could be configured in the browser (with sane defaults), and the user could “lock” their browser to whichever query they preferred regardless of the window size.
But, that would actually be really hard to deal with on the implementation and testing side. Do you - should you? - care if a user has their browser locked to “xlarge” but then the layout breaks when the window is shrunk down to 500px wide?
At the end of the day there’s no perfect solution here.
reply