Stop Thinking About Screen Resolution and Focus on Viewport Size Instead
Or the size should you design for… kind of.
I am betting that if you got 10 cents every time you hear the famous “what screen sizes should we design for”, you would be well on the way to becoming a part of the mythical 1% club…
The most common reply is to go check the hippest screen resolutions your users might be visiting your site/web app on, which would give you a couple of measures for artboard sizes, on which to apply your magnifying glass proof, pixel-perfect mockups.
But some years ago, a bunch of folks that design/code websites for a living ended up realizing that a lot of people don’t usually use their browser maximized! 😱
Back in 2011, Chris Coyier wrote an insightful article about these “cutting-edge” findings on CSS Tricks…
The gist of it is that screen resolution is not the best way to go, not only due to the whole browser window quagmire but also because to the fact that your site would not use the entirety of the resolution size available, even if everyone started maximizing their browser window (like me).
But what is viewport size anyway?
While screen resolution is pretty self-explanatory, viewport size is a bit more elusive for those who are less familiar with computer science jargon. In short, the word is used to describe the rectangle on which your computer graphics are rendered.
In the browser world, the viewport size is the visual area covered by the sites or web apps, everything else you can see on the browser window is commonly known as chrome.
So the correct answer to what size your artboards should be, is to check your site/app analytics for viewport size. Except that by default most analytics tools will only track… drum roll… screen resolution! 🤦🏻♂️
There are of course ways to set up your analytics tool to register viewport size, and Google Analytics has been providing that data point for a couple of years now, but let’s assume that you cannot get your hands on real data.
The “I can’t get the viewport sizes for X or Y reason” educated guess on what sizes to design for…
For the sake of simplicity, let’s focus on desktop and laptop screens, though the same reasoning we use below, can be applied to other devices.
For starters, unless people have their Windows taskbar or MacOS dock set to auto-hide, you need to remove those pixels from the available height (roughly 40px for both by default) and for Apple users, you will have another extra 22px occupied by the menu bar on top.
Then, you need to account for the default Chrome’s chrome (app window, tabs bar and URL bar) which is roughly 85px tall on Windows 7. This measure goes down to 74px on Windows 8 and MacOS.
When you add both values, you will have a worst case scenario of 125px of unusable vertical height that can be subtracted to the screen resolution, leaving you with an optimist estimate of the viewport size.
You can now check the latest resolution usage stats and remove our magic number from the vertical pixel count, getting a shortlist of target sizes like the one I have below 👇
As you can see, I have summarized all of the available resolutions into three handy sizes you need to make sure your design works on.
The most common one, 1366x643 (24%) is your typical commercial laptop. Then 1920x955 (18%) which commonly marketed with the Full HD moniker. Lastly, we have 1024x643 (3%) which was the golden standard for web-design for a lot of years.
You are likely asking yourself why I am shortlisting such a poorly used resolution has one of my recommended target sizes.
Well, my friend, this is what most would probably dismiss as being the edge case, and an active decision would be made to discriminate against these pesky inconvenient outliers.
A good designer, however, will pay heed to the Designer’s Code of Ethics, that Mike Monteiro so lovingly compiled, putting common sense and gut feeling into written form, and consider this “edge case” the minimum requirement for your design.
Of course, there are cases where fitting huge data heavy tables in such a small space and still keeping everything readable is next to impossible. In those cases, you have to accept awful compromises like horizontal scrolling, but you should at least remember to keep all the critical information and user controls within the safe area of our worst-case scenario.
Wrapping up…
All that I just defended is only true, assuming that your product does not need to work on mobile and tablet (which has been the case for most products I have worked with until now).
In case you have to cater to all kinds of devices then you should consider the smallest statistically relevant desktop screen to be another breakpoint that you need to think of, in order to achieve the holy grail known as responsive design.
Even though I gave you three basic target sizes, you should avoid envisioning them as immutable ways your design will look like for groups of users, but rather as different scenarios that could benefit from subtle changes like increased font size, more columns and even more data.
The in-betweens are the easiest to deal with if the design is implemented correctly since the stretching of content is the bread and butter of the way browsers render content on the web (this same flexibility is what makes CSS such a target of disdain from some in the computer science world).
One last thing, if you like any of the images I used in this article you can actually download them below. No strings attached and no usage limitations, consider it design open source 😉
So long, and thanks for all the claps 👏
