Apple (again) reinvented the display with the introduction of the notch on iPhone X screens (soon on 3 more models, and likely, eventually, across the fleet). From a developer perspective, that innovation may not have been as popular. So much so, that Apple approved a "Notch Remover" app.
The introduction of the notch made it confusing for app developers to know exactly how to develop the app. There is what’s called a “safe area” to develop that does not include the notch and as a result, some apps do indeed decide to stay inside the “safe area”, creating a somewhat ugly layout:
Others expand outside the “safe area”, which comes with its own set of challenges:
Above is an example of how the notch will affect how the content and images render on the screen of the iPhone X.
To solve these problems, some are taking a hybrid approach (see YouTube above), where the movie is played inside the safe area but the ads aren’t, some clipping could happen.
Testing your app on the iPhoneX presents even more difficulties. When taking a screenshot or even a video from the device, it will result in a rectangular image. Observe the image above, note how the weather channel logo to the left is cut.
In contrast, the result of taking the video or screenshot from the device, show a perfectly rectangular shape above.
The examples above are the end result of working in the “safe area” and venturing outside of it. The iPhoneX notch is creating additional issues for developers, below are just a few pains that you might be experiencing if you try to develop the app without any additional help.
- Time – Obviously time is of the utmost importance when delivering a mobile website or app. If you cannot see the real-time website or app in your testing, you will find issues late, which will require you to redo the code you wrote, possibly undo code that’s built on top of it, and fix it all. You having to go back and forth is frustrating and will take you away from creating new code.
- Cost – “Time is money” as they say and if it’s taking valuable time away from developers and testers than it most certainly is costing you more money.
- UX – As a developer, you are responsible for rendering, but what if you have no idea there is a problem until it’s too late? Unhappy users and poor reviews…not fun!
So the question becomes how can a developer prevent this problem and validate what users will really see and adjust accordingly?
You might need help! Perfecto now offers a true rendered view from iPhone X. It shows accurately what will be shown to end users and developers can validate the rendered image. Whether in interactive or automated testing, the true rendered content is available to the developer/tester.