The notch

At the top of the screen, app developers have to contend with the notch and the status bar. The status bar no longer changes height based on different background tasks, like location services or incoming calls. But it’s taller than the old one in any case. Apps can still hide the status bar and seize that top space, but they have to contend with the rounded corners and of course, the notch.

Most of the developers I spoke with said the notch didn't give them any trouble. "I think the notch encourages the newer iOS 11 styling, with the super tall nav bar and chunky titles," Basecamp designer Tara Mann told Ars. "The notch looks nicer with more negative space around it."

Avoiding the sensor housing also involved adhering to the Safe Area and following Apple's design advice. For apps that rely on Apple's Auto Layout standard practices, the previously mentioned extension of background material takes care of the problem even if navigation buttons are pinned to the edges. But games almost always have custom UIs, so if it's a problem for anyone, it's a problem for game developers and designers. That said, Cash said Alto's Adventure wasn't much affected.

Designing with the new sensor array in mind was simple. Alto's Adventure can render its world at any aspect ratio, and the sensor housing doesn't interfere with gameplay critical elements (such as Alto himself) or obstacles of immediate concern. Once we dialed in our overscan values so the UI could keep itself away from the edges, things were looking good.

By contrast, White said Agent A had to make some changes. In fact, the in-game UI had to be restructured. "In Agent A we use an inventory dock for when players collect items; this inventory was anchored to the edge of the screen along with a few other UI buttons," he explained. "To adhere to the new guidelines, we had to rethink our layouts a bit and ended up simplifying a lot of it in order to comply."

He said the team had been wanting to simplify the interface anyway, so they were glad to have this nudge.

In order to adhere to the new iPhone X guidelines, which include safe zones and margins around the edges for all UI, we needed to rethink our layouts which relied heavily on anchoring to edges. One key improvement was the implementation of a back gesture as opposed to a button. This was something we noticed was very popular in user testing due to its intuitive nature and allowed us to remove the button from the layout. An added benefit of decluttering Agent A's game UI is that we’ve allowed the beautiful art to stand out without the distraction of intrusive UI buttons. The new iPhone X guidelines challenged us to rethink our UX and as a result has led to a better and more beautiful gaming experience.

Practical consequences aside, I asked every dev we spoke to what they thought of the fact that there's a vocal group of users and critics who mock the notch or even go so far as to call it bad design. Cash said that his studio doesn't share critics' concerns, instead they see deliberate design thinking behind Apple's choice. "Face ID needs a forward facing surface, but it conflicts with the goal of the screen being the entire surface of the device," he said. "Design is compromise, and I think this a fine one."

As a designer, Mann also framed it as a reasonable compromise:

The notch does not bother me at all. Of course the phone would be nicer without it, but its presence does not hinder my use of the X. Transitioning in and out of apps is the only time it is really highlighted, as screens pop out under it when you’re moving around the OS. I'd much rather have Face ID now than have to wait three years for notchless Face ID.

So despite some comment thread and social media angst, by and large the developers and designers Ars heard from all seemed unfazed by the notch.

Dealing with the aspect-ratio change

Apple doesn't want apps to have black bars in letterbox or pillarbox in apps except with certain video content where the aspect ratio obviously can't be changed. But how do apps designed for the iPhone X appear on the iPhone 8, and vice versa?

If developers stick to a very by-the-book use of Auto Layout and the Safe Area with no custom layout at all, apps can be easy to update. In many cases, background material is extended at the top and the bottom, based on the visual style already used there. This automatically puts any buttons that were at the bottom above that extension and clear of the home indicator. This image illustrates what I'm talking about.

There are some additional considerations if background graphics are used. Background graphics designed for iPhone 8 will be cropped on the left and right if they’re scaled to fill or on the top if they’re scaled to fit. Apple recommends including background graphics that match the iPhone X's display, though. In this case, the asset will either be cropped at the top and bottom on the iPhone 8, or, worse yet, pillarboxed. That would leave black bars on either side of the app in iPhone 8.

Obviously, that’s not preferable, especially given that the iPhone 8’s LCD display can’t make those bars completely black and flush with the device, and it’s smaller to boot. Apple thus recommends that designers compose images so critical UI elements and visuals only appear in the area that would survive a crop down to iPhone 8.

Yak & co

Yak & co

For Agent A, White and the rest of the team working on the game had to make some changes to accommodate the taller screen. The game is played in landscape mode, and a few of the scenes in the game didn't fill the iPhone X's whole screen as they were originally framed. "We adjusted about 10 of our scenes to stretch out and fill the space that the new resolution created," he said. Fortunately, "about 95 percent of Agent A is 3D with a lot of 3D disguised in a 2D style," so White said it was only a 30-minute jump that just involved scaling a few meshes.

Basecamp

Basecamp

Snowman

Snowman

Snowman accidentally broke Alto's Adventure on older devices in the transition, but the problem was more complicated than just putting UI elements in the wrong places. As Cash explained:

The root issue was an incorrect overscan value being calculated on 32-bit devices. Alto's Adventure uses Unity, so we have to bridge values from Objective-C to C# when using UIKit. The -[UIView safeAreaInsets] message returns a UIEdgeInsets structure. This structure is defined in UIKit as 4 `CGFloat`s. `CGFloat`s are `float` on 32-bit devices but `double` on 64-bit devices. The equivalent C# structure was always expecting `double`. Oops!

The team quickly fixed the issue in an update.