A List Apart

Menu
The A List Apart Blog Presents:

Apple and Responsive Design

by · · 26 Comments

Apple has always had a funny relationship with responsive design. They’ve only sparingly used media queries to make minor visual tweaks on important pages, like their current homepage.

Though a “handcrafted for all devices” approach seems like the “Apple way,” it’s almost as if they’ve avoided it because of the iPhone’s original pitch—giving users the ability to pinch and zoom their way through the “full” web, as opposed to being shuttled off to the mobile web.

Apple could afford that stubbornness when the only thing running iOS was the 3.5-inch iPhone. Over the past few years, though, they’ve introduced the 10-inch iPad, the 4-inch iPhone, the 7-inch iPad mini, and reports point to an even larger iPhone coming this fall.

The approach that Apple and their community of developers have taken to build apps for these new device sizes closely resembles the way we did it for the web over the last decade or so: adaptive first, then slowly building to responsive.

When the iPad was first announced, developers built separate View Controllers for iPhones and iPads—on the web, that’d be like building separate pages for each. Layouts, styles, and interactions were built to target each device specifically. This was an adaptive way of thinking, and it worked because of the limited number of targets.

With iOS 6, and the subsequent release of the taller iPhone 5, Apple introduced something called Auto Layout—a relationship-based layout engine. Unlike the iPad, which required a separate build, apps for the taller iPhone were the same build with layout adjustments applied. Auto Layout was Apple’s first true foray into responsive design within native applications since, much like the web, different layout rules were applied to the same base code.

Last week, Apple introduced iOS 8, and with it, something they’re calling Adaptive UI. The main feature of Adaptive UI is the ability to specify layout rules based on Size Classes, which are really just breakpoints set by Apple.

Developers can now use a single View Controller (or page, in our world) with various layout rules applied across Size Classes (or breakpoints) to accommodate devices of all sizes. While there are only two Size Classes right now, compact and regular, Apple has left a lot of room to add more, or to even let developers set breakpoints themselves in the future.

It may be adaptive in name, and hard-coded breakpoints may seem like adaptive thinking, but the groundwork has been laid for responsive design within native iOS applications. It’s been interesting to watch Apple’s path from static, to adaptive, to responsive, and it’ll be even more interesting to watch third-party developers take advantage of the workflow benefits of responsive design that we’ve become accustomed to.

Apple has finally come around on responsive design, and to top all that off, there was even a session about it last week at WWDC. I wouldn’t be surprised if, in the next year, we finally see the responsive redesign of apple.com that we’ve been waiting for all these years.

About the Author

26 Reader Comments

Load Comments