0

Question

I have a library that I implemented to use in my frontend projects. (Details are not much relevant, but just in case you may wonder, they are provided below in the Background Info section. I'll be more than happy if more people find it useful.)

Now using this library I want to cover most common usages of native devices (phones, tablets, etc) and common browser usage width/height ratios.

I am not sure if such an information exists. but if so, I'll appreciate if you can point to a relevant study, or provide a list.

Edit 13.10.2022

After receiving some comments let me edit the question to provide some more clarity about what I intent to find. What I hope to find is some statistical information as can be seen from below tables. (The numbers are random, and provided 5 rows is just to show what I am looking for. Of course, ideally, the more rows the better.)

Browser

Least Width/Height Highest Width/Height Commonality Ratio
0 0.5 3%
0.5 0.9 19%
0.9 1.1 25%
1.1 1.5 50%
1.5 inf 8%

Native Device (includes both portrait and landscape orientation)

Least Width/Height Highest Width/Height Commonality Ratio
0 0.5 3%
0.5 0.9 19%
0.9 1.1 25%
1.1 1.5 50%
1.5 inf 8%

Background Info

I have recently implemented a react-native library (which can also be used by react projects through react-native-web). (*)

The logic of the library is, you provide lower and upper bounds with respect to width / height ratio of the screen or browser. And finds the corresponding layout design to use.

For example below configuration says if width/height is between 0 and 0.9 then place 3 divs in the screen. top, bottom, left, right represent the coordinates in scale from 0 to 1, where the related div (or View in case react-native) are placed.

[

{
    validAfterWHRatio: 0,
    validBeforeWHRatio: 0.9,
    views: [
        { top: 0, bottom: 0.5, left: 0, right: 1, children: View1 },
        { top: 0.75, bottom: 1, left: 0, right: 1, children: View2 },
        { top: 0.5, bottom: 0.75, left: 0, right: 1, children: View3 },
    ]
},

...



]

(*)

A web demo is here: https://mehmetkaplan.github.io/react-native-animated-layout/ (you can get the behavior of the library when you resize the browser or change your device orientation landscape - portraid).

The library is here: https://www.npmjs.com/package/react-native-animated-layout

Mehmet Kaplan
  • 103
  • 4
  • What search terms you used when searching for common screen sizes so we don't duplicate your work? – locationunknown Oct 13 '22 at 12:06
  • Common browser sizes is what I tried to find. I could not find range statistics but rather I find predefined aspect ratios, like 4:3, 16:9, etc. What I would like to have is statistics like “between 4:3 to 5:3 20%, between 5:3 to 5,5:3 20%…etc”. And for native devices, similarly I can find the device screen sizes per device but not the ratios (commonalities) of those ratios. – Mehmet Kaplan Oct 13 '22 at 12:23
  • 1
    An aspect ratio alone is IMHO quite useless. A phone in landscape will have an aspect ratio close to that of a desktop, however the size is very different, so the amount of information you can display and its layout are nearly necessary different. Even on the desktop, someone using a small 11" screen and someone using a large 32" screen definitely don't have the same real estate available. Also on the desktop (and now sometimes on tablets and even some phones), people can resize windows to use any size. Finally, some people have toolbar overload. Windows size <> Screen size. – jcaron Oct 13 '22 at 12:37
  • You can check bootstrap's breakpoints: https://getbootstrap.com/docs/5.2/layout/breakpoints/ for an idea of frequent size classes. The minimum split is usually phone (width < 600px or so), tablet/small screen (600-1000 or so), larger screen (>1000). But phones and tablets can be used in both orientations, windows on desktop can be resized (e.g. for side-by-side).... – jcaron Oct 13 '22 at 12:43
  • Thanks @jcaron. That segmentation is based on the absolute (px) values. On the other hand what I wanna find is a quantitative segmentation about width/height ratio. – Mehmet Kaplan Oct 13 '22 at 12:54
  • I don't see how this should be any more involved than to simply check your existing analytics. You can look up global device popularity statistics, but they don't mean much if your user base doesn't perfectly align. – Ro Achterberg Oct 13 '22 at 13:21
  • I have no user base. That’s why I am trying to have a generic approach. (Actually I wanna have a single approach to employ for every possible future front-end project hence trying to make a width/height ratio classification.) – Mehmet Kaplan Oct 13 '22 at 13:41
  • Does this answer your question? Common screen resolution? – Nash Oct 13 '22 at 14:26
  • @Nash thanks for pointing the alternative answer. But unfortunately it does not give the statistical ranges I am searching for. I think it is better I provide an example to make it more clear for my target. I added the section ‘Edit 13.10.2022’ in order to give a better idea about the target of the question. – Mehmet Kaplan Oct 13 '22 at 15:02
  • @MehmetKaplan as explained above (3rd comment from the top), ratios without actual sizes are quite useless. – jcaron Oct 13 '22 at 15:45
  • @jcaron you are right, (unfortunate for me). This renders my approach to be wrong. I get it. I agree, a small device with W/H ratio of X can show much less of information than a browser on a high definition screen with W/H ratio of X. But still, I invested in this approach and still willing to take a shot, if possible, by resizing all objects, fonts, etc with respect to width or height. (But really appreciate for your patience for pointing me the problem in my approach.) – Mehmet Kaplan Oct 13 '22 at 15:57
  • @MehmetKaplan You can resize a lot of stuff, but ultimately in most cases you can't scale text down from desktop to phone to keep the same layout, the text becomes unreadable. If you want to scale, define everything in scalable units like vw or vh or rem or something similar, but we advised this will most likely not work for most designs/layouts. Also ratios are actually very similar on all platforms. There's portrait and there's landscape, and it ranges from 3:2=1.5 (very old phones) to 21:9=2.33, with most screens nowadays between 16:9=1.78 and somewhere around 2.3 for phones. – jcaron Oct 13 '22 at 16:50
  • But again the screen size is one thing, the browser windows size another, and with a few limited exceptions, vertical scrolling makes the ratio completely moot. – jcaron Oct 13 '22 at 16:51
  • I am (was) trying to run away from the scroll bars. Like PWA. What about setting a minimum width and height option? Wouldn’t it limit the problems in full scalable layout approach? – Mehmet Kaplan Oct 13 '22 at 17:08

1 Answers1

1

Screen size and aspect ratio are moving targets: New devices with different screen sizes and aspect ratios are delivered to the market almost daily.

Your best bet is to focus on the users for each project you're working on. Step one of every project is requirements gathering. This is where you get tracking data from your software/website/etc to find out who is using it and how they are using it. In among all the metrics for demographics and geolocation, you should also have technical specs: what device is being used and what screen size/aspect ratio it has - you may even be able to get data on the shape and size of the viewport (not always full screen).

Library objects should be independent of screen sizes and aspect ratios for this reason. Your library objects need to be flexible enough for the designer/developer to be able to resize them according to requirements and not based on an average that could be outdated before you even release your library.

Having said all of that, for responsive design, we tend to think in terms of screen WIDTH breakpoints at 320px — 480px for mobile devices, 481px — 768px for iPads & tablets, 769px — 1024px for small screens like laptop, 1025px — 1200px for large screens like Desktops, and 1201px and above for extra large screens like TV. We don't tend to use height very much because vertical scrolling is widely understood and accepted by users.

As you can see from some of these descriptions, they are out of date because the technology has moved on faster than designers' and developers' processes and standards can keep up. Avoid putting objects that rely on a given aspect ratio or screen size in your library if at all possible.

Roux Martin
  • 14,209
  • 2
  • 31
  • 51