Does Your Website Pass the iPhone 6 Responsive Test?
Update: Want to learn how to make your website responsive? Be sure to read part two of this blog, How to Build a Responsive Website, for best practices.
The iPhone 6s is officially out and in people’s hands!
You know what that means: there are two new screen sizes and resolutions that your website needs to account for. Does your website pass the iPhone 6 responsive test? Will your website media be displayed correctly on these great new displays? As screen details change with new web-capable technologies, many of our clients come to us asking about screen sizes and how they can ensure that their website will give users successful experiences, regardless of the device being used.
After overhearing a discussion between some of WDG’s developers over lunch, I spent some time with one of our teammates, Doug, and asked for his insight on how the new iPhones would affect the future of current (already responsive) websites.
Will the iPhone 6 negatively impact the user experience of websites already out there?
If your site is fully responsive/adaptive, you shouldn’t be worried about specifically accounting for the new iPhone’s screens. By design, responsive websites target particular screen sizes–not devices – so any new phone will correctly show your website as long as it is above the minimum width your site was developed for. Since the new iPhones (and mobile devices in general) are getting larger, it’s safe to say that if your website worked on the iPhone 4 or iPhone 5, it will work for the iPhone 6 and 6 Plus.
What are the dimensions for the new iPhone 6 screens?
The next iPhone will come in two sizes: the 4.7 inch iPhone 6 will have a physical resolution of 750px by 1334px, while the 5.5 inch iPhone 6 Plus will have a physical resolution of 1080px by 1920px. Of course, like all high DPI mobile devices, the *reported* width or CSS width is much smaller. According to the latest information available, the CSS dimensions of the two new iPhones will be 375px by 667px and 414px by 736px, respectively (source: http://screensiz.es).
But what about breakpoints?
A maximum portrait CSS device width of 414px would surely fit into any reasonable mobile breakpoint (provided the mobile breakpoint wasn’t specifically designed for iPhone 3/4/5). Landscape iPhone 6 or 6 Plus *may* begin to trigger your tablet layouts, however, depending on your breakpoint. Is this a bad thing? Not likely. A good responsive design will be functional and cohesive at all sizes in between breakpoints, so the extra screen real-estate will actually be put to good use in landscape as “small tablet.”
And what about the images on the website? Are those safe?
The iPhone 6 Plus breaks into new territory for Apple devices with a *reported* device pixel ratio of 3 (mathematically, it’s 2.4). This signals a preference for extra high resolution images 3 times the size they are displayed on the screen. The iPhone 6 Plus joins more than a few phones available today that are capable of putting those extra pixels to good use, but as always, you must balance the extra size with page load and performance goals. And of course all your vector (.svg) graphics will continue to look crisp on every resolution — this is still the preferred method of handling icons and simple graphics.
For the developers out there, what about User Agent-sniffing?
The horror! Undoubtedly, you will need to update your configuration files to support the new user agent strings returned from the new iPhones. But if your mobile website still relies on browser sniffing, you’re probably due for a redesigned website anyways.
In a nutshell, if your brand’s website was built with full responsiveness in mind, you’re golden when it comes to how users can view and interact with your website on their brand new iPhones. Of course, if you’re still curious about any potential impact from new web-capable technology–or maybe it’s time for your website to undergo an audit and consultation–reach out to us and learn how we can make your website responsive for iPhone 6, and a range of other devices.