Analysing screen resolutions in Mixpanel

PUBLISHED 3 Jan 2024

If you understand what screen resolutions your users are using the most, you can optimise your website for those sizes and give your users the best possible experience. Here's how product analytics tool Mixpanel can help with that.

In an ideal world, you would make sure your website works perfectly on all screen resolutions. But with time and resources being limited, it makes sense to focus on the most popular resolutions first. If the vast majority of your users are on high-end mobile devices, you probably want to think about their experience before you concentrate on your single user with an ultra-wide monitor.

In order to know which resolutions to focus on first, you will need data about your users' devices. Most reputable web analytics or product analytics tools should be able to provide you with this, but here I focus on using Mixpanel.

Screen Width and Screen Height

Many analytics tools have a default dimension or property for screen resolution. For example, Google Analytics 4 has a dimension called 'screen resolution' with values such as '1440x900'. Mixpanel's data model takes a different approach, offering two separate default properties:

  • $screen_width (Screen Width)
  • $screen_height (Screen Height)

You can easily combine these two properties in a quick Insights report to show screen resolution information:

  1. In Mixpanel, go to Reports > Insights
  2. Add the metric 'All Events'
  3. Make sure this event is set to 'Unique Users' rather than 'Total Events'
  4. Under Breakdown, add the property 'Screen Width'
  5. Under Breakdown, add the property 'Screen Height'

Settings for Mixpanel Insights report on screen resolution

  1. Change the Insights report from 'Line' to 'Table' (dropdown in the top right)
  2. Under Sort, untick Group segments

Mixpanel Insights report, Sort settings, with 'Group segments' unticked

  1. Don't forget to Save your report if you want to use it in future

You may find that Mixpanel 'buckets' your values into ranges, like this:

Mixpanel bucketing values into ranges

You can unbucket them to see exact values in one of two ways. Either click on the settings for each 'Breakdown' dimension and change the Data Type from Number to String:

Changing data type to String in Mixpanel

Or click on the settings for each 'Breakdown' dimension, click Customize Buckets, and select None (then Apply):

Selecting no numeric bucket in Mixpanel

You may also find that your Mixpanel only shows the first 12 rows. To rectify this, click on the text Top 12 (just below the column title) and tick Show all rows:

Option to 'Show all rows' in Mixpanel

With these steps done, you will now see the number of devices to have visited your site with each combination of width x height (in pixels). For example, the most popular resolution on this site is 1920x1080:

Screen width by screen height in a Mixpanel Insights report

Just to be clear here, if a user visits the site with two devices that have different resolutions (for example a desktop device at 1920x1080 and then a mobile device at 375x667), they will be counted twice. In this next image I've added the property 'Email' and filtered by my own email address to prove this is the case:

One user listed with two screen resolutions in Mixpanel insights report

Custom property: Orientation

There's more we can do with custom properties. The first one I like to build is Orientation - this indicates whether a given resolution is portrait (height is greater than width) or portrait (height is less than width). Here's how to do it in the Insight report we just created.

  1. Under Breakdown, click the '+' icon
  2. Select Create Custom...
  3. Select Event Property

Create custom event property in Mixpanel

  1. Give your property a name, e.g. 'Orientation'
  2. Add the following formula: IF(Screen Height > Screen Width, "Portrait", "Landscape")
  3. Click 'Apply'

Formula for Mixpanel Custom Property showing Orientation

Top tip: to add a property such as Screen Height into your formula, press the period/full stop key (.) and select it from the dropdown that appears.

Or if you prefer, you can paste the following text into the Formula box and your formula will appear. It's a bit odd, but it works!

IF(@"""{"label":"Screen Height","propertyDefaultType":"number","resourceType":"event","type":"number","value":"$screen_height"}"""@>@"""{"label":"Screen Width","propertyDefaultType":"number","resourceType":"event","type":"number","value":"$screen_width"}"""@,"Portrait","Landscape")

However you add it, this formula is saying: if the screen height is greater than the screen width, this custom property has the value 'Portrait'. Otherwise (ie. if the height is not greater than the width), the custom property has the value 'Landcape'. OK, it doesn't take into account situations where the height and the width are the same - but I've never yet seen a mobile or a desktop device with a square screen!

