Responsive design. We do it because there are a multitude of devices out there and our websites needs to look great on all of them. Those of us who have been doing Responsive Web Design (RWD) for a while know that sometimes, tradeoffs need to be made in favor of one type of device over another.
How do we get a sense of where to make these trade offs? One thing that can help is knowing more about your audience. For a recent B2B project, the team I work with compiled a report of screen widths based on the screen resolution dimension in Google Analytics (GA).
|Screen Widths (px)|
|320-479 (e.g., iPhone)||
|600-767 (Small Tablet)||
|768-959 (e.g., iPad portrait)||
|960-1279 (iPad landscape, Standard Desktop)||
|1280 + (Widescreen)||
The information in the table above was somewhat in line with our expectations. We knew that our client’s B2B website drew most visitors during business hours, and we could infer that since most knowledge workers operate from desktop or laptop computers, the traffic to our site would be mostly 960px or wider. What we didn’t expect was the prevalence of 1280 px and higher widescreen displays, or how miniscule the mobile traffic would be.
How We Used this Data
For us, this data meant that most trade-offs for responsive design should happen in favor of widescreen. We would rather deliver an amazing widescreen experience and maybe a few screens look a little less stunning on a smaller desktop display.
Here is a great article explaining how to do this:
Going back to the screen resolution data we had on hand, we dug in deeper into the 77% widescreen range to get a reasonable estimate of how many visits would have a browser display of 1200 px or wider.
We felt it was safe to assume a pad of 200px, so anybody with a monitor over 1400 px wide would have at least a 1200px wide browser viewport. That still leaves 43% of the audience with a 1200 px or wider display; still a fairly compelling number to justify favoring the widescreen display behavior when thinking through design trade offs. This seemed like a fair hypothesis, although if we had the opportunity to get the screen size data we would have used that instead.
How you use data like this depends on your own design philosophy and the other information you have at your fingertips – other analytics, quantitative user research, the natural form and shape of your content, your technical resources and capacity to adapt one-off tweaks for various display sizes, and other factors. For us, having this information was useful.
Getting Screen Width Data from Google Analytics
If you would like to collect data like this, it can be pulled from using the screen resolution dimension. I worked with our developers to create an Excel Macro to transform the raw GA data into separate width and height measures. Once the widths were broken out, I sorted and used the counts to create a the table with a range of size categories.