Pixel-perfect screen designs have been a trademark of native iOS development from day one. A tradition that with the introduction of new iPhone screen sizes may have to give way to adaptive screen design across the platform. Native iOS developers tend to cater to specific devices mores than mobile web and Android developers. But when the number of variances in screen sizes gets out of control, all you can do is gravitate more towards an adaptive or responsive approach in your app’s design. Prior to the iPhone 6, there have been very few screen size differences to contend with in the iOS world compared to Android.
It is the iPhone 4S that is irregular, not the iPhone 6 Plus
When looking at the screen dimensions for each of the different iPhone models supported by iOS 8, only the iPhone 4S supports a 3:2 aspect ratio. The iPhone 5, 5C, 5S as well as the new iPhone 6 and the iPhone 6 Plus all support a 16:9 aspect ratio. Moving from the iPhone 4 to the iPhone 5, [company]Apple[/company] kept the pixel width of the different screens constant at 640. It was the pixel height that changed from 960 to 1136, which transitioned the iPhone from a 3:2 ratio to 16:9. With the iPhone 6 and the iPhone 6 Plus, both the width and the height changed keeping the aspect ratio fixed at 16:9 across all iOS 8 supported iPhones, except the iPhone 4S.
The shorter dimensions of the iPhone 4S compared to the other iOS 8 supported iPhones makes it more difficult to support when it comes to screen design. Simply put, designs don’t scale well when crossing over to a different aspect ratio. But this is not a new challenge for iOS developers to contend with; this has been a part of iOS 7 development all along. As a result, there are still some iOS 6 apps out there that do not conform to the 16:9 screen dimensions of the iPhone 5 and center themselves on the screen, leaving blank black bars of dead space across the top and bottom of the device.
The good news about the screen dimensions on both the iPhone 6 and 6 Plus is that all of the effort put into redesigning apps to take full advantage of the iPhone 5 screen size will, for the most part, scale nicely on both the iPhone 6 and the iPhone 6 Plus.
Designing screens specific to a device
Out of the gate, Apple has made every effort to keep apps that were specifically redesigned in iOS 7 for the iPhone 5, 5C and 5S to look as good as possible in iOS 8 on the iPhone 6 and 6 Plus. The auto-scaling capabilities built into iOS will look better than the letter-boxing effect app owners had to deal with as developers redesigned their screens from the 3:2 aspect ratio inherent to the iPhone 4 and 4S to the taller, more slender 16:9 ratio of the iPhone 5. Meaning, if you buy a device with a larger screen, you will actually get to use the larger screen.
That does not mean that similar to the “Designed for iPhone 5” app updates of 2012 and 2013 we will not start seeing “Designed for iPhone 6” updates to our favorite apps. There is more screen real-estate to potentially design for. In particular, icons, graphics and other UI elements will now need to support the @1x, @2x and the recently introduces @3x pixel sizes, otherwise things might start to look a bit blurry. Mostly iOS developers will have to learn to take advantage of some of the new Adaptive Layout features in iOS and keep their screen designs more flexible rather than pixel perfect. Designing apps that adapt will likely be the standard for apps targeting the iPhone 5 and iPhone 6 screen sizes, but the iPhone 6 Plus may prove to be a bit more of a challenge.
What is likely to prompt developers to redesign some of your favorite iPhone apps will be the changes introduced by the iPhone 6 Plus and its enhanced support for landscape mode. Many iPhone specific apps lock their orientation to portrait mode. You may have noticed that these particular apps do not rotate when you told your screen. This is primarily because in many scenarios on the iPhone, landscape mode just does not have enough space to design a decent app.
With the iPhone 6 Plus’s larger screen, Apple has started supporting the home screen in landscape mode as well as a more iPad-like split view for iPhone 6 Plus apps. This will likely require some major updates to customize the user experience on the iPhone 6 Plus, especially when designing app extensions. The time it will take to redesign portrait-only screen layouts of an iPhone only app could equal that of transition to a universal app that also supports the iPad.
So how does Android handle it?
While supporting a wider variety of screen sizes may be new to iPhone developers, it certainly is not new to Android developers. The latest information from Open Signal shows that as a platform, Android has become increasingly more fragmented each year when it comes to the number of manufactures, different devices, OS versions and variances in screen sizes. There were 18,796 distinct Android devices this year compared to 11,868 last year and only 3,997 in 2012. Keeping track of all of the different screen resolutions on Android can in itself be a full-time occupation.
An interesting dynamic that was added to Open Signal’s analysis of the fragmentation data this year was the discovery of a correlation between the market share of the top five devices in a give market segment and that country’s gross national product per capita (GDP/Capita). The data shows that the higher the GDP/Capita, the less fragmentation there is in that country. As an example, here in the U.S. the top five Android devices represent forty-five percent of the market. That drastically cuts down on the number of devices one has to consider supporting compared to Madagascar where the top five devices represent only eight percent of the overall Android market.
Apple may have just introduced a third category for asset densities within in an iPhone project (@3x), in contrast Android supports six generalized screen densities (dpi, mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi). The goal for Android developers is to achieve what is referred to as density independence, basically avoiding situations that make graphics, buttons and icons appear oversized on different screens. And that’s a situation that iPhone developers will now have to contend with.