It’s an easy pitfall to fall into for a designer to consider a screen resolution when designing and testing instead of an actual browser viewport size. After all, even that community that develops standards to help web designers and developers make better decisions about these things (w3schools.org) provides that sort of data. Even with shiny new things like the viewport unit, this can still have a negative impact on one’s design, especially when the allotted viewable area has a shorter dimension than the content it is intended to show at a glance.

Let’s take our website’s landing page on a 1280 x 800 Windows machine as an example. Originally, each fold was designed to be at least as tall as 90% of the browser’s viewport ( min-height: 90vh)—that’s, at least, 611px , but unlike the rest of the folds’ content, the jumbotron’s height is fixed at  779px which is obviously taller than the  min-height. Normally, the fold would re-adjust its height to accommodate the content’s height provided that each fold has a rule that sets its height: auto. However, additional rules have been applied to all the folds’ contents that prevent it from stretching the containing fold’s height to the height of the content, because the CSS code was originally designed around the assumption that all the folds contents would never exceed 90% of the viewport’s height, and was tested by resizing the viewport using the developer’s tool to the average screen resolution back in the year it was designed (2015).

When we recently redesigned the jumbotron to accommodate a form that made the fold’s content’s height taller than 679px, the result on several Windows laptops wasn’t pretty.

When the new jumbotron was being developed, it was constantly being tested with the browser set in OS X’s full-screen mode and its viewport height set to 800 px—not 679 px. The height of Window’s taskbar, and the heights of Chrome’s toolbar, title bar were completely neglected. It wasn’t until the changes have already been deployed, and later on viewed on an ultrabook with a screen resolution below 800 px that the issue was noticed.

Since we launched a redesigned site that included a ‘Learn from Us’ section last year, almost half of our visitors were using Windows, and almost 20% were using screen resolutions shorter than 800 px. When those two are combined, more or less 16% of the visitors were probably able to see the issue.

There must be a tool out there that has a pooled resource as to what the annual average viewport size is. A server-side script to track visitor viewport sizes can be used, but that would only be valuable if you already have a steady flow  of traffic. Until that tool comes to the surface, designers will have to make estimations and consider UI elements outside the viewport that reduce the screen resolution’s height to the actual viewable area.