Designing For The Notch

Since its release in 2017 the notch has forced many designers to change the way they create for the web. Whether we like it or not, the notch is here to stay and we have to adapt to it. With the recent iOS update changing the way Safari looks it's more important than ever. In this article we will talk about what we know about designing for the notch and how you can implement it.

The "Safe Area"

When Apple wanted to create a screen that covers the entire face of the phone they created a huge headache for the designer community: the notch. Thankfully, they also introduced the safe area. Basically, it constrains websites to a set area and puts white bars on the edges. This makes for some akward cases. The fix, however, is easy. Just make sure to add a background-color on the body. Alternatively, expand the website into the whole area (conveniently ignoring the notch) by adding the viewport-fit=cover to your viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Example of bad notch design (top left) vs good notch design (bottom right)

What happens though is that content will also get under the notch and in other places you don't want it to be, like right against the screen's borders.

Some CSS to help you do this has also been implemented in accordance with the safe area. The Mozilla Web Docs document that there are four environment variables (env()) to help us put our content in the right place. They can be used with margin, padding or absolute position values such as top.

The following example demonstrates both the env() variables and the way they should be used with fallback values.

body { 
  padding-top: env(safe-area-inset-top, 20px);
  padding-right: env(safe-area-inset-right, 20px);
  padding-bottom: env(safe-area-inset-bottom, 20px);
  padding-left: env(safe-area-inset-left, 20px);
}

TIP: note that for iOS versions below 11.2 constant() was favoured over the standardized env().

Apple Web Apps

We also noticed that when users add a website to their home screen (thus adding an icon) the website will not stretch to the full screen by default. A simple fix for this is adding the right meta tags: apple-mobile-web-app-capable & apple-mobile-web-app-status-bar-style.

The following example demonstrates the usage of the Apple Web App meta tags:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
// Options for styling: default, black, black-translucent

Example of not using the Apple meta tags (top right) vs using the Apple meta tags (bottom left)

TIP: when designing for an Apple Web App we can target only those (thus excluding Safari) by using some JavaScript.

if (("standalone" in window.navigator) && window.navigator.standalone) {
  // do something, e.g. adding a class
}

It's here to stay, so let's adapt

Many designers didn't expect the notch to amass the fanbase it has and certainly did not expect other vendors like Samsung & Huawei to follow suit. Against all odds it survived and is now here to stay, so we must adapt. Thankfully, the web has embraced a standardized env() variable to design for the notch. The only thing left to say is now cheers to more screen!