How to make iOS apps that look great on all devices

Recorded May 31st 2020 – watch the full episode on YouTube.

What advice do you have for folks to make sure their designs for SwiftUI work great across all the layouts? From a little iPhone SE size up to full-screen landscape, 12.9 inch iPad Pro?

Meng To: One of the most important things is to first learn the platform. You have to be fully aware of what the expectations are of each platform. Android have this thing called elevation for shadows. iOS they have this thing called the background blur, which is called now a material sheet. And iOS use the full screen mode versus Android. Usually, if you have a card it's not always full screen. iOS use much bigger round of corners because of the iPhone 10 sort of rounded corners.

“First of all, you have to lose that concept of having a single design that fits all, but you should welcome the idea of changing the design a little bit, just enough to make it work across platform.”

And all of those things need to be taken into consideration when you're designing for, let's say from the web and you want to adapt it for your iOS and for Android or you're designing for iOS and you want to make sure that your design can translate well to Android and also for the web. It's important to look at these UI patterns as I like to call them to know what is it that users expect? And then you can sort of transform the design instead of saying, “hey, I'm going to use a style that fits all without any change whatsoever.”

First of all, you have to lose that concept of having a single design that fits all, but you should welcome the idea of changing the design a little bit, just enough to make it work across platform. We're not talking about 10 steps. We're talking about three steps roughly, but we're not talking about zero step because a lot of people, they want to get lazy and they're like, "Hey, I just want to have zero step, one code that fits all, one design that fits all."

“If you look at the code, the same code can work on Apple TV, on the Apple Watch, on the iPad, but you might have to change a couple of modifiers, a couple of frame values and stuff like that. But at the end of the day, you need to adapt a little bit and you need to reduce the steps, but it's not going to be zero.”

Well, that's not going to happen because, and the same concept is with SwiftUI, right? If you look at the code, the same code can work on Apple TV, on the Apple, watch, on the iPad, but you might have to change a couple of modifiers, a couple of frame values and stuff like that. But at the end of the day, you need to adapt a little bit and you need to reduce the steps, but it's not going to be zero. So that's how I would do it. The same for design as well.

Paul Hudson: Certainly we've all seen those apps that are running on iPad and they're basically iPhone apps and they're running a table in the middle which scrolls up and down and then just white space to the side. I mean, Twitter was there for quite a long time, for example, and it doesn't feel good because you've got this very expensive, thousand dollar device in front of you, beautiful glass TrueTone display, ProMotion refresh rate, and so on. It’s a gorgeous thing and it's occupying this tiny little scrolling space. It's not a great use of the device. It doesn't feel like you're really enjoying it. You might as well just pull out your phone.

“The goal is to learn once and apply anywhere. Learn the techniques, learn the modifiers, learn the layouts and the interesting tricks, tips you have and then you apply that to every platform.”

And with SwiftUI Apple made this really, really clear. They're not trying to make a Java, “write once, run anywhere.” They made that really clear. The goal is “learn once, apply anywhere” – learn the techniques, learn the modifiers, learn the layouts and the interesting tricks, tips you have and then you apply that to every platform.

And then the third part, which you mentioned is then tailor your layouts to each thing. This would work better by using the digital crown on watchOS. This needs play, pause, support on tvOS or it's going to handle more things like menu bars for macOS. Tailor them to match the platform to really take advantage SwiftUI's power for that platform.

Sponsor Hacking with Swift and reach the world's largest Swift community!