The new iPhone X, with its design that differs fundamentally from what we’d seen in previous-gen models of Apple smartphones, has become a truly revolutionary concept. While devotees of iOS debate about the much-hyped iPhone X notch, web-designers scratch heads over developing mobile apps, which would be compatible with this notch as well as with the new screen size. Here are nine working strategies of developing applications that will fit into the non-standard screen of iPhone X.
Size Matters: How to Take Advantage of a Bigger Screen
The main distinctive feature of the flagship smartphone from Apple is, of course, iPhone X screen size, which is now 5.8 inches. The width of the screen stayed unchanged – 375 pt, while the height has increased from 667 pt in iPhone 8 to 812 pt. It means that developers have received 145 extra pt, which have to be filled without compromising design and usability. To do it you’ll need the 375 x 812 artboard.
Here are some ways to adapt your app to the new format:
- Rearrange the components of the interface – Even despite wider tab and navigation bars, iPhone X offers more useful space than its predecessor – 641 pt in height against 570 pt. For this reason, the layout needs rearranging. It can turn out that some elements (icons, buttons etc.) are placed too close to the notch or even go beyond the borders.
- Don’t be afraid of the notch – This is a truly unique solution of the “X” model, which is much spoken about. It makes the flagship phone stand out from the crowd. But few app developers designing for iPhone X really understand what to do with it. Some of them try to pretend that there is no any notch at all, simply coloring the upper bar in black. But Apple doesn’t recommend doing it. On the contrary, try to make use of this extra space that makes the app look bigger and more impressive. More than that, OS developers promise that most standard applications will be automatically adapted to the new format. The same is about custom-made apps where the Auto Layout option was used. If you are not sure of how your app will look on the new screen, use the Xcode simulator to check it.
- Don’t hide the status bar – The iPhone X status bar is twice as high as the status bar in the previous models – 44 pt against 22 pt. Moreover, its height stays unchanged irrespective of the background task execution. Developers’ recommendation is not to try to mask it or replace with your custom status bar. Instead, you can experiment with the color. Apple offers several default color solutions, and depending on your app’s color scheme you can choose what suits you best. You can even set different colors for different screens if it makes your app look better.
Reconsider Content of Your App
Thinking out your app design for iPhone X, you need to consider not only screen size and ratio, but also content, which is probably, even more important. Here are key points that are worth to think of.
- Color space – The brilliant screen of iPhone X supports an incredibly wide color spectrum, and if you want to take advantage of it, you should opt for P3 instead of the traditional RGB color space when developing iPhone X app design. Keep in mind though that to work with P3 you need a suitable PC screen, as many monitors, even premium models, just don’t support such a wide spectrum of colors. One of the P3-compatible options is MacBook Pro.
- Display aspect ratio – As we know, the “X” model is taller, so the iPhone X ratio differs from that in the iPhone 8. In practice, it images that fit perfectly into the iPhone 8 screen will be cropped when transferred to iPhone X and vice versa. Maybe it makes sense to use different digital objects for different types of screens.
- Rounded corners – They confuse many developers, and still, try just to love them. Here again, Apple doesn’t recommend hiding or masking the corners. Just believe that you can make great and really cutting-edge solutions with this shape.
Design Guidelines of iPhone X
The unique shape of the screen with rounded corners as well as the vaunted notch complicate app development, as there is always a risk that some elements will be overlapped by the notch or go beyond borders. It’s ok for a background image, but when it comes to buttons and other important components, for example, text blocks, you should be very careful. To make the task easier, you may use the iPhone design guidelines developed by Apple.
These guidelines will help you to put all the elements in place correctly.
- Check how your app looks in a landscape mode – Keep in mind that iPhone X landscape mode differs from its portrait mode. The navigation and tab bars get narrower, while the status bar disappears, so the useful space gets bigger. Your task is to adapt your app to the landscape mode and provide a seamless transition from the landscape to the portrait mode and vice versa. This is especially important if users of your app will need to view texts, images or other types of content in full screen.
- Don’t forget about website design – Along with an app, developers often create a website. If you work on the two products at the same time, think of the website design as well. Apple offers a separate guideline regarding adaptation of websites to the landscape mode. Follow the guide in order to prevent clipping or cropping of content and improve an overall usability of the website.
- Don’t use gestures that can be confused with system gestures – The lack of Home button makes iPhone X very special. Just imagine that absolutely all tasks are launched and stopped only with the help of gestures. Users need time to get accustomed to it, and if you use system-like gestures to manage your application, it will further confuse them.
One of the ways to prevent is never hidden the Home indicator under elements of your app. Also, try not to place any functional buttons or similar elements near the indicator. As a last resort, if you can’t avoid close neighborhood of interactive components of your app and the virtual Home button of iOS, use Edge protect – a special tool that ranks the gestures in order of importance. For example, if one and the same gesture is recognized by the system as both an in-app command and an external system operation, it will be perceived as an app gesture when used for the first time, and as a system command when used for the second time. There is much to be considered when developing apps for the non-standard screen of iPhone X. The tactics enlisted will help you to avoid common mistakes and get better results.
