When Apple moved to iPhone 4 and iPhone 5, there were tremendous constraints that Apple wisely overcame to determine exactly how it made its phones with higher resolution and then larger (taller). How?
With the iPhone 4, Apple exactly doubled the resolution, leading to a 2x “Retina” resolution. And with the iPhone 5, Apple kept the pixel density (pixels per inch) the same, but just extended the screen size vertically, to create a 16:9 screen ratio.
This resulted in a great user experience, as well as minimizing the efforts for developers and UI designers.
Now Apple is coming out with two much larger iPhone 6 models, reportedly 4.7” and 5.5”. Many pundits are saying these phones will need to be 1.x Retina resolution or the phones need to have the same pixels-per-inch as the iPhone 5S. But Apple isn’t constrained by the same circumstances as before. There are two things that have changed in the past 5 years that mean that Apple can make these new iPhone 6’s any resolution they want:
- The flat look of iOS 7
- Auto Layout for developers
Wait, what?! Allow me to explain.
For anyone running iOS 7 now, it may be hard to imagine how different iOS 1 through iOS 6 looked compared to iOS 7. Look at the graphic at the top of this blog post. That’s the iBooks app. The image on the left is from iOS 6; the image on the right is from iOS 7.
When the iPhone 4 came out, it was running iOS 4. It had what’s called a “skeuomorphic” look—the buttons and controls and backgrounds tried to simulate real life objects, like physical buttons, books, and bookcases. That resulted in apps having lots and lots of graphics in them. The book case background, the shelves, the ribbed “New” ribbon—all of these are pixel-perfect renditions that are perfectly optimized for the exact size and shape of an iPhone.
So when Apple wanted to create the iPhone 4 with a much higher resolution, they had to deal with the problem of all these pixel-perfect graphics in their apps and the million+ apps in the App Store. Apple came up with a brilliant solution: Make the phone *exactly* double the resolution.
The 2x (Retina) iPhone solved all these problems. Old apps would run just fine and be exactly the right size, they would just be scaled up by 2x—they might appear a little blurry compared to apps specifically designed for the new screen, but they’d look OK and work fine 100% of the time. Likewise, UX designers wouldn’t have any extra work, since everything is proportionally the same size, so no interaction patterns needed to change. The only extra work for UI designers was exporting graphics in exactly 2x resolution, and that’s as simple as a Photoshop script. And, finally, it was easy for developers. By following Apple’s “@2x” naming convention for graphics, none of their code would have to change.
It was brilliant—and necessary. So that’s why the iPhone 4 Retina screen was exactly 2x the resolution of previous iPhones. It solved many problems for users, UX and UI designers, and developers.
So what about the only other iPhone size change: the iPhone 5 series (5, 5S, and 5C)?
In that case, Apple wanted to make the screen taller, so it would be in a 16:9 aspect ratio. This would give more room to all apps, and it would make video play more naturally, since most modern video is 16:9.
How could Apple make the screen taller without screwing up apps again? Apple kept the pixels-per-inch the same as previous phones, they just extended the screen vertically to make it 16:9.
This solved many problems: existing apps would run just fine, they’d just be letter-boxed with black bars at the top and bottom. Again the size of buttons and controls would be exactly the same, so UX designers wouldn’t have to worry about stretched buttons or controls; they’d just have some extra screen space at the bottom where they might add more content or a toolbar. UI designers would have nothing to worry about since the graphics are all the same size (except maybe a taller background image). And developers would have little to worry about except maybe the extra content or toolbar the UX designer would add. Another problem brilliantly solved by Apple.
So now, we’re up to the iPhone 6 4.7” and 5.5” models. What constraints does Apple have now?
It’s important to note that the 2x scaling used in the iPhone 4 is less relevant now. It was important then because of the sheer numbers of graphics, backgrounds, and button images that developers used (including Apple). With iOS 7’s flat, undecorated look, there are virtually no images in apps, anymore, other than maybe for a tab bar and a few toolbar icons. So that point is pretty much moot.
The other limitation (for developers) back in the days of iOS 4 and the iPhone was that laying out an app was painstaking work that required pixel perfect precision. Apple’s developer tools such as Interface Builder in Xcode had crude tools for dealing with layout changes. But as of iOS 6 and Xcode 4, Apple introduced Auto Layout which makes app dimension changes much easier to deal with.
Conclusion? There is much less need for screens that are exact doublings (or 1.5x) of existing screen sizes. The limitations that Apple had for the iPhone 4 and iPhone 5 simply don’t exist—because iOS 7’s flat look and Xcode’s Auto Layout mean there isn’t much additional work for developers.
In my next blog post, I’ll explain exactly what dimensions I’m expecting for the new iPhone 6’s.
Pingback: Why the iPhone 6’s will be Probably be This Screen Size | Lou Miranda