Designing Responsive Webpages for the iPhone X

Thiruvenkadam
Sep 13, 2017 · 3 min read

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.

Image for post
Image for post
iPhone X Notch.

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

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.

Image for post
Image for post
iPhone X Optimized Page — https://thepeachstudio.com/iphone-x

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 🙋

Peach Studio

Niche, high quality content around Tech, Startups and…

Thiruvenkadam

Written by

All things product and design.

Peach Studio

Niche, high quality content around Tech, Startups and Engineering. We help build functional web and mobile products, with laser-sharp focus on design and usability. Have an idea? 🙋 Talk to us - hello@thepeachstudio.com

Thiruvenkadam

Written by

All things product and design.

Peach Studio

Niche, high quality content around Tech, Startups and Engineering. We help build functional web and mobile products, with laser-sharp focus on design and usability. Have an idea? 🙋 Talk to us - hello@thepeachstudio.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store