dezembro 19, 2018
iPhone X devices started arriving for customers last week, heralding the biggest hardware change to the iPhone line since its inception. With edge-to-edge display—and the infamous “notch”—the new form factor offers challenges that need to be handled when updating your apps. We’ve been helping our clients update their apps to get them looking and working great with the new phone, and we thought we’d share some information with everyone on the steps you should take.
How bad is it?
The changes are pretty significant; you can still see them for yourself in the wild, as many high-profile apps have not been updated for iPhone X. Compare Google Maps, which hasn’t been updated, with Apple Maps:
- Google Maps vs. Apple Maps on iPhone X
Apple Maps takes advantage of the entire screen, whereas Google Maps is relegated to suffering an ugly letterbox treatment. Technically speaking, this is no bueno. Customers will notice this; it instantly makes your app look bad when compared to a competitor’s iPhone X-ready app.
Ok, so what do I have to do?
The amount of work needed depends on if your app uses stock iOS controls and auto layout. If it does, supporting the iPhone X could be as simple as linking against the iOS 11 SDK. If you are using custom controls—which most modern apps are—you’ll have some work to do.
Here are some things to think about when updating apps for iPhone X.
iPhone X Screen Size and Resolution
Screen size
The iPhone X features Apple’s biggest phone display to date, measuring 5.8 inches on the diagonal—even bigger than the display on the 5.5 inch iPhone 8 Plus. The removal of the Home button and minimized screen bezel enables this larger screen size to inhabit a physically smaller device; it feels closer to the 4.7 inch phones— iPhone 6, 6s, 7, and 8—than it does the Plus models.
And while iPhone X feels similar to the 4.7 inch iPhone models, there are 145 points more height-wise to play with. A good strategy for iPhone X success is taking advantage of the 20% taller screen with more relevant content, and allowing more breathing space around some of the more complicated interfaces.
Another thing to consider is iPhone X’s different aspect ratio. If your application features photos or video optimized for display on iPhone 6, 7, or 8, those will have to be reworked.
iPhone X UI Controls layout.
Layout
If you are not linking against iOS 11 and using the Safe Area Layout guides, chances are your UI controls will not end up properly spaced to the device edges. iPhone X’s top notch and rounded corners will clip or hide things that are normally fine on all other iPhone models, causing potentially major problems.
New larger navigation bars were introduced with iOS 11, and while not specific to iPhone X, you should definitely take advantage of them: the larger bars work well on the taller iPhone X, and come with animations that add a nice level of polish without requiring investment of time for custom development.
Finally, taller screens require special consideration when positioning buttons in a layout. Much has been written on this subject, but it suffices to say iPhone X’s height will require some consideration when optimizing the interface user experience.
To maximize the screen size, the iPhone X said “so long” to the Home button. As a result, the phone’s interface is almost entirely dependent on gestures. Summoning the App Switcher or going to Home screen is achieved by swiping up from the Home Indicator (the small bar near the bottom of the display). Reachability is now activated by swiping down on the Home Indicator.
This primarily gesture-based interface is a significant departure from prior devices, and you’d do well to infuse your app with these behaviours. Some user interface and user experience changes will be important, if not necessary, in order to stay current. However, be sure to not interfere with the system gestures, as that will most certainly frustrate your users. Keep user input and controls from the very bottom of the screen, as they may be inadvertently activated when the user attempts to go back home, switch apps, etc (or conversely accidentally interact with the indicator rather than the app UI controls).
Face ID
When it ushered out the Home button, iPhone X said “goodbye” to the finger scanner, so if your app makes use of Touch ID, you will now have to add support for Face ID. Also, be prepared to support both Touch ID and Face ID for the next several years, until you no longer need to support iPhone 8 (and earlier) models.
Summing it up
Almost all apps will need to be updated to support the iPhone X. How far your app deviates from the stock iOS controls will dictate how much work your app will need. If you need help freshening up your user interface or reworking your codebase, get in touch – we’d love to help.
Resources:
- Human Interface Guidelines iPhone X: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
- What’s New in iOS 11: https://developer.apple.com/ios/human-interface-guidelines/overview/whats-new/
- Building Apps for iPhone X video: https://developer.apple.com/videos/play/fall2017/201/
