Thoughts on the iPhone X and Web Design
Having spent a few weeks with an iPhone X now, I wanted to share some thoughts on how it’s impacting the ways that we design websites.
I’m not referring to Safari’s guidelines on edge-to-edge screen fitting, which are essentially a workaround for “the notch”, but the broader trends in play. And I should note that Apple did not pioneer many of these trends (see, for example, WebOS) but that is water under the bridge. What matters now is that Apple has a well-established record of setting consumer expectations. The introduction of the iPhone is largely responsible for driving adoption of the mobile web and later, the introduction of “retina” screens in 2010 drove a wave of demand for high resolution imagery and vector art. Likewise, the iPhone X coalesces and amplifies work in design systems that take advantage of the new wave of OLED screens, pervasive gesture-based interactions, and biometric authentication. None of these change the fundamentals of web design and development, but they do further open up areas worth exploring to future-proof websites and delight users.
The Screen
The iPhone X screen has a noticeably taller aspect ratio than earlier models. When lined up, the trend line is clear. The iPhone has been unmistakably moving towards a taller, narrower profile.
The height of the screen is now just over double the width (19.5:9). And it’s not alone. The Galaxy S8 and LG V30 have very similar aspect ratios (18.5:9 and 2:1 respectively). The industry as a whole is moving away from the heretofore standard 16:9 scale.
Have we reached the final conclusion of this evolution? Will the slimming trend continue or will the pendulum swing back? Will round-cornered rectangular internet communication devices soon be superseded by holographic projections? Who can say? In any case, what does this mean for websites?
Well, when it comes to images, aspect ratio matters a LOT, especially on devices that can rotate. A 16:9 hero image that covers the screen of a 1280x1024 pixel laptop is laughably puny on a 1125x2436 pixel iPhone X in portrait orientation.
So it is ever more critical to consider the rendering of large showcase-style images. One option is to plan to shoot or purchase photos with plenty of croppable space outside of the image’s focal point. A good example of this approach can be found in The Long Read, a collection of extended essays on theguardian.com.
Alternatively, the image can be padded with a specific color or pattern to flesh out the missing space. This can work well with illustrations or green-screened backdrops, but try to avoid it with rectangular photos. Full-bleed photos are positively gorgeous on an edge-to-edge OLED screen.
A third option is to replace it with a different photo entirely. This approach can be done with the picture element or CSS media queries as Apple does when showcasing the iPhone X.
Component-based design
Square or circular images are handled the most consistently across a wide range of device screens, since their aspect ratios do not change when rotated. The same is true for text and other web patterns. Text inside a square box is not going to reflow as significantly as a wide rectangle. All the more reason to rigorously test and tweak the display of asymmetrical components across different regions and viewport widths.
If the upper or lower end of media query on a component exhibits distortion, add another breakpoint and handle it appropriately. Breakpoints are for when things break. Those edge cases might be tucked away on today’s devices, but conspicuous on tomorrow’s.
Super Retina Resolution
Although the iPhone X is hardly the industry leader in pixels per inch, it is now Apple’s highest resolution phone at 458 ppi. It’s worth a reminder that older, pre-retina images are going to look even fuzzier on 2018 phones. There’s no better time than now to replace illustrations with scalable vector graphics where possible or provide multiple image sizes to support higher resolution raster images.
That said, with higher image resolution comes bigger file sizes. So, if there are more than a couple of images below the proverbial fold, it is especially worth the effort to lazy load them as the user scrolls down the page. This decreases the performance penalty and lightens the DOM, improving the user experience.
Pitch-perfect Black
I know this is kind of ridiculous, but possibly my favorite thing about the iPhone X screen is the black. Not only does it provide more battery efficiency, since black pixels on OLED screens don’t consume power, it looks exactly like the neighboring material. A black background blends right into the screen and gives the uncanny impression that lighter elements are printed directly onto the surface independently from each other, or ineffably escaping the screen. I have never been fond of inverted color schemes before but I’ve now come to prefer browsing Reddit’s night theme, because it just looks so damned awesome on the iPhone X.
Try viewing this animated gif on an LCD screen and see how the effect compares. Will this have a major impact on the way you design webpages? Probably not, but it might be worth playing around with the seamless backgrounds and helping to conserve battery life in certain scenarios.
Gesture-based Interfaces
After the notch, the next most apparent change from previous iPhones is the missing home button. This is a significant removal, given its singular prominence on the iPhone. Not only is the the home button a distinguishing feature of Apple devices, it is often used as a iconic representation of all mobile devices.
Parting ways with the dedicated home button, an iPhone X user soon must learn a new navigation paradigm based entirely on gestures. Instead of pressing the button to return to the home screen, you swipe up from the bottom of the screen. This motion blends fluidly into the gesture to invoke the app switcher. This interaction is easier than double-tapping the home button, which feels clunky now. With a little practice, I’ve come to find this movement delightful, like I’m an ace Vegas poker dealer, smoothly distributing a deck of cards.
This has a similar effect that keyboard shortcuts can have for power users on a desktop computer. By keeping your fingers in place over the home row on your keyboard and not constantly reaching for the arrow keys and mouse, you can achieve higher levels of efficiency. Web browsers settled on a set of keyboard shortcuts years ago. Although the distance is smaller, repositioning your hand to double-press the home button and then repositioning it again to swipe through the app switcher does require several extra movements.
The upshot of this gesture-oriented interface is that swiping has been elevated to the preferred navigation paradigm and tapping a small touch target feels like a tedious fallback. It is natural for this paradigm to extend to web user interfaces. Many gestures have been around without much fanfare for years, such as carousels that rotate with a swipe. But users will begin to subconsciously register some design elements like close buttons for modals to feel increasingly dated and fiddly. I’ve been very satisfied with the Photoswipe JavaScript library because it provides gesture-based control over image galleries, notably including a gesture to pinch to close.
Easy Authentication
Now that I’ve grown accustomed to Face ID for unlocking my phone, I yearn for the day when this feature is available everywhere. With a single tap, glance and swipe, I can slip through two layers of authentication and review my latest banking transactions in Mint. There’s something magically effortless about the experience, and I am a proud password monger. A high bar has been raised for authentication user experiences in general.
Face ID is not perfect, it doesn’t work when I’m lying down. But it’s better than the alternatives. To my surprise, it even works while jogging, when my sweaty fingertips would inevitably fail Touch ID and a passcode is too difficult to enter without standing still.
Unfortunately, we have no idea if a website API for biometrics is anywhere on Apple’s horizon. In the meantime, web developers will need to make do as best they can. Currently, “passwordless” email-based authentication and piggybacking on social media logins with OAuth are a couple of options, but neither of these are in the same league as Face ID. Site visitors are going to grow even more impatient and dissatisfied with complicated password policies, despite the fact that strong credentials are more important than ever.
Evergreen Design
Despite rumors to the contrary, there is solid demand for the iPhone X. This weekend, Samsung is launching the Galaxy S9, which by all accounts will push the trends forward in 2018 models. The industry is moving at a steady clip. Instead of building websites primarily for compatibility with yesterday’s browsers, we now have the means to design for devices that do not yet even exist. The iPhone X is just an opening salvo.
* Power user tip: instead of repositioning your mouse pointer and clicking on the browser address bar, use command or control-l (lower-case L) and save yourself a few minutes every day.
This article was originally published by Aaron Manire on our Isovera blog.
