The latest and largest phone from Apple, the iPhone 6 Plus, undoubtedly impacts responsive web design, but perhaps not in the ways you would expect. Apple follows an “evolution not revolution” design pattern and I believe a similar approach can be applied to web design. The iPhone 6 Plus doesn't introduce new challenges, but the ubiquity of the new model will help transform today's best practices into tomorrow's minimum requirements. Here are three tips to keep your website in top form.
Be Responsive; Not Adaptive
For seven years the iPhone's web browser has reported a portrait viewport width of 320 pixels. The iPhone's market share made “320” synonymous with “mobile.” Many websites have one layout designed for desktops, and skip all the way down to 320 pixels before applying a different layout which is optimized for smaller screens. This approach is typically referred to as traditional adaptive design.
The new iPhone 6 Plus pulls the rug from under web designers' feet by reporting a portrait viewport width of 414 pixels. This means when the latest iPhone visits certain “adaptive” websites it will be considered too large for the mobile optimized layout and instead receive the desktop layout. Ouch!
Many high profile websites still use this flavor of adaptive design. A quick fix would be to bump their mobile breakpoint up from 320 pixels to 480 pixels but this approach misses the point entirely. What happens when the next iPhone is released with a 487px, 513px, or 621px portrait viewport width? What about the myriad of Android smartphones and tablets that use all sorts of different viewport sizes, but don't boast market shares that command their own unique adaptive layout?
The most “future-proof” solution is to fully embrace responsive design. Frameworks like Bootstrap have done wonders for popularizing fully fluid layouts on viewports under 768px wide, but there are still projects that need updating, and teams that need convincing. The iPhone 6 Plus is a wake up call for corporate teams and decision makers to stop designing for ultra-specific device sizes, and instead focus on making content flexible and easily consumable on any screen.
Don't Ignore the Landscape
The iPhone has historically been a portrait first device with landscape usage reserved for very specific tasks (e.g., watching cats on YouTube squeeze into small boxes). Apple is borrowing from the amorphous nature of the iPad, and encouraging iPhone 6 Plus users to hold their smartphones in either orientation in more apps than ever before.
Naturally, websites will want to accommodate the new surge in landscape usage. It is not typically necessary for websites (not web apps) to draw a line in the sand for portrait and landscape views. If a website is fully responsive (instead of adaptive) it can reflow content to fill the landscape viewport (736px wide for the iPhone 6 Plus).
Web apps are a different beast entirely and often require a set of fixed position icons and actions to remain visible no matter where users scroll. In these situations you may want to consider a unique layout for mobile landscape screens. However, the iPhone 6 Plus doesn't require new or special HTML or CSS techniques and this is more about matching the paradigm that users are bringing over from native iOS apps. Orientation based media queries are a breeze to configure in ResponsiveJS and they let your users flip between two unique and equally optimized views.
Upgrade your Graphics
In 2011 the iPhone 4's Retina Display pushed many designers into an existential crisis because a pixel was no longer a pixel: the iPhone 4 had a portrait width of 640 physical pixels even though its iOS browser only reported 320 reference pixels. Since then we've grown accustomed to including 2x graphic assets in our web projects. This means if we wanted to display a full width photograph on a 2009 smartphone a 320px wide png would suffice, but the 2011 Retina Display would require a 640px wide png to look its crispest.
For the first time since 2011 Apple has increased the pixel density of the iPhone with the 6 Plus which packs a whopping 401 PPI. This means you will need to include yet another set of even higher resolution raster graphic assets for web projects. Effectively juggling your many image size variations just became more critical. Unfortunately, as of today native browser support for responsive images is hovering around only 40%. The ResponsiveJS Image Optimizer was created to address the problem that other 60% leaves us. You can try it out here.
It should go without saying that at 401 PPI you should consider vector graphics wherever applicable. If an icon or logo consists of line art consider including it as a SVG file and use Modernizr classes to serve up a raster fallback for the ~13% of devices that refuse to play along. As always, icon fonts and canvas art are also encouraged!
iPhone 6 Plus Optimized?
So, what do you call a website that is fluidly responsive, respects the device's current orientation, and sends appropriately sized graphics? I call that a well crafted website, but that won't get me many kudos with the folks in marketing so let's go with “iPhone 6 Plus optimized.”
The newest iPhone should elevate our industry's minimum requirements for responsive design and that means all users of all devices will benefit. We work hard to keep ResponsiveJS aligned with continually evolving best practices and the iPhone 6 Plus is another amazing opportunity to keep moving forward.
If you have any questions about your website and a new device we'd love to hear from you!