What Does the iPhone X Mean for Web Browsing?

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

Uhmmm…

"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.


Subscribe to the blog

Join my email list and receive dispatches from the blog automatically. New subscribers receive a FREE $50 hosting credit at DigitalOcean.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.