Categories: Developers / iOS / Mobile Apps
It’s an exciting time for mobile app designers. Apple has just announced the latest in the iPhone family: the iPhone X. With edge-to-edge screen display, the X is about as minimalist as it gets. Gone are the white bands at the top and bottom of the screen. Gone is the home button. All that remains of these earlier designs is the “notch”, a top-of-screen black bar housing the phone’s camera.
With its new screen dimensions and functionality – including the infrared tech that scans your face to unlock your phone – the iPhone X is going to require some extra consideration from developers.
Let’s take a look at what we’ll need to bear in mind when developing or updating apps for the iPhone X.
The iPhone X has 20% extra vertical space
While the iPhone X is the same width as its previous few predecessors, it’s substantially taller. In portrait orientation its screen features an additional 145pt – or 20% extra screen space. Apple’s developer notes recommend providing high-res images of all artwork. Keep these resolution-independent for vector artwork, and provide multiple versions at different dimensions for rasterized images. Apple also advises against trying to hide the screen’s rounded corners, top-screen notch or Home indicator. You can, however, go bold with color, as the iPhone X supports a P3 color space, going way beyond standard RGB.
Watch out for the iPhone X notch, mobile app designers
App with standard UI elements will dynamically adapt to the iPhone X’s new dimensions. Items at the top of the screen, such as the time, connectivity and battery features, will automatically shift around the notch. If your app uses custom elements, be sure to test for any strange behavior. Check that your design stretches all the way to the edge of the screen, and that nothing gets clipped. Mobile app designers can get around the risk of clipping by insetting essential content according to the UIKit’s “safe area”. The notch will create an irregular margin when in landscape mode, so watch out for this.
Don’t place controls at the bottom of the screen
The iPhone X doesn’t have a home button. To return to the home screen, users need to use swipe gestures at the bottom of the display. Clearly, you don’t want your app’s control mechanisms to interrupt these essential mechanisms. If you must auto-hide the Home indicator, do it sparingly. Similarly, if your app uses screen-edge gestures, make sure that they don’t interfere with system-level actions.
Don’t reference things that aren’t there
The look of the iPhone X isn’t all that’s different. The X uses Face ID, not Touch ID for authentication. Mobile app designers will need to reference the right authentication method across different devices. The keyboard has also had an upgrade – and that includes custom keyboards. Make sure that any custom keyboards take into account the X’s new keyboard standards.
While the new-look iPhone X has met with some criticism, it’s a brave new world for screen-based design. The days of rounded corners are upon us again, but they’ve been taken up a notch.