iPhone X: What you need to know about marketing emails on the device

Posted on November 13, 2017

The latest iPhone is out in the wild and its screen and features are incredible. What does that mean for email marketers and ecommerce shops, though?

Since this new form factor is what Apple is likely to push all of their devices to over the next few years, getting your emails and marketing design language updated to support the early adopters of the iPhone X is a smart idea and something you shouldn’t put off for later.

Let me run you through the big changes of the iPhone X and show you how to cater your emails to these new devices.

The Screen is Taller. Have your emails embrace this.

The aspect ratio on the new phone has changed! The screen is noticeably taller and you’ve got a little more real estate to work with now. The iPhone X screen aspect ratio is 19.5:9, so about 20% larger than the 16:9 ratio of most of the smartphones. Take this into mind when laying out your emails. Apple also recommends keeping a “safety zone” around the edges of the screen. Check out these images from Apple’s Human Interface Guidelines (commonly referred to as the HIG) about placing content margins for the new edgeless display.

The Resolution and Color are Unreal. Have your photos take advantage of it.

The new OLED screen means that images will look even better on this high color depth, high resolution screen. Apple states “-The display on iPhone X supports a P3 color space, which can produce richer, more saturated colors than sRGB.” Plan to take advantage of this screen as the color profile will result in more true-to-life images with astonishing clarity. While some may see this as an extra step in their testing workflow, you’ll want to take a good look at all your images on this screen before sending them out–as some colors may look noticeably different on this device. Additionally, optimizing your images for high DPI displays is crucial to ensure quality content on this new display.

Embrace the Notch (or how to target iPhone X specific layouts)

Here’s a media query to target the iPhone X: @media screen and (max-device-width: 375px) and (max-device-height: 812px) { /* Insert your iPhone X specific styles right here */ }

Using this media query means that you can tinker with your layout for the iPhone X independently and get your email looking just right with the new dimensions.

Another major consideration to take here is the landscape layout with the notch. You’ll want to bump your content “in-and-around” the notch, using iOS 11’s new viewport-cover tag. Initially, you’ll end up with an email that looks like someone took bite out of the content, a bit like this:

Apple directly addresses how to fix this in the HIG.

“To achieve this, WebKit in iOS 11 includes a new CSS function, env(), and a set of four pre-defined environment variables, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. When combined, these allow style declarations to reference the current size of the safe area insets on each side.”

.post {
padding: 12px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);

With the above CSS modifications and taking advantage of ‘safe-area-x’, you’ll end up with something that looks more like this:

Clearly, this is an improvement. The header and footer blend nicely with the notch now.

While this example shows a simple webpage, you can easily extend this idea to your emails. You should also match your background color with your elements near the notch and seek a widescreen look that integrates nicely with the entire phone and “fills” the two curved areas near the notch.

Now that we have taken these new design constraints into consideration, get out there and build some beautiful emails optimized for the iPhone X. Already making beautiful iPhone X emails? Forward some to me and I’ll share them in a follow up post.