I find orientation useful because it shows you at a glance which resolutions might belong to a mobile device. Mobile devices are portrait, whereas desktop and tablet devices are generally landscape. (Nowadays you do get double-high monitors, but they are still uncommon so I doubt they will be featuring very highly in any list of top resolutions.)

So looking down my list of resolutions, I can easily spot that my most common mobile (portrait) resolution is 390x844:

Table showing top screen resolutions along with Orientation custom event property

Note that orientation is a property of the device, not the way the user is holding it in any given moment. So if I have a 390x844px mobile device but hold it horizontally, it will still appear in Mixpanel with a Screen Width of 390 and a screen height of 844.

That means that my custom property for this device will always register as 'Portrait'. This might seem limiting, but it does prevent individual mobile devices being counted twice with two different resolutions/orientations.

Mixpanel does have a default property $device, which provides "Name of the event sender’s device, if they’re on mobile web." This can be another good way to identify mobile device resolutions (non-mobile devices won't have a value for $device). You can see that my top mobile resolution of 390x844 here belongs to 'iPhone':

Mixpanel Insights report including Device property as a Breakdown

Adding this property could also be a way to distinguish between iPhones and Android devices that have the same resolution, although in practice I've never seen that happening. The closest I've come is a 320x694 Android and a 320x693 iPhone.

Custom property: Aspect Ratio

So that's how to distinguish mobile resolutions, but how about separating out tablets from desktops? To help you do that, you could create another favourite custom property of mine: Aspect Ratio. Here's how to do that, again in the same Insights Report:

  1. Under Breakdown, click the '+' icon
  2. Select Create Custom...
  3. Select Event Property
  4. Give your property a name, e.g. 'Aspect Ratio'
  5. Add the following formula: Screen Width / Screen Height
  6. Click 'Apply'

Formula for Mixpanel custom property showing aspect ratio

Rather than typing the formula in step 4, you could instead paste in the following:

@"""{"label":"Screen Width","propertyDefaultType":"number","resourceType":"event","type":"number","value":"$screen_width"}"""@/@"""{"label":"Screen Height","propertyDefaultType":"number","resourceType":"event","type":"number","value":"$screen_height"}"""@

When you create this custom property, you will find the values are bucketed (for example, a value of 1.6 might display as "1.6 - 1.8"). As before, you can either change the Data Type from Number to String, or set 'Customize Buckets' to 'None'. Now you will see the exact values.

Effectively, the aspect ratio figure is telling you the the ratio of the screen width to the screen height. So a value of 1.6 means 1.6:1, or that the width is 1.6 times the height. Anything less than 1 will be Portrait, and anything greater than 1 will be Landscape.

This figure is useful because desktop devices generally have higher aspect ratios than tablets. The most common desktop aspect ratio is around 1.78:1, so if you see that you can be pretty sure it's a desktop. And in fact, all five top sizes in my data have this aspect ratio:

Mixpanel Insights report showing top five screen resolutions, all with the same Aspect Ratio

When I'm looking at user experience on my site, it makes sense to start with this ratio as it covers the majority of my users.

Tablet devices, on the other hand, will have a much lower aspect ratio - commonly 1.33 for an iPad. Be careful though, because there is a crossover around the 1.6:1 mark where the aspect ratio might belong to an older desktop or to a (non-Apple) tablet.

You could again use the 'Device' property to separate the two: here you can see I have an Android device with a 1.6:1 aspect ratio and what is presumably a desktop device with the same aspect ratio:

Mixpanel Insights report showing two different device resolutions with the same aspect ratio of 1.6:1

I hope this Insight Report, and the two custom properties, will give you greater insight into the screen resolutions that are most common on your own site, and enable to focus your testing and optimisation efforts in the most effective way.

Subscribe
Notify of
guest
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
Vanessa
Vanessa
20 days ago

Thank you so much!

James Clark
Hi! I'm James Clark and I'm a freelance web analyst from the UK. I'm here to help with your analytics, ad operations, and SEO issues.
1
0
What do you think? Leave a commentx
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram