Standardizing device width in designs
When going over the data for the most commonly used browser sizes of our users, we noticed that both width and height are smaller then initially expected. 4 of the 10 most popular browser resolutions have a width of
1366px or lower, and I would estimate that in total roughly 25-35% of all page views come from browsers with that width or lower.
In our Figma designs, we don't have a standardized screen width. When jumping into different files from random designers, there were options from
1200px all the way up to
This can create problems especially for designs where both sidebars are visible. On these page types
542px of space already go to the two sidebars, which would mean that if we were to take the total device width of
1366px mentioned above, only
824px would be left for the actual content. In most designs however, the page content is at least
990px wide, as that's the maximum width we determined in our Pajamas component. There also were designs where the page content was even larger, e.g. I noticed multiple occurrences of
1156px page content.
This means that our designs may not be optimized for a considerable percentage of page views because we are too optimistic about the device size of our users.
To ensure that our designs work for the real environments of our users, we could establish a standardized device size we use in our designs that takes the user data into account.