For existing web sites, you can look at visitor statistics to determine appropriate breakpoints to respond to the devices that visitors actually use to browse the site.
In the example below (which also shows the steps to find this data in Google Analytics), a simple site with a small number of visitors shows that most of them come from desktop resolutions, with just one visitor using a much smaller screen. This could indicate that the site is hard to use on smaller screens, and a responsive breakpoint at a low resolution could help improve user traffic.
In this case, it could be appropriate to create a responsive breakpoint at 480px and implement a new design for those smaller screens.
Given the site statistics below, which breakpoints might be appropriate for a new design?
Resolution | Visits |
---|---|
3840x2160 | 2 |
1920x1200 | 7 |
1920x1080 | 4 |
1440x900 | 1 |
1366x768 | 3 |
1280x1024 | 1 |
1280x800 | 5 |
1280x720 | 6 |
1024x768 | 32 |
768x1024 | 28 |
720x1280 | 25 |
480x800 | 10 |
412x732 | 17 |
320x480 | 9 |