How designers cope with ever-changing iPhone screens
Your digital life would fall apart without this grid.
At its annual hardware event on Wednesday, Apple announced a trio of new phones: the iPhone XS and the iPhone XS Max and the iPhone XR, all of which tout fancy new screens, including the largest iPhone display to date. The promise of more screen real estate is exciting for users who want to see bigger pictures and videos, but it’s also new territory for designers to explore. That wasn’t always such an exciting proposition.
The dark ages of mobile design
In the early days of the mobile web, new phone unveilings often triggered hurried and hands-on recalibration of apps and websites to ensure they’d render properly on a screen with more pixels or wider screens. When the iPhone first launched, at a Steve Jobs-headlined Apple day in 2007, viewing a website in its mobile browser required a lot of pinching. Sites designed with a desktop in mind had strange image resolution, overlapping text, and wonky navigation bars when rendered on a handheld device. Worse, some sites wouldn’t render at all—especially those based on Adobe’s defunct Flash platform.
And the changes just kept coming. “As a designer, I only think in terms of width,” Currie says. While infinite scroll has rendered vertical space obsolete, “width is the precious resource,” he says. “If you’re doing something in German, you’re asking really fundamental questions like, will this word fit on the screen?” That means each new smartphone model—every millimeter change in an Android or additional pixel in an Apple—required a unique approach.
Developers initially responded by building different versions of the same website for every single device. A given company had a desktop website, a mobile website (or two), and perhaps even a tablet website. “That worked for maybe a year,” says Chad Currie, creative director for Slide UX, an Austin-based design firm. “But you hit a point where it just wasn’t feasible anymore; it was just too many devices.” Each version of a website took significant man hours and lots of money.
Early patchwork designs aged badly fast. “When mobile first became a thing, people were really treating it as a dumb, small device, which it really was,” says Chris Lilley of the World Wide Web Consortium, or W3C, “It was like, ‘Yeah, you’re looking on your phone, what do you expect?’” But as screens got better and mobile use skyrocketed, the balance for web designers and app builders shifted. They would either have to invest more in every version of a given website, or they’d have to find a way to simplify the development process.
Responsive design is born
The phrase “responsive design” was first coined in 2010 by Ethan Marcotte. Influenced by an architectural shift away from static blueprints to dynamic physical spaces, Marcotte proposed the following: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.” It was the essay read ’round the world.
In his initial proposal, Marcotte identified “three technical ingredients” for responsive frameworks. The media query function, already a part of CSS (the stylesheet language the Internet is based on), allowed developers to stack the same components in different ways to render well on every device. Three images might render side by side by side on a desktop, but they could be made to automatically render in a vertical row on mobile. So long as those images were flexible—sizing up or down, or even zooming in and out according to the size of the device—and arranged on a fluid grid with text and other components, Marcotte argued one site really could rule them all.
“It allowed for one set of styles to be defined for smaller screens, and another for larger screens. Media queries meant developers could group together a list of rules for devices under, say, 400 pixels. And they could have another group of rules for devices larger than that,” writes Jay Hoffman in his The History of the Web project. “Two designs. One codebase.”
Designing for your current device
“These days, it’s pretty uncommon—whatever framework someone uses—for people to be ‘hand-rolling’ their own responsive designs,” Currie says. Early solutions like the open source responsive framework Bootstrap, which generate responsive layouts according to a 12-item grid, already “feel pretty old,” he notes. CSS itself now offers responsive services, and features that once required hours of original work can be easily replicated across sites.
Even if something does go wrong in the rendering, Currie says, “companies like Apple, they built some fallbacks in there, so you don’t embarrass yourself.” Instagram, for example, refuses to build an iPad app in favor of a smartphone-only platform. For the wayward ‘grammer who chooses to download the mobile app on their tablet anyway, the app renders at mobile size in the center of the device. Four blocks of black automatically generate around its edges, to ensure the experience still fills the sizable iPad screen.
But surprises lurk around every corner. In 2017, the Essential Phone introduced a new obstacle around which designers had to maneuver: A notch. Though unobtrusive to users, who know it only as the home base for their front-facing cameras, the two protrusions of only semi-usable screen at the top of each device caught on. Apple’s best-selling iPhone X has an even wider to accommodate several cameras for its Face ID system, which create a big gap at the top of the screen.
“It’s built into the code base and the operating system that if the notch rolls out and you never update your device, it’ll still work, basically,” Currie says. The latest version of the Android operating system puts status icons for things like battery and service level in the space around the notch to make it useful, while leaving a typical rectangular box below. Still, the transition to a world full of notched devices wasn’t seamless. Popular apps like Amazon’s e-book reading Kindle app lagged months behind before they could take full advantage of the iPhone X’s oddly-shaped screen.
Responsive design may strive to be “everything to everyone”—and it increasingly is—but there are still some limitations. Currie’s company, Slide UX, used to design around a 320 pixel standard, roughly the size of the first iPhone. As phones on the market got bigger and bigger, Slide recently shifted to a 360 pixel minimum standard. “We’re OK with leaving those [older, smaller] devices behind,” he says. “We landed on [360 pixels] as our common denominator. If we can get it down to that size, we know that we can serve most devices.”