Designing Responsive Webpages for the iPhone X
Less than 24 hours ago, Apple unveiled the iPhone X. Along with it came a little new bar that sits happily in the bottom bezel that invokes nostalgic feelings about the physical home button. (10 long years, RIP! 💀)
The black notch on the top houses some of the most sophisticated sensors and cutting-edge infrared + illuminator technology — all of which are used for enabling Face ID.
This would also mean watching videos to playing games, we’re going to be constantly witnessing the black notch occupying its real estate at the top of the 1000$ device — though over time, this might get easy on the eye. Apple’s done a lot of changes across hardware, software and iOS interactions to accommodate this and Safari’s rendering of websites is one of those.
Webpage Rendering on iPhone X
Landscape
The iPhone X, in landscape mode, renders webpages with white bars on the sides. Apple’s own website is rendered with these white bars, though a lot of sections have individual colored backgrounds.
The only way you can make your page more immsersive is by setting an appropriate background color to your mobile webpage - a color that aligns with the color scheme of your brand/website works in most cases.
body {
background-color:#676767;
}
However, sections on the same page with different background colors, gradients or patterns still will show the chosen body background color on both sides.
Portrait
When the phone’s being held in Portrait orientation (which is the most popular behaviour), there are no white strips on either sides as the viewport runs through all the edges.
In the portrait mode, the iPhone X oozes its screen all around. It is immersive and the viewport runs seamlessly across the rounded corners on all 4 sides.
Also, the status and URL/nav bars take up the defined background color of the webpage.
This is similar to Chrome on Android rendering the theme-color meta tag to take the webpage’s primary color all across the status bar.
<meta name="theme-color" content="#676767">The portrait orientation opens up new real estate to push brand colors and is a small step towards bridging the gap between progressive web apps and native app. On the flipside, landscape webpage rendering on Safari has a few knots tied to it and would be interesting to see how this evolves with time.
With new guidelines being designed around the Notch, Apple is emphasising iOS developers to not hide the device’s rounded corners or add black patches around the notch in their apps.
Extended reading for iOS Devs: Dealing with the Home Indicator on iPhone X, How iOS apps adapt to the iPhone X’s screen size and Human Interface Guidelines for iPhone X
/co-authored by Krishna Murari 🙌
Thanks for reading through. If you found this post useful, please applaud using the 👏 button and share it through your circles.
Peach Studio helps build functional web 💻 and mobile 📱 products, with laser-sharp focus on design and usability. Have an idea? Get in touch 🙋
