Spoiler Alert: It’s highly likely.
Let’s say you released an iOS app in the last couple of years. If you released an app for the original iPhone up to the iPhone 3GS, you probably know what it’s like to have updated that app to look nice on the Retina display iPhone 4 and what it was like to update your app again for the taller iPhone 5 screen.
Updating to use exactly twice as many pixels, easy. A few more pixels in height, no problem. Different heights for screen elements, depending on the device, and downsampling instead of exactly three times as many pixels… OK, this may take a minute.
Here at DineEngine, we’ve been designing and developing Android and iOS apps for several years now, so we’re used to adapting to the needs of ever larger and sharper displays that come with every new generation of mobile devices. Designing for Android devices has nearly always required adapting to an incredibly wide variety of screen sizes and densities, but Apple’s iOS devices have traditionally been much simpler. The release of the iPhone 6 and iPhone 6 Plus changes this.
Let’s take a quick look at the iPhone display (in pixels) timeline:
June 29, 2007 – The original iPhone is released with a 480×320 display. This resolution, and 3:2 aspect ratio, remains through the release of the iPhone 3G in 2008 and the iPhone 3GS in 2009.
June 24, 2010 – The iPhone 4 retains the original 3:2 aspect ratio, but it’s new Retina display precisely doubles the resolution to 960×640 for sharper graphics with pixels that are barely visible to the human eye. By default, apps designed for the original display are automatically scaled up for this new resolution, but look blurry until app developers release updated apps. Developers now provide two sets of graphic assets; One for the original display and a 2X version for the new display. This display remains through the release of the iPhone 4s in 2011.
September 21, 2012 – This time, the iPhone 5 retains the previous Retina pixel density, but lengthens the display to a 16:9 aspect ratio. Developers continue including 1X and 2X graphics, but adapt their layouts to take advantage of the additional space. This display remains through the release of the iPhone 5s and 5c in 2013.
September 19, 2014 – For the first time, Apple releases two different sizes of iPhone. They retain the same 16:9 aspect ratio, but the 4.7 inch iPhone 6 has a 1334×750 display and the 5.5 inch iPhone 6 Plus has a 1920×1080 display, which has some interesting implications.
First of all, Apple introduces 3x graphics for the iPhone 6 Plus. As with the iPhone 4, these new larger iPhones will automatically scale up existing apps. The new scaling engine is smoother than that seen on the original Retina screens, but you’ll want to create your apps with 3x graphics to keep your app looking sharp.
The iPhone 6 Plus doesn’t directly display those 3x graphics though. It actually downscales from 2280×1242 to 1920×1080. This means your pixel perfect design is no longer precise, but, unlike with scaling up, it’s highly unlikely anyone will ever notice, due to the impressive pixel density of this phone (401 PPI).
Finally, not all elements on the iPhone 6 Plus scale evenly. Simply letting your app scale up automatically won’t look quite right, even if it doesn’t look fuzzy, because the status bar is going to be out of proportion compared to apps that have been updated with the iPhone 6 Plus in mind.
Do you need to put the breaks on your app and make these updates right now? Probably not, but if your users are updating to the new iPhones, you’ll want to give them the best experience possible before your competitors do.