Screen Resolution Data for Responsive Design

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)
0-319

0%

320-479 (e.g., iPhone)

5%

480-599 (Phablet)

1%

600-767 (Small Tablet)

1%

768-959 (e.g., iPad portrait)

4%

960-1279 (iPad landscape, Standard Desktop)

13%

1280 + (Widescreen)

77%



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.

We’ve been talking about screen resolution, but actually – a better metric to use is browser size.  On widescreen displays, people typically do not have their browser fully maximized.  So the viewport of the browser on a 1400 px monitor may actually be only 1100 px.   You can get a sense of browser size stats for individual pages by looking at GA’s in-page analytics.  Unfortunately it’s not possible to get this same data for multiple pages or site-wide.  To do that, you must run some additional JavaScript on every page of your site to log the screen size data as an event for each page view.

Here is a great article explaining how to do this:

http://www.labnol.org/internet/browser-windows-size/26872/

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.

1280 -1399

33.90%

1400+

43.03%

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.

Download the Excel file

Categories: Design and Information Architecture | Tags: | Bookmark the permalink.
Kelly Browning

About Kelly Browning

Kelly is Matrix Group's Director of Strategy — constructing critical links between new clients and their site users. She enjoys learning about new clients and helping them formulate strategies for most effectively connecting with their users on the web. Before coming to Matrix Group, she was a project manager for Threespot Media. Outside of work, she likes to paint and attend antique auctions.