Is Your App Ready For The Newest iPhone?

With the release of the new iPhone X, you might be wondering, how does an app development and design company like Voltic Labs prepare for such a huge change in both hardware and software?

The biggest question we get is:  Do I need to rewrite and design my app for every new iOS device?

The short answer is No, but the complete answer is a little more involved. 

Background

The newest iPhone X is here!
In the pursuit of maximizing real screen estate, say hello to the notch.
Image courtesy of Apple.

Apple unveiled their latest flagship device this week, the iPhone X. The biggest change so far is that the iPhone X doesn’t have a square screen like the iPhone 7 or 8. Instead its screen extends beyond the usual boundary. Leading to a very interesting challenge to both designers and app developers. How do you port your current iOS apps to this new display?

Introducing Auto Layout

Auto-Layout helps with writing robust iOS apps.
It’s in the name!
Image Courtesy of animaapp

Apple calls its clever content resizing API Auto Layout. It gives developers the ability to display similar looking screens across the entire iOS ecosystem without much trouble. So for example if you were to design an app using Auto Layout, an iPhone 5 app won’t look bad when displayed on an iPhone 7 Plus or vice versa.

There is a small catch though, app developers need to write clean code in order to use all of the advantages. Auto Layout is not forced in anyway, but rather its use is highly encouraged. If an app developer decides not to use it, that’s fine but if their app doesn’t look nice on a user’s iPhone 5. Well,  the user will simply uninstall the app and leave a bad review, and that’s never a good thing!

Auto Layout enables developers to anchor their content to the sides of the screen, so that when the screen stretches or gets smaller, the content also changes shape based on the available width of the screen. You can also place buttons and images in specific spots with respect to other buttons, images and custom UIViews. Now that is awesome!

An iPhone's safe area, good for keeping the app content in place.
iPhone’s safe area.
Image courtesy of Medium

Everything except the top and bottom notches on the iPhone X are called safe areas, they give developers the ability to properly insert content without overlapping into the edges. For a more in depth look into Safe Areas check out this article on Medium.

What AutoLayout is not

AutoLayout is not some magical code that automatically works well in every scenario. As an app development company, we can’t just stretch an iPhone app into an iPad app, because there won’t be enough content to fill the giant iPad screen.

As an app developer, one must be cautious about the ways in which larger screens should be filled. You can only stretch the buttons so much before they look like bootlegged versions of iPhone apps (remember the early days of the iPad?).

It was ok for native iPhone apps to stretch on to iPad sizes in 2011 but that's not the case anymore.
This was the norm in 2011, but if your app looks like this in 2017, you’re in trouble!
Image courtesy of Terry White

Once you port over an iPhone app onto an iPad, we need to think about adding more functionality over the iPhone apps. The buttons will need to be resized, the views must scale up and the content must be richer on a larger screen. Since you now have a much larger area for the user to interact with, we need to be able to utilize the entire real estate of the screen.

Is Auto Layout our only saviour?

We need to actively think about the design before even touching the code.
It’s always good to have different options in every stage, from design to conception.
Image Courtesy of Pexels

Not really, there are other content resizing options available. One of them is calculating the size of each element (i.e UIButton, UIView, UILabel) manually and placing them on the screen accordingly. Which isn’t a bad practice, but it is a lot of work. It also exposes us to use a lot of constants (numbers that stay the same) in our code, which is never a good thing. We always want to write robust and dynamic code that can change from one device to another.

There is also an option to use constraints, which is awesome alternative when using drag and drop storyboard UI. It does become somewhat tedious when making views through pure code.

Final words

Hopefully, this article gave you some insight into the app designing and development process. At Voltic Labs Calgary we love to sit down and go through the app design process in detail before even thinking about the code. This allows our designers, and developers to shave off time, iterate quickly and give a much more polished final product. Which ultimately lowers the end costs for our clients.

If you have any questions, feel free to reach out to us via email at hello@volticlabs.com and we will be happy to assist you with a commitment free consultation!

If you would like more content like this, consider signing up for our newsletter!

Tags:

Zil

Zil is a Designer with Voltic Labs. His background in Automotive and Architect Design enables him to come up unique and elegant solutions to interesting problems. He loves drawing and working on cars in his spare time, and if you get lucky, you can catch him driving his prized cherry red E30 M3 in the summer.

MOST READ

Want more content? Sign up for our newsletter

Close Menu