What Does the iPhone X Mean for Web Browsing?

Posted by Stephen Petrey on Saturday, September 16, 2017

This is fine right?

iPhone X renders webpages with literal white bars on the sides pic.twitter.com/ztcWetrLPo

— Thomas Fuchs (@thomasfuchs) September 13, 2017


"The notch was a good idea" —Apple fanboys, 2017

I present to you Exhibit A pic.twitter.com/HzQLwBrbDC

— @jedmund (@jedmund) September 12, 2017

I mean as hilarious as these hot-takes are, just how serious is Apple taking this heat? Well, in their documentation they have clearly defined safe-areas to lock-in content in our familiar-yet-safe rectangle we're fond of.

A safe-area example and Auto Layout grid columns.

I think designers are going to have to get creative to deal with this. Thankfully app designers can look to web design for inspiration. Lots of wonderful solutions are just waiting to be discovered.

Apple apparently has some yet-to-be-released Safari documentation about how to handle full-width designs as their Apple TV 4K seems to take advantage of this. Check it out:

Apparently there is a way to set the background color, e.g. the Apple TV 4K page does it. pic.twitter.com/Am3xn6wjRp

— Thomas Fuchs (@thomasfuchs) September 13, 2017

I have a feeling that it's just the background-color of the document body, but we'll find out sooner than later. I think this is a real challenge, but in the beginning it's going to be a bit rough out there. I'm going to do a deep-dive into the Human Interface Guidelines and documentation next.


Leave a Comment