What responsive breakpoints should we build for?

We make a case that the best responsive breakpoints are 360px for mobile, 768px for tablet and 1366px for the desktop


responsive digital devices image

The question we try to evaluate regularly is “What are the appropriate responsive breakpoints given the rapidly evolving landscape of phones, tablets, laptops and desktops?” It is common practice to design sites for three responsive breakpoints: mobile, tablet and desktop — for reasons of time and budget. While frameworks such as bootstrap offers multiple breakpoints (Link) it is not feasible — on live projects — to build and optimize for all of these. Timelines and budgets don’t permit it.

So, if we are constrained to looking at three responsive breakpoints, what should they be and how does one go about deciding? If it is a site refresh, usually the client provides sufficient information from their web analytics to make a determination. A sample chart is below:

A google analytics report that shows what kind of devices users are using when they visit your site.

This article however looks at new site builds and considers generic ways of coming to an answer. The responsive breakpoints that we recommend building to these days are 360px for mobile, 768px for tablet and 1366px for desktop.

Mobile Responsive Breakpoint

Why 360px for mobile? Considering the iPhone device distribution below, it is safe to say that designing for the iPhone 6 and beyond captures 80% of the market.

pie chart of iphone market share

Ref: https://david-smith.org/iosversionstats/

And if we look at the viewport sizes for iPhone 6 and above, it is easy to decide that the lowest size should be 375px.

breakdown of UIKit sizes for iphones

Ref: Link

So why do then we settle on 360px? For that, we have to look at the Android devices, primarily Samsung and Google.

breakdown of viewport size for various android phones

Ref: https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

As can be seen, most of the Samsung Galaxy phones come in at 360px while the Google phones are at 412px. That is why we recommend setting the mobile breakpoint at 360px. Another good way to summarize is to look at the global viewport statistics for mobile devices:

global viewport statistics in graph for mobile phones

A key trend to notice here is that 360 while still dominant is reducing in market share while 375 is inching up.

Tablet Responsive Breakpoint

Selecting 768px for the tablet is a much simpler decision. If we look at the Apple market penetration, it is around 75%. So optimizing the tablet experience for the iPad is a good decision.

viewport graph for tablets from apple and samsung

Ref: http://gs.statcounter.com/vendor-market-share/tablet

The viewport sizes for the iPads that comprise the majority of the majority are shown below:


ipad viewport breakdown

Ref: https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

It is pretty safe to set the tablet breakpoint at 768 going by these numbers. Another way to summarize is to look at the global market share of tablets by viewport size:

viewport breakdown in graph based on pixels

Ref: http://gs.statcounter.com/screen-resolution-stats/tablet/worldwide

Desktop Responsive Breakpoint

The desktop viewport market share is much more fragmented than that of the tablets or mobile devices. The chart below shows the distribution:

graph of pixel viewport for desktops

Ref: http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide

The range from 1366 – 1920 captures more than 80% of the market share. Based on our experience with site design elements, we feel that 1366 is better to peg as the desktop breakpoint. Otherwise it leaves a huge gap between the tablet and desktop breakpoints where the design could falter.

You can also check out our post on techniques for efficiently testing responsive behavior.

Related Insights

Component Design in a Headless CMS

We discuss how to implement component-based design in a Headless CMS platform (VuePress)

Ani Mahant

CMS Trends

Building websites with a Headless CMS and Modern Javascript Frameworks

We explore three big trends: Headless CMS, Reactive Frameworks and Component-Based Design. We build the page in Gatsby, the component in React and do content modeling in Prismic.

Vasi Eswar

CMS Trends

Three criteria for selecting the right enterprise CMS

With so many choices, how do you select the right CMS? We identify three criteria.

Vinod Pabba

CMS Trends

Subscribe to our newsletter