How to make your app look fantastic on any screen – Discover – Apple Developer

How to make your app look fantastic on any screen - Discover - Apple Developer

Imagine you’ve just seen the perfect pair of shoes online. They are the right color, they are impeccably designed and you can’t wait to get them delivered and on their feet. Except wait – they’re only made in size 7. And unfortunately, while you may be able to stuff your feet in and wear them occasionally, they won’t be comfortable enough for everyday wear.

Now most shoe manufacturers don’t offer their shoes in just one size. Instead, when creating a new shoe model, they offer a range of sizes with the same design and functionality, so that the customer can enjoy the one that fits best.

The same goes for really great apps: as you develop, you’ll want to create an interface that adapts to a range of screen sizes with the same design and functionality for everyone. That way, regardless of whether someone uses iPhone SE or iPad Pro to view your app, they still get an enjoyable and comfortable experience.

Below, we’ve rounded up some of the best ways you can customize your app’s interface to look great regardless of the device.

universal design

While you can only design for specific platforms such as iPhone, iPad, or Mac, consider creating a universal version of your app that supports multiple devices. This allows your customer to choose how your app fits into their life and it is the most adaptive experience you can offer. Whether you’re creating apps designed for a single platform or multiple devices, they should support all available screen sizes and size classes for those devices.

Ready to launch

A great app experience starts with a universal home screen: designing the right one can make a world of difference in how quickly you can immerse people in your user interface. Use Xcode to create a home screen storyboard – they are flexible and support all device screen sizes, so you can use one storyboard to manage your home screens on any platform you support.

Learn more about designing home screens for seamless starting>

Go to Auto Layout

When creating your interface, Auto Layout can help you adapt to any screen size. It provides guidelines for your app that relate the positioning of a piece of content to other content or views. This allows your content to be scaled and rearranged the way you plan. Avoid using absolute screen coordinates, as they can lead to off-center buttons or annoying content flow on different screen sizes.

Read more about Auto Layout in the Developer Library>

Explore SwiftUI

If your app is built for iOS 13, iPadOS 13, watchOS 6, tvOS 13 or macOS Catalina, you can also consider implementing SwiftUI. The declarative nature of SwiftUI ensures that your content is customizable out-of-the-box and that code is often reusable when building apps for other Apple platforms.

Master multitasking

If you’re developing an app that supports iPad, keep in mind that people can use it in several ways: they can browse the app in full screen, place it next to another app in split view, slide it up in Slide Over , or (if your app supports it), even view multiple windows side by side. Consider each of these size classes and how your interface can successfully adapt to provide the best experience.

Get started with multitasking>

Keep your content readable

It can be challenging to design for a great reading experience on all devices if you have text or image rich content in your app. Let the Readable Content Guide do the heavy lifting for you: The layout guide defines an area that can be easily read without extra effort.

Read more about the Readable Content Guide>

In addition, make sure your reading experience is accessible. Many people prefer to change their text size to something other than the default. Dynamic Type support ensures that your text is scaled to what your customer has indicated they want. It also ensures that as the text gets larger or smaller, other elements on the screen are moved dynamically to accommodate these changes.

Read more about designs with the weight and size of the text in mind>

Learn more about scaling text set in a custom font>

Use safe areas when designing your interface to ensure that your views never overlap or overlap other content or hardware elements, regardless of the device.

More information on safe areas and safeAreaLayoutGuide >

Effectively make your questions

While it’s helpful (and often critical) to know the device capabilities your app is currently running on, keep in mind that you shouldn’t check on a known set of devices and collect behavior based on those results. Instead, ask about the availability of functions and provide conditional paths based on the results of that check.

For example, if you build an AR app, you can use the isSupported property of the appropriate ARConfiguration subclass to see if a device supports a particular configuration.

class var isSupported: Bool { get }

View an example of your work

In Xcode 11, you can do many of your basic interface tests directly in Previews. It allows you to see how your interface handles different conditions, devices and usage situations. You can automatically see how to display Dynamic Type if your app is running on iPhone SE, for example, or you can view various localization options.

While samples are designed to work with SwiftUI, you can also use them with your existing Swift or Obj-C views to ensure that your user interface remains customizable as you change your code.


View “Mastering Xcode Previews”>

Read more about SwiftUI>

Learn more about adaptive interface designs>

Read more about using typography on all screen sizes>

Leave a Reply

Your email address will not be published. Required fields are marked *