It’s widely accepted that truly responsive design has breakpoints that fit the site content not the device. However, there are still sites and frameworks that use device-focused breakpoints to handle their responsiveness with the most common being 1024, 768, 480, and 320. With iOS 9 comes a new wrinkle into this method thus separating the “responsive” sites from the responsive.
Let’s look at how a website using those default breakpoints would be viewed on an iPad running iOS 9. The iPad’s default viewports are 1024 for Landscape and 768 for Portrait. So that poses no conflict. However, let’s say you’re user is comparing two tattoo artists’ portfolios and wants to look at them side by side using the new iOS 9 split screen feature.
In Portrait, the primary window will be scaled to 438 while the secondary window will be shelved to the right at 320. The secondary window scales conveniently to the standard iPhone width while the primary window now hits a breakpoint grey area sitting well above the 320 min-width but slightly under 480.
Using the iPad in Landscape creates even more no-man’s-land viewports. Splitting the two windows will half the viewport resulting in both windows having a width of 507. While shelving a window creates a primary width of 694 and a secondary of 320 again. While the 507 widths should be handled pretty closely with the standard 480 breakpoint, the new 694 sits in that unfamiliar range well above 480 but a bit below 768 which can create a less-than-deal experience.
Using an iPad Pro creates similar grey areas with its default widths being 1024 and 1366 in Portrait and Landscape, respectively. In Portrait, shelving a window sets the primary width to 639 and the secondary window to 375, or an iPhone 6S Plus. While in Landscape, splitting sets both windows to 678 while shelving creates primary and secondarys width of 981 and 375. The new grey areas created by this functionality, while seemingly minor, could be enough to hinder a user experience.
Of course, much of this is moot since the users will also have the ability to slide the window splits manually. Yikes!
More than ever now, responsive design should not be defined by a set of device-focused breakpoints. For an optimal and truly responsive experience, the breakpoints should be defined by the content and design of the site itself.
iPad Pro Split Screen Viewports for iOS 9
- Portrait: 1024
- Portrait Primary shelf: 639
- Portrait Secondary Shelf: 375
- Landscape: 1366
- Landscape Split: 678
- Landscape Primary Shelf: 981
- Landscape Secondary Shelf: 375
iPad Split Screen Viewports for iOS 9
- Portrait: 768
- Portrait Primary Shelf: 438
- Portrait Secondary Shelf: 320
- Landscape: 1024
- Landscape Split: 507
- Landscape Primary Shelf: 694
- Landscape Secondary Shelf: 320
Values gathered using this Pen