April 10, 2015
  |   Blog, WEM / WCM

Why Your Tablet Breakpoint is Wrong

Mobile device usage is growing, fast.  In the U.S., mobile devices account for approximately 60% of digital media time as of 2014. Further, it’s ever changing so some previous responsive design assumptions like available screen space and resolution are no longer valid.  Let’s assume you already have a mobile-first, responsive website in place.  You likely have an experience for mobile devices because they have touch capabilities, and an experience for laptop/desktop devices because they have a mouse available.  Great!  But have you tested your responsive site on high-resolution mobile devices recently?  Chances are, some visitors may not be seeing what you think they are.
Below on the left is an example of the mobile view we expect, with a minimal menu bar and easily readable text for a small screen.  Working as intended.
On the right, we have a device with the same exact screen size in inches, but it looks more like our desktop breakpoint, with no header menu and smaller, multiple column text.  Why is that?
Well, originally the thought behind some forms of responsive design was that the smaller the device, the lower the amount of pixels available to display content.  This resulted in simplistic media queries such as:
@media (max-width: 768px) {}
@media (max-width: 480px) {}
These queries intend to target tablet and mobile devices respectively, but alone are not enough because pixels do not take into account the physical size or capabilities of the device.  The reason pixels are not an accurate representation of screen size is because now more than ever, devices vary in how many pixels there are per inch.  Older phones tend to have a low pixel count (iPhone 3GS – 320px) whereas newer, high-resolution phones have a higher one (iPhone 6 – 750px) as screen technology improves.
The iPhone 6 for example uses the higher 750 px resolution.  Is this hitting tablet breakpoint as on the right image?  Wouldn’t this also cause other problems with pixel based css such as font size and positioning?  Not necessarily, mobile device manufacturers have attempted to solve these issues by including what’s called a device pixel ratio.  On the iPhone 6, this pixel ratio is 2, which downscales the actual pixel resolution 750px to a smaller, logical pixel resolution of 375px used by media queries, font sizes, and other pixel-based css.  This is used to great benefit on most phone and tablet devices including Android and Windows phones.
The problem highlighted in the right image can still (and does) occur if the device pixel ratio does not scale the logical resolution to our expected breakpoint range.  Even the original iPad (1024px) has a resolution above 768px while in landscape view.  Simply upping the tablet breakpoint to 1024px or higher isn’t going to fix this issue either.  Some newer tablet devices such as the Kindle Fire HDX 8’9” in portrait have a 1600px logical resolution.
Which breakpoints should we use then?  If we can’t trust pixel ratio, how do we distinguish tablet touch devices from non-touch devices?  According to CSS3, we can’t and shouldn’t.  CSS breakpoints should be representative of available screen space, rather than an indicator for device type.  We should stop thinking of it as styling a “desktop” experience so much as a large screen space experience.  As of now, logical pixel resolution is still a site’s best estimate of available screen space. Experiment, find natural breaks in the content as the viewing window size changes and use those as breakpoints.
I’m personally partial to 480px (common phone logical max) and 960px (common content area size) as breakpoints but it’s arbitrary, new devices will break existing resolution conventions.
Does that mean a desktop experience needs to be fully touch-device friendly since they have the possibility of sharing a breakpoint?  Actually no.  That’s one way to solve the issue, but then we lose desktop features like hover and keyboard input without an input field.  There are other determinants out there for enabling a great desktop-tailored experience.
Be on the lookout for future blogs covering some of these determinants:

  • How javascript breakpoints can be an effective determinant for a touch vs desktop experience
  • Delivering sharper content for high-resolution devices using device-pixel-ratio media queries

Subscribe to Our Newsletter

Get the latest insights from Blue Acorn iCi

Let's build something together.