How to better prepare our apps for iPhone X?

4 min readOct 12, 2017

iPhone X will soon be released in three weeks. For our mobile designers, now is the perfect timing to understand the new changes coming from iPhone X and prepare our apps for this biggest change on iPhone in years. Below are 7 tips I summarized from my research on the new iPhone X that hopefully help us better prepare our apps for iPhone X.

1. Remember the new screen size

In portrait orientation, the width of the display on iPhone X (375pt) remains the same. It is a great news because it means we could continue to use whatever designs we have so far. The height of the display on iPhone X (812pt), however, is 145pt taller than a 4.7” display. This additional height provides 20% more space for contents. Essentially, even if we count into the new taller header style that comes in iOS 11, still more contents can be displayed on one screen without scrolling on iPhone X. It provides more space for our apps to shine!

2. Use auto layout

Most iOS standard UI elements like navigation bars, tables, and collections automatically adapt to the device’s dimensions using auto layout. It could save us a tremendous amount of time on customizing the UI elements to fit different screen sizes, which is why we should already use it. But in case you haven’t, now is a great time to pick it up to save time and effort. The reason is, with the introduction of iPhone X (and probably the following new iPhones), a new screen size is added to the family, with a taller status bar at the top, and a dedicated space at the bottom reserved for the home indicator, which makes manually layout adjustments more tedious than it used to be. By using auto layout, the safe area will adjust for all iPhones, including iPhone X.

3. Keep in mind that home indicator doesn’t react to tapping gesture

Here user could tap on the cell “Display & Brightness” to drill-in directly, regardless if the appearance of the home indicator.

Tapping the bottom edge of the display will only affect your app or game. For example, tapping a table row cell has the same result whether or not it’s behind the indicator. Vertically scrollable views, such as tables or collection views, should extend all the way to the bottom of the display rather than being constrained by the Safe Area.

4. Use dynamically position content

On iPhone X, status bar no longer changes height. But the default height is taller than that on other iPhones. Because of this, the status bar will occupy a larger space compared to the one on iOS 10. We shouldn’t give our app’s contents a fixed position relative to the top because it could be covered by the new status bar. Instead, we should use dynamically position content, which will adjust automatically based on the status bar.

5. You could hide the home indicator when full-screen display is preferred for better user experience.

You can enable an auto-hide behavior when presenting full screen visual content. Auto-hide causes the indicator to fade out if the display hasn’t been touched for a few seconds and fade back in when the display is touched.

6. Use caution when enabling edge protection

iOS allows us to prevent user from accidentally exiting the app by enabling edge protection, which will require two swipes to exit the app, instead of one. But there should be sufficient reasons to backup this decision because user will be frustrated by the extra step to exit the app.