Apple’s newest iPhone X model is now available. It features new features that could change how website designers optimize mobile websites. The display is 1125x2436px in resolution and features face recognition at the top.

Design challenges arise from the new features that make it so amazing. This device is taller and offers more vertical design space than the previous models. Some images are altered by the retina display. These are some changes that designers can make to ensure pages look great on iPhone X.

What’s New?

It is important to take a moment to appreciate the new iPhone before you can be successful when designing with it. These are just some of the changes that can affect web design services in Miami.

• Layout – The iPhone X’s corners are rounded, and the sensor that houses an indicator can block screen elements has been placed in the iPhone X.

• Notch – The iPhone X’s camera array is a standout and has been the topic of much debate. It replaces the previous touch ID with a face ID, which scans features to increase security. Sometimes, the scroll bar may disappear behind it. In other cases, sections might be missing from games.

• Color – iPhone X has richer and more intense colors than the previous model’s thanks to its P3 color space.

• Gestures – iPhone X uses facial recognition instead of a home button. To wake the screen, users tap it. Then they use screen-edge gestures for navigation.

Designers and developers face new design challenges with the new features, so they are revising existing apps to make them more compatible with the new device.

Using The New Size

The iPhone X is physically tall and has more screen space due to the elimination of the home button. Sketch and Photoshop artboards can be used to design the new phone at a resolution of 375×812.

Apple suggests that designers provide high-resolution images to accompany every app. For ultra-sharp renderings, images should contain pixels three times larger than the screen size. You will need to update a design that has full-screen images if you are updating an older design.

Super Retina Display’s 2436×1125 resolution packs all of those pixels into only 5.8 inches. You can supply glyphs and other vector artwork in PDF files, regardless of the resolution. There are @3x and @2x versions.

Also, the aspect ratio has been changed. On iPhone X, artwork that was large on a 4.7-inch iPhone will be cropped. Older models will not display images that are sized for iPhone X’s aspect ratio. Visual content that dynamically adjusts is recommended.

You can create an experience that takes advantage of the entire screen. Scrolling allows users to extend the design beyond the screen’s edges.

Display Shape Adjustment

Adjustments to the height and display may be necessary. The top of previous iPhones had straight edges and square corners. iPhone X features rounded corners. The notch scallops the top edge of the iPhone X, dividing it into two sections. The notch creates a strangely shaped space that presents unique design challenges.

Apple suggests that designers ensure layouts fill the entire screen, without losing focus to the sensor housing, home screen indicator, or rounded edges. Apple requests that designers make design choices that do not draw undue attention to changes and neither mask them nor draw undue emphasis to them. Do not place title bars below the status bar, or make the area of the status bar black to make it appear more rectangular.

While some apps can automatically adapt to new devices, developers should be aware of certain elements of mobile design which are specifically for positive UX. Simulators can be used by designers to visualize layouts with unique layouts. Xcode comes with simulators. Apple recommends that you preview apps on real devices. To make sure you have made the correct adjustments, you will need to get a new phone.

Layout margins provided by UIKit should be used when designing pages for the new display. It should be inserted symmetrically so that it can be viewed in landscape or portrait.   

iPhone X’s status bar is now taller than on previous models. It remains the same height regardless of background tasks. Apps that calculate content positioning using standard status bar heights need to be updated. New versions of apps should instead place content in accordance with the device it is displayed on.

The status bar is divided by the notch at its top. The space used to be 20 points high on previous iPhones, but it is now 44 points. If your UI used that space previously, ensure it dynamically adjusts between devices.

Some apps hide the status bar from previous iPhones. Apple requests designers to change that decision in order for current apps to use the full screen. Don’t hide the status bar. Instead, make it visible to its full potential. Instead of taking up screen space elsewhere, let users locate the information they are looking for in this area.

Some apps will have to be modified for face ID since users can no longer unlock their phones using touch ID. To avoid any confusion, make sure to check your onboarding menu and remove touch ID references. Adjust your app to work with new models if it uses touch ID for Apple Pay, or any other system.

Avoid Gesture Frustration

The new shape of the display was created for gestures. The iPhone X uses space around the home indicator to allow for user navigation. If buttons are placed near the edges or bottom of the display they may not be visible. It is possible for users to unintentionally navigate back to the home screen by adding an item to their carts or responding to your call to action.

To avoid frustration, place custom gestures in other places. You can still use tab and function bars, but be careful when placing them. Some apps will auto-hide your home screen indicator so that it fades away when it is not being used. This may cause confusion for iPhone X and should not be used for situations such as viewing photos or videos.

The future iPhone X owners will rely on the screen-edge gestures for navigation to almost all apps. To ensure that navigation and design elements are not too complicated, we tested new models of the iPhone X.

Use Vivid Color

iPhone X has a Display Color Space. This is in contrast to previous models which used standard Red Green Blue (sRGB). Apple encourages developers and designers to create visual elements that make the most of the iPhone’s capabilities.

Videos and photos have more impact and feel more real. New images should have embedded color profiles, even though default iOS uses sRGB. To create large color images and to choose P3 colors, designers will need a wide-color display.

Display P3 images will not display on computers and devices that are designed to display only sRGB. Continue to provide a separate set of sRGB assets that can be viewed on other devices than iPhone X. You can preview both types of devices, and you can make any adjustments as necessary.

Designers are challenged to think out of the box as they unbox the new iPhone. Keep in mind the changes made to the iPhone model so that you can create immersive and stunning experiences.