iPhone X – Website Design Embracing the Notch

Apple’s latest release the iPhone X has a notch because a portion at the top of its screen has been given to the sensor housing. As a result, the illuminated surface of the phone no longer forms a rectangle; instead, a head with horns when held in a vertical orientation as seen on the image below.

iphone x website design

As you can see, our content is being overlapped by the notch and coming uncomfortably close to the rounded corners.

Apple has confirmed that websites that choose not to remedy their site to best fit the iPhone X will see the “empty” or a insert area. This will now feature on each side of the web page when viewed horizontally to automatically.

Solution? A new CSS rule

We then move onto a new CSS function that Apple calls constant() and the CSS Working Group calls env(), and two other new CSS functions called min() and max() that Apple plans to support in a future Safari Technology Preview release. With these functions comes addition pre-defined contstants:four additional pre-defined constants: safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. The purpose of these constants is to define the size of the safe areas around a page.

padding-left: constant(safe-area-inset-left);

As you can see in the image above a simple safe area of padding will produce a safe area to the left of the website which accounts for the housing. Web developers and Designers can use these safe areas to make sure that content won’t be obscured by the sensor housing, home indicator, or rounded corners.

It was confirmed that current websites layout will appear fine on the iPhone X from the start because content is automatically placed in a safe area safe from being obscured by the sensor housing.But to make full use of the screen up to and around the notch these CSS changes are suggested

These CSS changes are not technically challenging, and pretty simple for the normal website developer however it can prove to be significant work for more complex site layouts and bespoke animated designs.

Trackback from your site.

Leave a comment