Adapting to iPhone X: The Notch, Missing Home Button and More

Blog Iphone X V2

By Jon Rexeisen

Principal Software Engineer (iOS)

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.”

iPhone X vertical safe area
iPhone X horizontal safe area

The notch

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.

Contacts in iPhone X with notch
Contacts from iPhone X

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:

Notch on the left:

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.

Nerdery homepage with white gutters
Even The Nerdery isn’t immune to our white gutter overlords.

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.

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Nerdery homepage without gutters
No gutters, but not better.

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.

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

Nerdery homepage with padding
Gutters are now much better.

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.  

Rounded corners

Nerdery homepage rounded corners
Here our phone number is being clipped. Just in case, it’s (877) 664-6373.

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.

Home button

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.

Medium article with button covering page
The “Open in app” and the black handle overlap. Medium will have to move the button to obey the safe area. Or better yet, just remove that button. kthxbai.

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