Home / IOS Development / How to make your app look good on every screen – Discover

How to make your app look good on every screen – Discover

Imagine for a second you were transposed into the karmic driven world of Earl. They are in the right color, they are designed impeccably, and you can not wait to get them delivered and on your feet. Except, wait – they’re only made in size 7. And unfortunately, even though you may be able to stuff your feet in and wear them occasionally, they won’t be comfortable enough for everyday use.

Now, most shoe manufacturers do not 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.


7;s the same for really great apps: When you develop, you want to create an interface that adapts to a variety of screen sizes with the same design and functionality for everyone. That way, whether someone uses iPhone SE or iPad Pro to view your app, they still get a pleasant and enjoyable experience.

Below we have gathered some of the best ways you can customize the app’s interface to make it look great, regardless of device.

Universal design

While you can design exclusively for specific platforms such as iPhone, iPad or Mac, you can consider creating a universal version of your app that supports multiple devices. This allows the customer to choose how your app fits into their life, and it is the most customizable experience you can provide. However, whether you create 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 launch screen: Designing the right one can make a world of difference in how quickly you can immerse people in the user interface. Use Xcode to create a launch screen storyboard – they are flexible and support all device screen sizes, so you can use a single storyboard to manage the launch screens on each platform you support.

Learn more about designing launch screens for seamless starters>

Enter the Auto Layout

When creating your interface, Auto Layout can help you customize to any screen size. It provides guidelines for your app that relate the placement of one content to another content or views. This allows the content to scale and flow again as you intended. Avoid using absolute screen coordinates, as they can lead to center buttons or difficult content flow on different screen sizes.

Learn more about Auto Layout in Developer Library>

Explore SwiftUI

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

Master multitasking

If you’re developing an app that supports the iPad, keep in mind that people can use it in a number of ways: They can browse the app in full screen, place it next to another app in Split View, drag it up in Slide Over, or (if your app supports it) you can also see multiple windows side by side. Consider each of these size classes and how your interface can adapt to provide the best experience.

Get started with multitasking>

Keep the content readable

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

Learn more about Readable Content Guide>

Make sure your reading experience is available. Many people prefer to change the text size to something other than the default. Supportive dynamic type ensures that text scales according to what your customer has indicated they want. It also ensures that as the text gets larger or smaller, other elements on the screen will move dynamically to accommodate these changes.

Learn more about design with text weight and size in mind>

Learn more about scaling text sets in a custom font>

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

Learn more about safe areas and safeAreaLayoutGuide >

Create your questions effectively

While it is helpful – and often critical – to know the device features that your app is currently running, be sure to avoid looking for a known set of devices and sorting behaviors based on those results. Instead, ask for feature availability and enter conditional paths based on the results of that check.

For example, when building an AR app, you can use isSupported the property of the current ARConfiguration subclass to see if a device supports a given configuration.

class var isSupported: Bool { get }

Preview your work

In Xcode 11, you can do a lot of basic interface testing directly in previews. This allows you to see how your interface handles different conditions, devices and utilities. You can automatically see how Dynamic Type can be rendered if your app is running on iPhone SE, for example, or see different location options.

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


See “Mastering Xcode Previews”>

Learn more about SwiftUI>

Learn more about adaptive interface design>

Learn more about using typography in all screen sizes>

Source link