+ Learn: Choosing Responsive Breakpoints

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.

Screen Resolution Report from Google Analytics

In this case, it could be appropriate to create a responsive breakpoint at 480px and implement a new design for those smaller screens.

Practice: Consider Appropriate Breakpoints

Given the site statistics below, which breakpoints might be appropriate for a new design?

Resolution Visits
3840x21602
1920x12007
1920x10804
1440x9001
1366x7683
1280x10241
1280x8005
1280x7206
1024x76832
768x102428
720x128025
480x80010
412x73217
320x4809