The iPhone 6 and 6 Plus are packed full of updates both in hardware and software through the launch of iOS8. The most obvious and significant update is the size. The iPhone is now available in a 4.7″ version and a 5.5″ alternative. So how will this affect the mobile viewing of your website? Well, lets take a closer look. It isn’t just the size of the screen, the real innovation is under the hood though higher contrast, wider viewing angles and greater pixel density. In other words, Apple has made a pretty drastic resolution increase for iPhone 6 and iPhone 6 Plus compared to previous models.
This raised a question for many businesses running a responsive design website…
How will the iPhone 6 & 6 Plus resolution increase affect responsive design?
You will be happy to know that as long as your website is properly responsive there will be no change at all.
When designing a responsive website you design it to be flexible so the website will automatically adapt from desktop, tablet and smartphone to provide the user with the best viewing experience. When creating a responsive layout we don’t generally design for specific screen sizes. When done properly, your site should be able to fluidly adjust to any screen width from a desktop all the way down to an iPhone 4 or earlier. Let’s not forget about non-Apple devises. Samsung, Nokia and Google and others all make smartphones with larger resolutions than the iPhone 5 and responsive coding when done correctly can scale up to accommodate these sizes.
If your website currently functions fine in a responsive format on most smartphone displays now, it’s going to work fine on iPhone 6 & iPhone 6 Plus. That said, you’ll still want to make sure you’re sticking to responsive design best practices.
Although responsive design is not normally created for specific layout sizes, app developers may find it useful to know the various devise width in pixels. To the best of my knowledge you will be looking at something like:
iPhone 6: 375px (portrait), 667px (landscape)
iPhone 6 Plus: 414 (portrait), 736px (landscape)