Responsive design is an intrinsic aspect of mobility. Shockingly, iOS has allowed little to no responsiveness in native applications.

That’s right. The operating system that almost single handedly forced website owners to design their website for different screen sizes and density was not able to handle it itself.

Even more absurd, the limitations were not technical at all. iOS is built on top of a powerful graphics system publicly called Quartz, which was developed for Mac OS X. This system is what enables high-end, graphically intense apps like the Final Cut Studio. It’s also what enabled smooth scrolling on the original iPhone. This graphics system could have handled responsive apps from day one; in fact, it has already done so. Quartz is what powers CSS transitions and rendering in WebKit, the engine behind Safari and Chrome.

So what about native apps? What or who imposed that limitation? Having followed Apple for a while, I blame Steve Jobs for that choice entirely. But, for the sake of this post, let’s blame Apple as a whole. Apple is known for its obsession with pixel perfection, and fixed layouts inherently enable pixel perfection. Since you don’t have to/can’t worry about variable screen sizes, you can design assets for the few screen resolutions that are available for the platform. Most importantly, there is no screen size scenario in which your app will appear unpolished, unless, of course, your app is unpolished. Until iPhone 5, that was all well and good.

On Android, a radically different decision was made from the start. Apart from some exceptions, most screens are entirely described in relative layouts. Screen resolutions are never considered a constant. This is how Android manages to run relatively well on the hundreds of different hardware models. However, it should be noted that pixel-perfection is very hard, if not impossible, to achieve with relative layouts.

In the browser, with media queries, CSS was able to describe even more complex relative layouts, and could almost achieve pixel perfection, but still not the kind that fixed layout offered.

Two elements in the evolution of Apple’s business plan challenged its earlier decision to impose a fixed layout, forcing it to re-evaluate a responsive system:

• iPhone 5 (and maybe a smaller iPad?)
• Increasing iPhone’s localization capabilities to make gains in China and similar markets (for instance, adding Weibo to the built-in social networks)

Hence, they had no choice but to build a new layout system. This is why the most important feature of iOS 6 is Auto Layout.

Auto Layout is the long awaited solution that combines true responsiveness and pixel perfection. It was introduced on the Mac two years ago.

Without going into specifics, Auto Layout is a way to semantically describe layouts by building a constraints tree organized by priority. By describing a layout in such a way, the system has enough information to make the same design decisions that a designer would under similar conditions. In other words, Auto Layout will preserve the intention of the designer, no matter which screen resolution is used, and no matter what content is shown.

Auto Layout has an important learning curve, but once understood, its capabilities are immense.

The most significant example is when trying to localize an application for two very challenging languages: Arabic and German. Arabic is written from right to left and German has very long words.

By describing what you, as an English-speaker, want the design to convey and look like, Auto Layout will adjust it to regional differences. In Arabic for instance, the screen will automatically flip, placing the most important elements on the right and preserving the other elements’ positions (because it would not be appropriate for those elements to be flipped). For German, and in tight screens, longer words require some decisions to be made about what to compress and what to reflow. For instance, a constraint that would manage this could be: “I want my title to always be centred, but if the button to the left of this title is too wide and starts clipping my title, then the title can stop staying centred and instead embrace the full width it has available and move to the right.”

Without Auto Layout, those two examples would have been almost impossible in iOS.

Now with iOS 6 and Auto Layout in their hands, developers will be able to create a new class of apps – apps that will work perfectly for everybody and for every screen.

In the mean time, Auto Layout turns up the volume on the importance of responsiveness in design in general.

Tags: Apple, iOS 6, iPhone 5, Responsive Design

0 comments