Creative solutions from developers working with the iPhone X notch

Greg Barbosa | Sep 14 2017 - 1:59 pm PT

Earlier today, Ben Lovejoy noted the difficulty in finding positive reactions to the iPhone X’s “notch”. Many 9to5Mac readers have shared the same sentiment over the past few days. While the notch can introduce some annoyances in viewing video or photo content for consumers, it also presents challenges to iOS app developers.

Apple has released a new page to help developers prepare for the iPhone X. The portion of the guide that many developers will gravitate towards immediately is the Human Interface Guidelines.

Apple’s HIG includes sets of guidelines (not requirements) for designing software that best fits specific environments. With the iPhone X’s notch, referred to as sensor housing in the HIG, many developers may have to rethink some of their full screen applications.

From Apple’s Designing for iPhone X video, developers are told to take care of spacing constraints in both landscape and portrait orientations within their apps. The iPhone X’s sensor housing and home indicator area can interfere with some current app designs. In Apple’s HIG, the company clearly states:

Don’t mask or call special attention to key display features. Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.

Regardless of what Apple’s HIG indicates, many developers have gone on to create successful applications that don’t follow Apple’s suggestions. The visual limitations that the notch brings are where some developers have begun sharing creative “solutions” around the web.

Vojta Stavik jokingly shared one of the more interesting, if not visually distracting, examples of not embracing the notch.

I think I’ve fixed the notch issue in landscape 🍾 #iphoneX pic.twitter.com/hGytyO3DRV

— Vojta Stavik (@vojtastavik) September 13, 2017

Zev Eisenberg took it one step further by showing what the scroll indicator might look like

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

Alex Devarty shared a video of a solution that some developers may use. His example showed two different ways of handling the notch in landscape mode on the iPhone X. One where it shows the table view full width, thus calling attention to the notch. The other, adding a black fill in the space where the notch would normally be visible.

https://twitter.com/devarty/status/908172546973077504

Not all developers are finding ways to go around the notch completely. Some have already begun to adjust their apps to match the new phone’s design, and even embracing some of its more prominent features.

https://twitter.com/jamesthomson/status/907993950086189056

If this doesn’t make you want to spend $1,000 in November, I don’t know what will. pic.twitter.com/cpgDhQIcxq

— CARROT (@CARROT_app) September 13, 2017

A post by Edward Marks from 2011 showed that many developers were finding their own creative solutions within the status bar and iOS 4. Marks described that in using a black status bar and rounded corners, developers could “increase the usability of your iPhone application by bounding content and thus separating it from the viewport.”

Images: Edward Marks

We are starting to see examples being shared today on what that could mean on the iPhone X.

I think this is the best way to deal with the notch and massive corner radii. On an OLED screen these regions will completely blend in 👌 pic.twitter.com/yUgi0PmXe1

— Mike Rundle (@flyosity) September 14, 2017

Apps that embrace the notch on the new iPhone X look bad. Look better with a black background for the status bar. Quick comparison #iphonex pic.twitter.com/3o4bJQC4NB

— Carlos Gavina (@carlosgavina) September 12, 2017

Nico was quick to point out that even from Apple’s presentation, the Apple Music app is seen ignoring the notch. Though this may just be a side effect card-style interface design.

Apple: “don’t try to add a black bar to hide the notch”
Also Apple #AppleEvent #iPhoneX #embracethenotch pic.twitter.com/rHMMuWAEzd

— Nico (@nameghino) September 13, 2017

Web developers are also affected by the notch. Stephen Radford has dissected what the notch would mean for various pages around the web. Without additional code, many pages will default to displaying white bars on either side of content on the iPhone X. Radford discovered that by adding specific code to a site, developers could avoid the notch and fill the device’s full view.

: Before code change

: After code change

A preview of what 9to5Mac might look like when new code is added to account for the iPhone X’s notch.

Apple’s HIG makes it clear the company would prefer developers to continue developing apps as though the sensor housing is not even there. That is, until the moment that the sensor housing is in the way. In that case, they would rather have developers move valuable contextual content away from the sensor housing. This may require some developers to redesign their apps, but hopefully not need to go overboard with it.

Whether we want it or not, the notch is here, and we’ve even seen postulation that it will become the iPhone’s defining characteristic. In these early notch days there’s no doubt that developers will largely shape what the iPhone X experience will be in the year(s) to come.