The designer doesn’t have to know how to code, but understanding the technology is a necessary skill because the quality of a product depends on it. To remain competitive in the market, you need to speak with a developer on the same language and understand all the technical aspects of the product implementation. I’ve been designing for more than 5 years, most of which I devoted to working with mobile applications. In the process of work, I often noticed that designers have a hard time understanding the concept of a universal application. To help them get a solid grasp on it, I decided to start by defining a universal application and its advantages. I want to explain what a split screen is and how the application behaves in this mode, what size classes are needed for and how the navigation of your application is related to the implementation of it on iOS devices. If you are still interested and you see benefit in this — read on.

Latest WWDC 2018 brought us the news, that the new MacOS Mojave will feature applications that used to exist only for iOS. To mention some of them: News, Voice memos and Home. Such adaptation of applications is a worthwhile trend because it makes it possible for users to have an uninterrupted experience with a single app for iPhone, iPad and MacOS. I think there will be more and more such applications emerging. Therefore, I have decided to go over and assist in understanding the concept of the adaptive model for designers.

Apple sells millions of mobile devices — iPhone SE, iPhone 8 and 8+, iPhone X, earlier models, iPad and iPad Pro. These devices not only differ in the size, but also in the behavior of applications. We, as designers, should be able to create an app design that will look awesome on all these devices. It should be noted that the applications should be correctly displayed on the iPhone and iPad, and in Portrait View and Landscape. Moreover, do not forget about multitasking on iPad, where split-view mode can be used for working with multiple applications simultaneously. As Apple claims, the same iOS application has 300+ display combinations on mobile devices. This is one of the main reasons for creating the concept of an adaptive model.

While researching this topic, I realized that there is not much easily accessible and understandable information for designers on the Internet — one more reason why I decided to touch on this topic in the article.

What is a Universal App?

A universal application is a single application that adapts for iOS devices, such as the iPad and iPhone.

Advantages of a Universal App

Let’s consider the benefits of creating a universal application from the perspective of the user, designer, and developer.

For the developer — the most likely advantage is the ability to support the application for all iOS devices. Before it became possible to create universal applications, developers had to create several separate entities of the same application for the iPad and iPhone.

It is also convenient for the designer to maintain a single application and save a continuous user experience on iOS devices.

The user now does not need to download the same application twice — separately for the iPad and iPhone. A user sees an adapted view of the application for the iPad.

Split View and Size Classes

With the arrival of more devices on the market, Apple presented the adaptive model for iOS 8 and then the split-screen technology for iOS 9

Split-screen is a technology that allows you to work with multiple applications on the iPad or on the iPhone 8+ in landscape view at the same time. To ensure uninterrupted work within applications, an adaptive layout is usually created.

There are 16 sizes to which the application can adapt. Apple suggests using size classes to make the application adapt to any size and orientation.

Size classes help to classify the width and height and, in accordance with them, predict the behavior of the application. There are three classes: Compact, Regular and Any.

Compact is a limited space, Regular is an expanding space.

As you can see below iPad and iPad Pro have a Regular width and height in Portrait and Landscape view. And iPhones besides iPhone 6/7/8 Plus have Compact width and height. Only iPhone Plus has a Regular width in Landscape view.