Embracing the Notch by Keeping it Safe

Design and development with the iPhone X in mind

The iPhone X introduced a whole new paradigm to iOS. Between edge to edge display, an absent home button, Face ID, and a whole host of additional features, the iPhone X is like nothing Apple has ever made. There’s a catch though: with a whole new paradigm comes a whole new set of issues for developers.

 Bezel-less?

When Apple announced the iPhone X, they touted it as Bezel-less and having an edge-to-edge display. While technically true, this fundamentally clashes with the reality of using the iPhone X. Simply put, not all pixels are created equal. Think of the “ears” of the notch as part of the phone’s bezel, but one that we can control and use (instead of just letting it sit idle).

Beware the Corners

When designing for iPhone X, several considerations must be taken. In particular, designers and developers need to be careful with full-screen content. On the iPhone X, full-screen content may be obscured by the corners, the sensor housing, and the home indicator. So, when designing for iPhone X, keep in mind that while full-width buttons still work well, they will need to have rounded corners and reside entirely within the safe area (which has slightly smaller width than the screen). Additionally, the aspect ratio of iPhone X varies from that of other iPhones. This means letterboxing (or cropping) will occur if you reuse full-screen art from other devices. Therefore, in order to fully embrace the notch, you will need to recreate the problematic assets to be suitable for iPhone X

Use the “Safe Zone”

Apple’s API acknowledges that not all iPhone X pixels are created equal and offers tools to determine which areas of the screen are safe to place content on, and which aren’t. Apple’s API provides a method called safeAreaLayoutGuide: a set of constraints used to adjust the content of your layout. Typically, developers use the Safe Area Layout Guide to adjust autolayout constraints. Here’s a basic example, courtesy of UseYourLoaf.com:

When we setup constraints using the Safe Area Layout Guide, we ensure the app won’t be cropped by any portion of the display, including the notch. Thus, fully embracing the notch in iOS development means fully embracing the Safe Area Layout Guide.

Keeping it Safe

Apple has made it as easy as possible to use the Safe Area Layout Guide in your app. They want you to use it! The guide is available in the storyboard editor, so if you create most of your interface constraints in Storyboard (like I do), it’s as easy as creating any other constraint in Interface Builder (IB). The guides are also backwards compatible—meaning you can create your app in the latest version of Xcode, built using the latest version of the SDK, but target an earlier version of iOS, and the layouts will work perfectly—even on the older versions of iOS. In short, there’s no reason NOT to embrace the Safe Area Layout Guide as you develop for iOS, but every reason to embrace the notch itself. It’s here to stay.
Embracing the Notch requires updating your app to take advantage of the latest Apple technologies. At Anexinet, we pride ourselves on being on the bleeding edge of Mobile Development, for both the consumer and enterprise markets. If you need help developing, testing or supporting a mobile application, please reach out to Anexinet. Whether you’re targeting customers or employees, we’d love to help design, build and maintain your next transformative mobile app.

Further Reading

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
https://useyourloaf.com/blog/safe-area-layout-guide/
https://www.cnet.com/news/why-google-makes-android-phone-notches-now/