The heart of the iPhone X’s pitch is third-party apps. From augmented reality features to the TrueDepth sensor, the new features are meant to stir creativity and action in the developer community, bringing innovative new app experiences to iPhone X users. But even as Apple gives developers new toys to play with, it also has to make sure it doesn’t break their old ones.
iPhone X review: Early adopting the future
The iPhone X is the most significant change to the iPhone in several years. It has a higher resolution and a different screen shape. It disposes of the home button and adds or changes touch gestures. Every one of those changes could create work for designers and developers… and then there’s the notch. You can expect more phones to do this, not just from Apple. But how do you design around it? How much work is it to adapt an app for it? Is it, as some critics say, bad design?
To find out, I spoke with designers and developers of apps and games for iOS who recently went through the process of updating their apps for the iPhone X. I wanted to ask some of these very questions, but by and large I wanted to hear how the transition to the new phone went for everyone working behind the scenes.
The apps from developers we interviewed
A bump in resolution
Let’s start by looking at the changes and challenges presented by a differently sized and shaped screen and how Apple recommends coping with them. Because iOS runs on devices at a variety of resolutions, Apple and developers on the platform measure their user interfaces in “points” rather than pixels—which is a very common concept in design, anyway. The iPhone X’s display has the same width in points as the iPhone 7 and 8 (375 points), but it is 145 points taller. The fact that the iPhone X shares its width with the regular iPhones and not the Plus models is why it doesn’t support the expanded landscape mode interfaces that you get on the Plus.
iOS apps also need to support displaying assets at multiple resolutions to look sharp at each device’s screen resolution; the signifiers @1x, @2x, or @3x are used for the three tiers of resolution for assets. Apple recommends producing assets as PDFs because they are resolution independent. If rasterized images are also needed, they currently must be offered in both @2x or @3x, which previously correlated to the standard-sized modern iPhones with retina displays and the Plus models, respectively. The iPhone X uses @3x.
Every developer I spoke with said they didn’t have any trouble with assets looking good on the new screen. Phillippe Levieux, co-founder behind photo editing app infltr, even enjoyed the new approach:
We are using vector assets inside infltr, they are PDFs. We didn’t have to make any changes for the iPhone X. This way of working is incredible. You only need one PDF asset that will be compiled into @1x, @2x, @3x.
Yak & Co Art Director Mark White (known for the adventure game Agent A) said his team weathered the asset transition well, and he framed it as a lesson that you should always expect the unexpected and implement accordingly. “We made the conscious effort early on to design things in a very flexible way because you really just can’t predict what kind of resolutions or screen shapes we’ll be running in the future,” he said.
But resolution has changed on the iPhone before without major event. The iPhone X makes three additional changes that developers haven’t had to contend with before. The corners are rounded, whereas other iPhones have had corners with right angles. There’s the controversial notch—Apple calls it the sensor housing—an intrusion of the camera and other hardware into the middle of the top of the screen. And finally, there’s also a new indicator in the UI that is ever present at the bottom of the screen.
The home indicator
iPhone apps used to have the entire screen to themselves most of the time—the only exceptions were the status bar and notifications—but that’s no longer the case. They have to cede real estate to the notch at the top and the home indicator at the bottom.
Apple already offered a set of rules and tools called Auto Layout to help iOS developers avoid potential pitfalls with using blocked-off real estate on prior iOS devices. The company describes it this way:
Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. For example, you can constrain a button so that it is horizontally centered with an Image view and so that the button’s top edge always remains 8 points below the image’s bottom. If the image view’s size or position changes, the button’s position automatically adjusts to match.
For developers who were already leaning primarily on Auto Layout, the transition to the iPhone X is much simpler than it is for those relying mostly on custom layouts. “My app uses Auto Layout for most of its drawing code,” said Galley Foods engineering head Chris Anderson. “So I only had to do minimal work to fit my app to the new dimensions. You recompile with iOS 11, sprinkle some ‘if iOS 11’ statements to pin your app to the new Apple-provide safe layout guide, and that got me most of the way to the finish line.”
Apple added a new aspect to Auto Layout called the Safe Area in iOS 11. Based on the Safe Area, developers should confine content and critical UI elements to parts of the screen where they wouldn’t be blocked or interfered with by the hardware or system software. For other iPhones, the Safe Area was essentially the entire viewport. On the iPhone X, though, it’s more complicated. In portrait mode, the Safe Area blocks off part of the top of the viewpoint and part of the bottom. The top is to accommodate the status bar and the sensor housing, while the bottom gives a wide berth to the home indicator.
iOS 11, thoroughly reviewed