If you’re designing and building apps with the iPhone X in mind, you’re going to want to optimize for its many changes and troubleshoot some common problem areas. As a designer and front-end developer, I’ve now done more research on Apples’s latest phone than most iPhone X owners did before they made their purchase!
What are the significant changes to the iPhone X design?
I’ll guide you through these format changes, and how to troubleshoot them, when building for the X:
- The Notch (Sensor Housing) and Status Bar
- Rounded Corners
- Websites in landscape view
- Resolution
- Aspect Ratio
- Home Indicator and BottomBars.
We’ll look at how these new features cause problems, how to identify those problems, and I’ll share solutions and workarounds that you can start putting into practice on your own designs and apps.
The Notch and the Status Bar
The Status Bar styling has significantly changed on an iPhone X: it’s now 44 pt vs. the old 20 pt. The Navigation Bar sits under the Status Bar (as it does on other phones), but this will take up much more room with the new 44 pt Status Bar.
Apple asks that you never hide the status bar or reconsider any past decisions to do so, mainly because it occupies the top half of the screen (which is a good thing!), preventing overlap of your TopBar and the Notch.
Keep the safe area layout guidelines in mind when styling a Navigation Bar. Don’t style black bars at the top of the screen to hide the Notch, and don’t use the Notch as a UI element.
Rounded Corners
This new, sleek look with rounded corners that fill the entire surface of the phone may win some over, but it can also cause a huge headache for developers.
It’s very possible that your app won’t fill the screen with this new design. This is because the rounded corners and the new screen indicators may interfere with existing buttons or docked navs. A lot of apps have these features, but it’s good to keep this new format in mind when designing new apps.
Apple wants you to ensure that your layout fills the screen. Adhere to the safe area and layout margins defined by UIKit. The safe area also prevents content from underlapping the Status Bar, Navigation Bar, Toolbar, and Tab Bar. It’s important to make sure there is enough margin around the corners, so use a 16 pt margin between the corners and any buttons.
Websites in Landscape View
The iPhone X display forces a safe area padding in landscape view. This can create problems by adding white spaces on both sides of the app. Safe digital padding is a good thing: this way, your app won’t fall behind the Notch or the Home Indicator. So, be sure to adjust the app yourself to make it look good in all instances.
If your app is displaying large empty spaces on the left and right, check the safeguides. And below, I’ll show you a breakdown of the Viewport settings changes, along with new Viewport features and CSS functions that you can use.
Viewport Settings Overview:
The safe area is automatically set on content in Safari. The inset area is filled with the page’s background-color, which is specified on the <body> or <html> elements.
Full-width horizontal navigation bars can have some UI issues.
New Viewport Features
The viewport-fit meta tag
There’s a new meta tag called viewport-fit, which provides control over the safe area. The default value of viewport-fit is auto. In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. This is not a wise decision to disable the viewport settings, mainly because your content will be hidden by the Sensor Housing and Rounded Corners.
Example:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
If you do choose to change the viewport-fit value to cover, you’ll need to take additional steps to add extra padding in areas where it’s needed.
New CSS functions for padding: env()
To ensure your content fits in the safe area after defining viewport-fit=cover, there are some new CSS functions to easily make this possible. The function is called env( ). There are 4 pre-defined environment variables: safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom.
But always keep in mind to use fallback rules for browsers that don’t support env().
Example:
.post {
padding: 12px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
New CSS functions for padding: min() and max()
Since all of these new features pertain to landscape view only, what happens when you switch the view on your phone back to portrait? When you rotate back to portrait view, all of your env() padding functions will no longer work, but you will still need to add some padding for portrait view (so you won’t have the content flush left to the side of the screen).
You can wrap the min() and max() functions around your env() function, which will in turn allow you to adjust the padding for portrait view, too. When the screen is in landscape view, the min() and max() functions are overwritten by the env() function.
Example:
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}
Note that it’s important to use @supports to feature-detect min and max, because they are not supported everywhere. Also, the min() and max() functions will be available in a future Safari Technology Preview release, iow these are not available just yet.
Resolution
The iPhone X has a Super Retina Display of 2436 x 1125 resolution coming out to 458ppi. This means you will need to export your assets in Sketch at a higher pixel density from now on.
To create mockups for the iPhone X in Sketch or Adobe XD, your artboards should have a resolution of 375 X 812. You’ll have to export all assets at a higher density of @3x instead of @2x. When you’re developing modern apps, keep all bars in mind while designing mockups, including the Status Bar, TopBar (NavBars), TabBar (BottomBars) and space for the Home Indicator.
Aspect Ratio
The iPhone X has a 332 pt increase in height. With the new size of the iPhone X, content can end up being cropped or letterboxed. You may want to consider creating different assets for aspect ratios for different-sized phones if you do come across this problem.
Home Indicator & BottomBars
The Home Indicator takes place of the home button at the bottom of the screen. Be cautious when adding bottom navs or buttons close to the Home Indicator.
No more docking buttons at the bottom of the screen with the Home Indicator. Now, you need to take the BottomBar and TabBar padding into consideration because you don’t want the bottom elements to be too close to the Home Indicator. If you place any buttons too close to the Home Indicator, you’re going to frustrate your users with overlap and other unwanted results.
32-36 pt is a good distance to use between the bottom edges of the screen and the buttons you want to use. 44 pt is always going to be the corner radius of the screen. Apple advises to not hide the home indicator unless it’s absolutely necessary.
How to preview your app on an iPhone X
You can easily test your app using the Simulator or Browserstack, in case you don’t have a physical iPhone X handy. If you’re using the Simulator, make sure you download the latest version of Xcode 9 so you can test on an iPhone X.
The iPhone X is 20% larger in height than older phones, so it’s important to check everything out. Browserstack also has the iPhone X available to test on, which is always a great tool to use.
We're building an AI-powered Product Operations Cloud, leveraging AI in almost every aspect of the software delivery lifecycle. Want to test drive it with us? Join the ProdOps party at ProdOps.ai.