Viewport Breakpoint Analysis

Part of the discussion for setting some style guidlines down we wanting to look to see if our current breakpoints aligned with user usage.

Current Breakpoints:

The following results are based on a Google Analytics custom report looking at user browser size.

https://analytics.google.com/analytics/web/#/my-reports/RBgDNoZYRseSqm-SAYGwpw/a2533225w4606334p4740052/_u.date00=20220801&_u.date01=20220822&114-table.plotKeys=[]&114-table.rowStart=0&114-table.rowCount=5000

There was no way of only having results for browser width so the data needed to be managed to only browser width. We were left with 245 different width ranging from 10px to 2610px.

Here are the top 20 results and and their total user use:

Even though 360px is the most access Viewport width, continuing to support a minimum width of 320px will not only help with maintaining our current designs and continue to support the 11th most used viewport width from our users

With the data given I propose to make this our new design standard viewport widths:

Even though we tend not to have many users viewing our website between the 560px-990px width, retaining that breakpoint will allow to continue to make out designs consistent with the rest of the website.

also I dont think that these sizes provide an accurate representation of real device sizes. mostly due to them being rounded in 10s but the lower value width should ensure that our designs are more closely targetted to the devices that they are being used on, instead of of falling on the higher end of the breakpoints.

The relative closeness to our current breakpoints also means that we should more easily be able to transition to the current components over to the new style guide in the future