Adapting to iPhone X: The Notch, Missing Home Button and More
As iOS developers, we’ve seen several changes in iPhone screen sizes that have caused us to change how we approach software development.
The first was the retina display on the iPhone 4. This required quite a bit of work from visual designers to make assets twice as big, but required less work from a development perspective.
The iPhone 5 was the first device that changed the aspect ratio from 4:3 to 16:9. This tended to be a smaller effort as most designs handled showing more information fairly gracefully.
The iPhone 6 and 6 Plus were a substantial update. We had to change our thinking from having static width and height to be able to support a device with a flexible width and height.
The iPhone X ushers in the next era of screen size that will affect how we approach software. The trademark notch, lack of home button and rounded corners are the main factors that need to be considered when designing for the iPhone X. Apple provides a good source of information here.
The safe area
Most of the work is taken care of as long as apps and websites stay within the safe area provided by iOS 11. The safe area is a set of margins that helps to avoid the rounded edges, the notch and the gesture area for returning to the home screen. Per usual, Apple gives developers and designers a pretty well-defined sandbox to play in, and going outside the sandbox comes with a warning of “thar be dragons.”
In portrait orientation, the top notch tends to not be too much of an issue. At the top of the screen, the navigation bar that contains the title and back buttons handles a majority of the complexity for apps and websites. However, hamburger menus may look a bit unusual as the slide-over actually slides under the notch giving a really unbalanced appearance.
When in landscape, the notch makes apps have quite a bit of padding to the left and the right of the screen.
This has looked so unusual so far that developers have taken to making concept videos of how to deal with the the notch:
Notch on the right:
Here’s what the notch would look like on the other side 🍷 #iphoneX https://t.co/2iOlZwr4BG pic.twitter.com/UBcewcYj1x
— Zev Eisenberg (@ZevEisenberg) September 14, 2017
Notch on the left:
I think I’ve fixed the notch issue in landscape 🍾 #iphoneX pic.twitter.com/hGytyO3DRV
— Vojta Stavik (@vojtastavik) September 13, 2017
Apple has a helpful video on their developer center where they actually take the WWDC app and update the code and design to support the iPhone X.
Websites also aren’t immune to browsing in landscape. Without some basic modifications, websites will have white bars on either side of their page.
Never fear, there are generally two simple approaches to fixing this problem. The first is to expand the mobile viewport to cover the entire screen.
Next, we can fix the overlapping content by adding some padding on the body of the document (yes, this is oversimplified) that adheres to the safe area.
There is quite a bit more that we will need to do to get our site looking great on the iPhone X. However, we now have all the tools we need to get there.
All the corners of iPhone X are rounded. This is one of the few devices that doesn’t have a square screen. Items that have been tucked in a corner could be clipped unexpectedly. Make sure that you really take the safe area into account or have enough padding and make sure you consider all four corners and all interface orientations.
The home button being gone at first blush shouldn’t cause any design or development issues. However, the home button was replaced with a swipe up gesture. If your app uses swipe gestures from the bottom of the screen – or if your website anchors “handy” buttons to the bottom of the screen – you’ll most likely run into compatibility issues with iPhone X. The simple solution is to make allowances for the safe area at the bottom of the screen.
You still have (some) time
The iPhone X starts to ship in early November but even when shipping begins, the iPhone X is widely expected to be supply constrained. The first step is to take an honest assessment of where your app or website is today. In order to take a look at how your digital properties handle the iPhone X, you can download Xcode 9 from the Mac App Store or contact us to help.
Published on 09/19/2017