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.
I work in marketing for a small drupal development shop and I am fairly new to web technology. I found your explanation of how responsive has adapted to iOS to be very helpful as it worked from a timeline perspective. Great job! Do you have a blog you do by yourself or do you write for Happy Cog’s blog?
@Sara: Thanks for the kind words! I write here, on my own, and on Cognition. I keep a log of it all on my personal site.
It always make me laugh. Apple who pioneer in modern web browser on smartphone. don’t actually care about people browse apple.com from their iPhones. Come on, RWD exists for 3 years already. Browsing through apple website from iPhone is terrible experience. Shame on you Apple. I guess if you have iPhone and you want to buy iPad online, you have to buy Macbook first to be able to use Apple web store
Filip: I think you’re missing the point about the Apple site not being responsive.
1. No one buys a £1,000+ MacBook Pro from their phone
2. If you’re on mobile, Apple wants you to use the native Apple Store app, not the website
I am more than curious to see what they’ll come up with, thank you for the summary!
Apple.com should become a blog. They should release an Apple Store app for OS X. It’s already available on iOS.
That WWDC14 RWD session wasn’t too groundbreaking, but they did lay it out for devs who don’t handle front end / design so much.
There are also a lot of rumors that apple will introduce a split-screen-feature in iOS8 – witch would increase the numbers of “size classes”
http://9to5mac.com/2014/06/11/heres-the-ipad-split-screen-app-mode-apple-is-working-on-in-ios-8-video/
“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.”
I don’t understand this one. Why are we waiting for it? Does anyone visit apple’s website multiple times a day for something? Is there anyone really looking forward for their marketing page to become responsive?
out of curiosity, I bought my macbook pro last December from apple.com using my iPhone. It was near impossible, and had to cheat and refer to certain pages from my laptop. I thought too it might have been with their insistance that tap and zoom was sufficient…
@Peter: I’m not waiting around impatiently for it, but for a company that has been seen as a design leader in so many areas for so long, it’s interesting to see them avoid responsive design. It’ll be telling when they go responsive, whenever that is, but it just has been interesting to keep an eye on.
Honestly, given how much of a marketing company Apple is I would expect them to either implement mobile redirects to a separate site, or totally re-write the HTML. The ability to differentiate the experience and save on bandwidth are too important when it comes to marketing or an uber-large company.
Responsive is good and all, but it’s not the only way to satisfy mobile customers. In fact, I only recommend it for companies that either are going to let this site sit un-updated for months on end, or for companies that are primarily member driven (that is, not doing marketing like adwords to gain new customers) where the benefit to them is not having to update things twice.
Of course, now I expect to be chastised from the entire web design/development industry. :p
I wish the tools that interface designers use could regonise the responsiveness of interfaces. Sketch seems to be the best tool for UI, but their solution to responsive design is to have multiple fix width breakpoints, meaning developers have to interpret what happens in between.
what up with the purple text, eyes, can’t, read
Never mind. I just read why the purple.
Heartbreaking, to say the absolute least.
talking about missing the point: if you try to access apple support from your iphone, you get a page intended for a desktop. the information from apple support is not available in an app. often it’s the only form of help relevant to your query, yet it’s unreadable on an iphone. that apple has failed to fix this six years after releasing their mobile devices is just a complete failure.
I just read the reason behind the purple text, heart breaking, my condolences
I think Apple is historically stubborn in some things. I wish I could get a better log output when testing on iOS, I wish I could customize more et al. I am seeing in the industry some people think responsive design is just a fad, or hard to implement in a big company. Short sighted product managers don’t want content to look different for different experiences. It’s hard for them to conceptualize so designers like me have to just make it pretty. I don’t blame Apple for having a website stuck in 2006. I’m betting the site is a reflection of the team that’s been there innovating these ten years and it’s why it looks the way it does. Why change it if it’s not broken?
While the headers and footers don’t work well on mobile. The Mac Pro site is readable and browsable on the iPhone.
I guess overall it hasn’t hurt their business but now they have a new head of retail who is in charge of the retail store and the webstore, maybe things will change?!
Apple goes out of their way to employ subtle vertically responsive design that makes their site not just more visually interesting, but more usable as well. And it’s proof that you can find an intelligent middle ground with a new technology like this.
My mind has wandered over this frequently – why the website of the biggest game changer in design and UX have a UI that is shamefully running a fixed width across all screen sizes?
@bloodnok exceptional good case example. Often when you need the support feature from their website you need to access it on your phone – e.g. when you just see a white screen when booting the mac, there is something wrong with the network settings, etc.
The iPhone user interaction pinch’n’zoom, double tab and pan revolution has had its days of glory! I remember it like a magic moment when they released the function. But that was back in the days when flash sites was fancy and you had to move the mouse curser around click per click in the internet browser on your Sony Ericsson phone.
Yes guilty – of cause I am also waiting impatiently to see what they come up with next on their website, just like every other new innovative apple product release!
Funny enough they have since December 2013 had a fantastic little responsive microsite (kind of) thing running for their mac pro https://www.apple.com/mac-pro/ with parallax scrolling that works amazing – illustrating the product smoothly in the background while showing specs and info in context in the foreground. It must be a sign from above of what is coming for the rest of their site…
Yes, I think they should make it responsive it now. I am also tired using it on my mobile.
I’m not so sure. I like sites that look like the site on whatever machine I view them. I dislike views that crush the site so that I have no overview – like being in a maze – and I’d rather pinch and zoom.
To me the current responsive design for Apple is good.. its very neat and clean. Now days we have trend for parallax design, Flat design etc.. which Apple succeed to achieve in its new design. For more trendy layouts for responsive design please refer http://visitresponsivewebsites.com/
Apple always create problems for responsive design.i face every week responsive problems with iphone now i am addicted 🙂
It’s really a very interesting article. The one thing I love the most of Apple website is just of there flat website design.
The website is fully responsive and supports every screen resolutions whether we open it on PC’s, Tabs or laptop etc.
The another very interesting thing is about of there images that is really awesome.
Well, it seems like from now on it’ll be responsive. Somewhat. Apple deliver bespoke content for different devices/browsers, it seems at first. At first glampse, err, glince, err, glance (pun intended) it’s not 100% reponsive but uses some sort of sniffing to adapt to screen width. Further tests pending…
Does Safari on iOS 8 still not report a unique user agent string for Responsive & Adaptive web needs?
The iPad mini was a problem. Are the iPhone 6 an iPhone 6 Plus going to exacerbate it?
http://www.visualrank.se/sokmotoroptimering/
Will iPhone7 come to our hand ? Asked by i4p
Nice observation and analysis. Static to Adaptive to Responsive. Never really thought like that myself.
thanks for introducing with latest technology . BDpublication.com