The iPhone X is here; it’s time for brands to update their iOS apps.

TribalScale Inc.
TribalScale
Published in
4 min readNov 8, 2017

--

By TribalScale’s Product, Design & Engineering Team

The new iPhone X was announced in September and is now available in stores. There are a number of changes to the hardware of the new iPhone that can drastically affect the UI/UX designs of many applications. Now is the time for developers, designers, and app owners to re-evaluate their current iOS apps and consider how they can be revamped for the new iPhone X.

The edge-to-edge iPhone X display is revolutionary, but the implications for developers and designers for iOS are huge. Entire user experiences can be changed as a result. How will notifications be displayed? Will any UI elements be cut off with the new bezel-less screen?

We created a guide to discuss some key design and development considerations for the new iPhone X, based on our research and experience working with our current clients. Receive a copy of our full iPhone X Design and Development guide here.

Major Differences Between iPhone X and Current iPhone Devices:

  • The device screen features rounded corners
  • Edge-to-edge 5.8-inch, super retina display (compared to 4.7-inch of the iPhone 7 and 8)
  • New status bar with a split layout and different height
  • Addition of a notch on the top of the screen for the TrueDepth camera system that powers Face ID
  • Home button is replaced with a Virtual Home Indicator, which requires users to swipe up or tap the screen to wake up the device

If apps are not updated for the new iPhone X, it will run in compatibility mode, where the app layout will not fill the entire screen. Instead, it will be letter-boxed, and apps will be unable to take full advantage of the larger screen real-estate.

App layout in letter-box mode on an iPhone X

Apps not compatible with the iPhone X may impact user experience in the following ways:

  • Rounded corners and a missing home button may cut-off sections of apps, especially the navigation bar that is normally at the top and/or bottom of many apps
  • The edge-to-edge display will force incompatible apps into letter-box mode, creating white spaces at the top and bottom of the screen
  • The status bar height will change with the new iPhone X, meaning an app’s top navigation or assets will cut-off and fail to display properly
  • An app’s screen-edge gestures may override or interfere with the new system-level gestures that allow users to access the Home Screen, App Switcher, Notification Center, and Control Center
  • Images that previously were compatible with the @2x resolution and sRGB colour displays on older iPhone models will appear in lower quality on the new @3x resolution and P3 colour space display on the iPhone X

Learn More

To take full advantage of the new high-resolution edge-to-edge display, apps should be designed to support various aspect ratios and orientations of current and future iPhone devices. Your teams should also consider the compatibility of your apps in the following areas: screen resolution, layout, screen size, and safe areas.

For more details on how you can optimize your app for the new iPhone X, click the link below to receive a copy of our iPhone X Design and Development Considerations Guide. The guide covers how the new iPhone X will impact your user’s app experience, as well as design and development considerations to help you optimize your app for the new edge-to-edge screen experience.

TribalScale has a history of assisting companies adapt to changing hardware and software specifications, and has excelled in creating sleek applications for iOS that evolve and age well over time. Our Product Managers, Designers, and Engineers will work with your team to understand how your app will be impacted in order to create the best strategy for updating your app.

Join our fast growing Tribe and connect with us on Twitter, LinkedIn & Facebook! Learn more about us on our website.

--

--

TribalScale Inc.
TribalScale

A digital innovation firm with a mission to right the future.