How to Create a One-Size-Fits-All App for iOS: iOS 8’s Adaptive UI

By Matt Kofman

Optimizing user experiences over a diverse set of devices is now more important to designers than ever before. Truly outstanding user experiences are ones that are ubiquitous across all device sizes, orientations and versions of the operating system.

To reference Apple’s latest quote in their Human Interface Guidelines, “With the latest advancements with View Controllers in iOS 8 and Auto Layout in Xcode, it’s now even easier for you to adapt your user interface to context and different sized devices.”

In short, Apple now provides designers with an easy way to create a universal application that, if implemented correctly, can easily adapt itself to any iOS device in any orientation by using a new abstracted layout.

 

Universal Screen Design

In the early stages of the iPhone revolution, there was only one iOS device – the iPhone. One device with one screen size and two orientations. It was easy to create a single interface for a single device that couldn’t change beyond the ways that people might hold it. However, we now have a multitude of devices with widely varying screen sizes: the iPhone supports 3.5”, 4”, 4.7” and 5.5” displays while the iPad supports 7.9” and 9.7” displays (with a third potentially coming in 2015).

Thankfully, with iOS 8, Apple has made it possible for developers to create universal apps that can easily adapt to all of the different devices and screen sizes with minimal effort.

 

The Four Size Classes

Size classes are specified in both horizontal and vertical orientations and can also be specified as either Regular or Compact. With the abstracted method of designing and communicating user interfaces with iOS, you should think about the design more generically than in the past, so that it can change dynamically with differing screen sizes. As you can see via the chart below, there are four distinct classifications for devices based on screen size and orientation.

You can see that an iPad in both landscape and portrait orientations is defined as having both Regular Horizontal and Regular Vertical Size Classes. The portrait orientation for iPhone 4S, 5, 5C, 5S, 6, 6 Plus and iPod touch has a Regular Vertical Size Class as well as a Compact Horizontal Size Class. When these devices (besides the iPhone 6 Plus) are rotated to a landscape orientation, they are classified as Compact for both Horizontal and Vertical Size Classes. The only device so far to have a Compact Vertical Size Class with a Regular Horizontal Size Class iis the iPhone 6 Plus in landscape orientation.

So why do we need this expanded classification for size? Why not just vertical and horizontal? The major reason is that the functionality or user experience of an application would likely change when moving from iPad to iPhone due to the large difference in screen sizes.

Let’s take a look at how the Mail app on the iPad and iPhone are structured in the image below.

The iPad has a large screen size to fit both an email list (showing all the mail in a mailbox) and the details of a selected email. In this example, you have what is referred to as a Split View Controller, which consists of two sections — Master and Detail views. The Master is the high-level list of emails on the left side of the screen, while the Detail view is the contents of the email displayed on the right side of the screen.

However, moving this sort of interface to the iPhone requires deconstruction. First, in portrait orientation, the iPhone has separate views for the Master and Detail views. If you look at the iPhone 6 Plus in landscape view, the Mail app will look essentially same as it does the iPad, just within a smaller screen.

 

Customize Layouts for Every Orientation

Since an app’s functionality might change between devices, developers can feel free to customize their app’s layout for every orientation of different screen sizes. For example (as seen in the photo below) in the iPhone’s portrait orientation, developers can stack two buttons on top of each other. Compare this to the iPhone’s landscape orientation, where developers can align these two buttons side-by-side to take advantage of the additional width. These are the same controls, but the positioning and other attributes may change as the size class changes.

 

Goal: Great Experiences for Every Environment

Applico’s highest priority is to deliver a great experience in every environment. To achieve this, it’s important to keep the focus on the app’s primary content in all environments and to avoid gratuitous changes in layout.

For example, changing the focus point when the environment changes can disorient users, and generally will create a poor user experience. To maintain usage patterns when rotating a device or running on a different screen size, a comparable experience is key. For example, if you use a grid to display images on an iPhone in portrait, you should also use it in landscape view. You would adjust its dimensions for the different screen orientation. With this way of thinking, you can optimally adjust user interface elements for different circumstances.

 

What Adaptive UI Means for Designers and Developers

With the implementation of Adaptive UI, Apple’s decision to evolve its procedure of defining layouts for iOS devices is a refreshing change of pace. Now, instead of having to greatly change and adapt layouts for different device screen sizes, we can provide an abstracted layout that’s not entirely dissimilar from the way responsive web or Android design might be defined.

This change now innately allows for developers and designers to future-proof their apps for any screen size possible, which in turn allows Apple to tout a less fragmented, more inclusive app using experience. That’s some good engineering.

---

Filed under: Product Engineering | Topics: Design, iOS, IOS 8, ios developer, ios development, UI