When Apple release a new product, it’s imperative for us in the activation space to take into consideration how the OS updates affect our end users. Features like URL previews over SMS, or the iPhone’s inability to preview animated GIFs inside Photos.app means we need to build systems that enables brand souvenirs and marketing content to effectively reach their audiences.
It also means we need to take heed of Apple’s design guidelines where appropriate, and adjust our web design approach accordingly. Apple’s guidelines don’t always align with our clients’ brand guidelines, so it’s important that we balance each device’s best practice in a way that ensures our clients’ brands continue to take centre stage.
The Notch and web design
We won’t delve into the myriad pros and cons of ‘The Notch’, but it has a few impacts on the way user’s experience web sites, and consequently how designers and developers should approach their construction. Just in case you’re wondering what ‘The Notch’ is, it’s this black bar at the top of the iPhone X that houses the phone’s TrueDepth camera and facial recognition system.
To accommodate the iPhone’s top notch, Apple encourages designers to allow backgrounds to wrap around the notch (into the top corners), as opposed to masking it off with another solid black bar or UI element:
Don’t mask or call special attention to key display features. Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.
Same goes for the swipe indicator that lives at the bottom of the screen. This is a horizontal line with rounded tips, designed to encourage users to swipe upwards in order to reveal the Control Center.
So, what happens if an element in your design slides underneath the notch? Well, much like we allow for title-safe areas in TVCs, it’s advisable to allow for title-safe areas in our web/app designs. It’s common sense not to place key interactive elements, such as buttons or links, in areas that may trigger native events (such as opening the Control Center).
Probably the most unattractive impact of the notch is revealed when placing the phone into landscape orientation. On Safari, it appears that webpages will be enveloped by white bars. It appears that this is tweakable to an extent by the <body> background, but admittedly it feels a little hacky.
iPhone X renders webpages with literal white bars on the sides pic.twitter.com/ztcWetrLPo
— Thomas Fuchs 🦕 (@thomasfuchs) September 13, 2017
One of the most exciting things about iOS 11 and the iPhone 8/X is the implementation of ARKit. It’s an inbuilt AR framework that developers can use to build around. For iOS devices lacking the iPhone X’s TrueDepth camera, some difficulties might arise. If you’re looking to have a play in your iPhone 7, update your OS to iOS 11 and download the IKEA Place app. It’s a great example of what’s possible, and given it’s pretty speedy turnaround time, appears to have made the most of the ARKit framework.
While AR use cases are endless, and ideas a dime a dozen, what it means for us as creative technologists is that we can quickly tap into an existing, well-supported, well-distributed framework in order to bring our ideas to life.