I’m currently working on a blog post on how the rise of smartphones and tablets impacts the design of charts and other data visualizations. In the process, I took a look at the proportion of mobile devices, tablets, and desktops which have visited my blog over time, using Google Analytics, in order to quantify the importance of catering to these newer technologies.
After looking at 781,557 visitors to minimaxir.com from January 2013 to February 2015, the proportion of mobile devices + tablets has been slightly increasing, and together consist of more than ¼th of the views to my blog, so catering to these users is not unimportant.
Another important concern is how visitors view my blog on smartphones/tablets. Do they read holding their device in portrait mode, where the device is vertically-oriented and supports one-handed use, or do they read the web using their device in landscape mode, where the device is horizontally-oriented and allows for more text per line? Almost every desktop monitor is landscape, so worrying about that is effectively a non-issue.
Google Analytics also records the screen resolution of each browser which visits my website (for example, an iPhone 5/5S user in portrait mode will appear as a mobile device with a effective resolution of 320x568. Note that the true device resolution is 640x1136; for many modern smartphones, the web content renders at twice the DPI to fit the entire screen). From that, I can infer that the user has their device in portrait mode if the screen height is greater than the screen width, and vice versa for landscape.
After breaking it down by device category, I found something unexpected.
95.25% of all smartphones browse the web in portrait orientation, while 88.18% of all tablets browse the web in portrait. I was expecting the proportion of portrait mode users to be high, but not that high! *
But what does this mean in terms of website design?
Modern front-end website themes and frameworks advocate responsive design, where the website resizes and adjusts elements in order to fit the screen resolution of the device (my website uses the Bootstrap framework, which was one of the first to popularize responsive design) However, there is programming, design, and QA overhead necessary to support each and every possible device width, from the tiniest portrait smartphones to the wide 1080p monitors used on desktops. As a result, many older websites do not care to invest the time and money to optimize for responsive design, but as my first chart shows, the proportion of tablets and smartphones is nontrivial, and therefore there’s a strong incentive for catering to them.
Bootstrap has a maximum width of 1200px; any screen width less than that will be impacted by responsive design. Let’s look at the distibution of device widths, by device category.
The median browser width is 1366px, corresponding to the device resolution of 1366x768, which is a common “720p” resolution on laptops. Half of the visitors will have a screen width greater than 1366px, and therefore they would not benefit from a responsive layout. Inversely, half of the visitors will have a device width below 1366px, and most of those are not desktops and below the 1200px limit and therefore will be impacted by responsive design.
Here’s the same chart, but colored by device orientation instead of category.
The majority of the devices below the median are portrait devices, which isn’t surprising, but is evident that portrait mode is a concern.
We can further separate these groups in 6 subgroups: one for each device category and orientation combination. This tells the full story.
Mobile Portrait devices have over 75% of the widths concentrated at about 360px (the effective width of Samsung Galaxy smartphones), while Tablet Portrait devices have over 75% of the widths concentrated at about 768px (the effective width of iPads). In contrast, Landscape smartphones, tablets, and desktops encompass a wider variety of device widths.
Not only do most smartphones view the web in portrait, the effective widths of these smartphones and tablets are centered around specific widths. This makes targeting certain device widths an effective strategy for saving time when testing mobile-optimized content, especially when working with data visualizations.
*In fairness, the viewers on my website about technology and statistics may not necessarily represent the viewers on the internet as a whole. However, it’s fair to assume that the way a person holds a device is uncorrelated with the person’s topic preferences. Additionally, the very large sample size of 781,557 effectively eliminates any uncertainty about the results due to random chance.
You can download a copy of the data in this Google Sheet. All charts were made using R and ggplot2.