Designing for iOS used to be simple because previously, there was only one phone size. Fast forward to the present day; we now have an array of iPhone and iPad devices, all with different screen sizes and orientations. Aside from the physical devices, themselves, we also have software features that increase the number of sizes your application can appear in, like Split View and Slider Over. To help designers and developers manage these various permutations, Apple has introduced Size Classes which organize all of these screen sizes for each device and orientation into two categories.

What are Size Classes?

In iOS, Size Classes are groups of screen sizes that are applied to the width and height of the device screen. The two Size Classes that exist currently are Compact and Regular.

The Compact Size Class refers to a constrained space. It is denoted in Xcode as wC (Compact width) and hC (Compact height).

The Regular Size Class refers to a non-constrained space. It is denoted in Xcode as wR (Regular width) and hR (Regular height).

iPhone

Most iPhone devices will use the Compact width (wC) size class in each orientation with some exceptions.

The iPhones 6/7 Plus can inherit the Regular width (wR) size class resulting in the ability to use functionality normally reserved for the iPad, such as the split-view pane. For instance, using the Mail application on an iPhone 7 Plus in horizontal landscape will cause a split-view pane to appear, allowing the user to better utilize the available space rather than just displaying a single table view.

iPad

All iPad devices use the Regular width (wR) size class regardless of landscape or portrait orientation. In both horizontal and vertical landscape, the iPad will use a split-view pane to take advantage of the available screen space because it falls within this unconstrained size class.

Learn how a design audit can help you see the most success from your mobile or web application.

Multitasking on iPad: Split View and Slide Over

Split-View multitasking and Slide Over allow your app can share a screen with another app in a 1/2, 1/3 or 2/3 ratio in either landscape or portrait orientation. Depending on the ratio, the operating system will either display the Compact width (wC) or Regular width (wR) layout.

Controlling the UI with Size Classes

In most cases, specifying the width class is sufficient when laying out your app; however, you can use the height class to customize your app as well. For example, if you use a split-view pane in an iPad app, users will see the same pane on iPhone Plus in landscape orientation because they both inherit the Regular width (wR) size class.

If that is not your intention, you can exclude a split-view pane from appearing on the 7 Plus by specifying both the width and height Size Classes. This works because the height of an iPhone Plus in landscape orientation is compact (hC) while all iPad devices have a regular height (hR).

You can also use Size Classes to target specific UI elements like font colors, font sizes, drop shadows, view colors and more to adapt to users’ device screen. These variations give you added control as to how your UI can adapt to different devices and orientations that your user may be using.

Understanding Size Classes allows you the flexibility to meet your user’s needs regardless of which device they use. I encourage you to explore how Xcode handles Size Classes to understand the possibilities at your disposal. For more information on Size Classes or other design and iOS topics, make sure to check out our blog.