The iPhone X is unlike its predecessors in size, design, and operating system. With this new form factor and the recent iOS 11 release, it’s an exciting time to be an iOS developer, but from the introduction of a taller screen, the “notch controversy,” and the removal of the home button, there are big implications for iPhone users and developers.

Visual Studio App Center is here to help. With our Test service, which provides cloud-hosted automated UI testing on real devices, across hundreds of hardware, operating system, and version configurations, you can start building and testing on the latest devices and operating system, without waiting for physical devices to arrive on your doorstep—but how?

To help you focus on tapping into the best new capabilities and getting awesome apps to your users, we’ve added 29 different iOS 11 device configurations to our automated testing device lab (iPhone X and iPhone 8/8 Plus). We have multiple devices for each configuration, so you can run your automated tests, receive test results as fast as possible, and release confident that your apps work well for all of your users, whether they’re on the newest device or earlier iOS models.

My colleague Benny Scholtysik covered some great iOS 11 and Xcode 9 development tips, so I’ll focus on my favorite (and most notable) iPhone X updates and what they mean for iOS developers everywhere.

Embracing the Notch

While the notch is the only thing that keeps the iPhone X from really having an edge-to-edge display, it’s worth noting that the notch more than doubles the height of the status bar, which is used as a hit zone to swipe down the Control Center on the right and the home screen from the middle and the left.

The bold design decision also houses the speaker and microphone, and goes hand-in-hand with the new FaceID feature, housing its required sensors and camera. In Apple’s Human Interface Guidelines, they advise developers to “embrace the notch” and integrate it into the UI to maximize screen real estate and consistency. While we saw a bit of grumbling after it was first introduced, developers are largely heeding Apple’s advice and adapting and releasing notch-optimized apps. Given this trend, we advise you to do the same.

Designing for a Taller, Rounded Screen (and Testing, Testing, Testing)

While the iPhone X’s screen width remains the same, its “Super Retina HD” OLED display is more than 20% taller than the 4.7” iPhone 6, 7, or 8. At 1125 x 2436 pixels (375 x 812 points), the iPhone X is the first iOS device @3x support without downsampling. This is good news, since it gives you more space for extra navigation or additional content, but there are a few caveats. You’ll need to use some of that space for the notification bar and home indicator and, since iPhone X’s rounded corners may cause content clipping in full-screen apps, design with care.

As a best practice, use the Safe Area Layout Guide (Apple Human Interface Guidelines) for text and images to avoid clipping in the corners or near the notch, while allowing your app backgrounds to continue to expand across the whole screen. Following the Safe Area Guide is even more critical for landscape mode, where nothing obstructs your content.

My advice is not to trust that your old apps will look as you (and your users) expect in iPhone X’s full-screen or landscape mode. Even when using Auto Layout, you should always test on a real device.*

*Note: this is my “always” advice, but it is important and helps ensure that you deliver a great experience, especially for your users on the latest OS and devices.

Learning How iOS 11 and iPhone X is Like Peanut Butter & Jelly

iOS 11 was designed to use the best of iPhone X’s hardware (or, in Apple terms: “A phone that’s all screen required an entirely rethought OS with new capabilities and gestures”), from FaceID and AirPower wireless charging to better Augmented Reality capabilities.

Screen size is one of the most obvious hardware changes and largely affects how you design your apps. With the new vertical real estate, iOS users see more white space, making your app UI feel lighter and less cluttered.

What to Know: Large semi-bold titles take up a lot of vertical space, but the title transitions into the Navigation bar whenever a user scrolls, freeing the space and allowing users to browse unobstructed. Not so fast, though. Phone orientation alters spacing; when users enter landscape mode, the title remains in the navigation bar (due to limited vertical space). An elegant solution and a pleasant UI, but make sure you (and your designers and fellow developers) create adaptable designs to deliver the best, consistent user experience.

Getting the Most Out of iOS 11 and iPhone X with App Center Test

The latest hardware and OS updates from Apple give you even more freedom to make your apps more intuitive, more accessible, and easier to navigate. However, the iPhone X, coupled with iOS 11’s new capabilities, brings an entirely different set of UI and behavioral scenarios that pose unique design and testing challenges.

Visual Studio App Center Test service has you covered, allowing you to run your UI tests on real devices, including iPhone X, iPhone 8, and iPhone 8 Plus, as well as 160+ older iPhone and iPad configurations, to quickly validate your UI and UX and make sure you’re moving high-quality code to production.

Getting Started

Getting started is simple: choose to run your UI test suite on-demand, or with every build, and we do the rest.

We’ll run your tests and return reports that you can act on immediately. You’ll see step-by-step screens of how your apps perform across devices, notifications for failed tests, and detailed stack traces, so you can identify, diagnose, and correct any UI or performance issues before they make it out to users.

Over to you. Log in to App Center, or sign up for free, and go forth, building iOS apps with confidence.