index.md (2327B)
1 --- 2 title: "Web viewports" 3 author: "Eamon Caddigan" 4 date: "2023-08-21T21:07:47-07:00" 5 lastmod: "2023-08-22T08:58:51-07:00" 6 draft: False 7 categories: 8 - Programming 9 - Data Science 10 tags: 11 - Design 12 output: 13 md_document: 14 variant: markdown 15 preserve_yaml: true 16 --- 17 18 Andy Bell from [Set Studio](https://set.studio/) shared [the outcome of 19 a study of browser viewport sizes](https://viewports.fyi/); the area of 20 the screen (measured in pixels) available for web pages. They shared the 21 data so I thought I'd take a quick look at it. 22 23 First let's check the distribution of aspect ratios. With mobile 24 browsing more popular than desktop, I expect tall displays to dominate 25 the wide ones, but what do the data say? 26 27  28 29 As expected, tall (narrow) displays dominate the distribution, bu the 30 peak also seems sharper. This isn't surprising; phone screens come in a 31 few discrete sizes, and for each phone screen, there is a small number 32 of viewports (but, importantly, more than one) associated with each one. 33 34 How do the distribution of height and width relate to each other? I'll 35 plot a point for each unique viewport, and set the alpha value of each 36 point to the number of observations of that specific size. Points above 37 and to the left of the dashed line are taller than they are wide (i.e., 38 "portrait mode"), and those below and to its right are wider than tall 39 ("landscape mode"). We confirmed that tall viewports are the most common 40 by looking at aspect ratios, but how are the specific sizes distributed? 41 42  43 44 I feel like my eye detects three clusters of height-by-width 45 combinations, but k-means is clustering these unreliably---sometimes the 46 "small wide" viewports get clustered alone together, and sometimes 47 they're grouped with the "small tall" viewports. This suggests that 48 three (and also four---I checked) clusters don't describe these data 49 particularly well. 50 51 However, taking these two graphics together, we can see that while tall 52 displays tend to be smaller than wide ones in general (which is what we 53 may expect, knowing that mobile browsers are more prevalent than desktop 54 browsers), there are plenty of exceptions in the data set which should 55 be considered during design. 56 57 I think there's more to look at here, and I'll update this if I find 58 anyting interesting!