The following is a guest post by ChopDawg.com, an award-winning app development company that has worked with over 180+ startups and companies from all around the globe, helping them bring their web apps, mobile apps, wearable apps and software ideas to life.
Follow ChopDawg.com on Twitter at @ChopDawgStudios.
Many developers I’ve been speaking to have been catching up and taking advantage of the newest opportunities that the iPhone X screen offers. The phone has been out for about a half year, and more users are now on iPhone X than ever. Thanks to the increased screen size and screen ratio on the new iPhone X, there are new opportunities for nascent apps, and for revitalizing old apps as well.
This is huge!
A major upgrade like this had only happened once in the history of the iPhone when Apple introduced the 5s (standard size and size) back in 2012.
But, what does that mean for those who already have apps in the App Store? What does it mean for those who are creating their apps today? How about those reading our library, thinking about reaching out to Chop Dawg to have us build their app in 2018?
It means, in the most simplistic yet technical sense, Apple has slowly crossed more into the Android threshold of supporting multiple screen sizes. But it also means that Apple has become an ounce more fragmented with the devices it supports, and it is now time for app developers to prepare for adjusting.
For context, for the first five years the iPhone existed, all iPhones had the same screen size. This was 320 x 480 in pixels.
When the iPhone 5 was introduced, it introduced two brand new screen sizes. 320 x 568 in pixels for the standard edition, 640 x 1136 for the Plus side edition.
Fast-forward to before September 12th, 2017; Apple dropped support for the original screen size devices (everything before the iPhone 5s); therefore only the current standard edition of 320 x 568 and 640 x 1136 was needed to be accounted for by app developers.
This has changed forever.
With the iPhone X and likely for future models to come, Apple is now supporting a new display with a 1125 x 2436 pixel screen. However, that isn’t that Apple is changing for the first time in its smartphone history, either.
On the iPhone X, the status bar is no longer full width, from the top left of the device to the top right of the device. You’ll notice a part of the screen missing; dedicated to your front-facing camera, front speaker, and different sensors. You’ll notice a whole new status bar has been designed for the iPhone X display.
This also means that a new status bar is being introduced; different than what we as app developers have supported in the past.
So if you’re following us so far; you’re looking at a third screen resolution to support, and two different status bars now in play.
So, what does this mean? How should app developers adjust if they haven’t already?
For starters, relax. The thing same happened in 2012, a lot of app-based entrepreneurs and executives overreacted that the end is near and that they must fork over thousands of dollars to adjust to Apple’s new playbook. What ended up happening soon after; everyone realized you needed to support a scalable app design that can translate perfectly on two devices; and for existing apps, you have more screen real estate from top to bottom to support.
Need a perfect example of making this work? This was when Instagram ditched the always square photograph uploads, to a more custom shape that could better fit the new device. Nothing from their actual user interface needed any modifications or edits.
With the brand new iPhone X, realistically, you should have already been supporting a scalable design given that two iPhones existed. You should have been supporting proper vector-based image files, so icons do not become pixelated as they expand, and the same icons look sharp when small.
You should have also been supporting fundamentals in programming so that colored backgrounds, buttons, the text will flow and fit perfectly, no matter what the screen resolution is.
The same can be said for the new iPhone X.
Though again, app developers now have more screen real estate to play with from top to bottom; it is an identical situation we all faced in the industry back in 2012. Odds are, you do not need to modify the logic of your user experience; and more than likely, you can make small tweaks to your app similar to what Instagram did to take advantage of the even increased real estate.
The biggest changes though is the status bar up top and rounded edges below.
It seems Apple has already planned accordingly for this.
In the example apps that Apple presented during their September 12th, 2017 unveiling of the iPhone X, all their applications maintained the same bottoms; just carried over into the “white space” located on the underside of the phone, vs. leaving blank space as if the app isn’t entirely fitting the device. This is important because as Apple displayed, the new iPhone X has ditched the home button, but that logic was built into the bottom of the phone for you to interact with. Apps need to support this so the native iPhone X experience will still function. Yup, if you’re following all of these technical explanations, it means in plain English, your app’s background should fit the bottom, but that is it. You don’t need to do anything fancy, and shouldn’t be more than a couple of minutes of programming for your development team to adjust.
That brings us to the status bar, on top. Apple has displayed with the weather app as an example; you can now build your app user interface with the status bar in mind. However, they also showed apps that maintained a status bar up top, treating even the screen missing for other key hardware pieces as part of the status bar.
That means the top of your app, if you choose too, can remain flat with a status bar accounted for from the top left to top right, without any further modification if you decide. But, it also does mean, if you choose to make a small iteration for the iPhone X, you can also account for this new left and right-hand side status bar to match the branding and aesthetics of your app. Note up until this point, though, Apple has only allowed the icons and text on the status bar to be black or white; and in the examples provided during their presentation, it still appears this logic is mandatory for the iPhone X.
So breaking this all back down into English, what does this mean for app-based entrepreneurs?
As long as your app was programmed to be scalable and universal prior, you’re fine, and it should not take more than a few minutes to adjust. Simply make your iPhone X version of your app “bleed” all the way down to the bottom of the phone, so it doesn’t display a black void, and decide if you want to make the top status bars area match the branding of your app, or keep it as is.
That is it.
This is such an exciting time to be an app developer, and more importantly, an entrepreneur with an app. Don’t lose sight that with the iPhone X, you have new functionalities you can now leverage. Touch ID will now work in tandem with Face ID on the iPhone X. New facial recognition APIs are available for you to work with. And yes, AR Kit for those interested in leveraging Apple’s AR capabilities for your app!
Similar to the end of 2012 into 2013, expect to see a lot of new ideas and concepts put on the iPhone thanks to the expanded real estate. Be on top of the trends and take advantage of it for your users, and your future users, to continue loving your product.