Adaptive Apps

 2015.03.13 João Paulo Amaral

Image credit: Android Design. Used under Creative Commons license.

Since the beginning of the Mobile Revolution there was always a plethora of Android devices with different screen sizes, iOS devices, on the other hand, were more consistent with their screen size. But in later years a greater variety of Apple devices with not only different screen size but also screen density surfaced from Infinite Loop showing an increase of device fragmentation on their part.

It was hard to develop apps to all this variety of screens for different devices and still have a consistent design layout where we can assure our users of a great (and same) UX, user experience, across different devices.

Web development also had this problem and it was solved by using Responsive Web Design (RWD). This approach to web design aimed at developing websites providing an optimal viewing experience, one where reading and navigation is done with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries, an extension of the @media rule.

Adaptive Web Design (AWD) is another approach to this problem and the two differ in the way it is solved in their inner structures. RWD relies on flexible, fluid grids and AWD relies on predefined screen size classes. RWD usually takes more code to implement while AWD is a more streamlined, layered approach.

Reaching Every Device

Last Apple WWDC – Worldwide Developers Conference (2014), iOS8 was introduced and with it, Adaptive UI. The main feature of Adaptive UI is the ability to specify layout rules based on Size Classes set by Apple.

A size class can be either compact or regular and it identifies a relative amount of display space for the height (vertical) and for the width (horizontal). For example, an iPad will have regular width and height in both portrait and landscape orientations while an iPhone in portrait will have a compact width and regular height. You can check a table with Apple devices and their corresponding size classes from Apple iOS Human Interface Guidelines book. This makes it possible to have a unified storyboard when building a universal application, previously, you had to design two separate storyboards – for iPad and iPhone.

You can have Size Class dependent fonts, images and views available from Interface Builder in Xcode which you can use to build adaptive layouts

Adaptive layouts are a fundamental part of the future of app design and developers need to grasp this concept if they plan on building apps that work well on Apple devices and that gives an awesome UX to the final user.