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