Upcoming and OnDemand Webinars View full list

Designing for Size Classes in iOS

Kar Loong Wong

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.

iPhone Size Classes

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.

Apple's Mail app

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.

iPad Size Classes

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.

iPad Size Classes in Split View multitasking

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.

Including a split-view pane on iPhone Plus

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).

Excluding a split-view pane on iPhone Plus

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.

Manipulating UI via Size Classes in Xcode

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.

Not Happy with Your Current App, or Digital Product?

Submit your event

Let's Discuss Your Project

Let's Discuss Your Project