iOS 13, Dark Mode, and Apple’s new iPhones: Here’s What Email Marketers Must Know

Today, thousands of iPhone fans will make their trip to the Apple store to pick up their brand new iPhones. Plus, even more will update their phones to iOS 13—Apple’s newest mobile OS—over the next couple of days. If your subscribers are among them, will that impact how your emails look? 

While screen sizes and resolutions for the new iPhones remain the same (that’s great news for email marketers!), there’s one thing you must be aware of: With iOS 13, Apple introduces Dark Mode to its mobile phones, including the native iOS Mail app—and that might impact how your emails display for your clients. 

Why you should keep an eye on Apple updates

With 27% of all emails read on Apple’s iPhones, changes to Apple’s phones, the mobile operating system, and its email rendering can make a big difference to the email marketing world. If your audience looks similar to the global average and you see a lot of your subscribers opening your email on iPhones, you’ll have to make sure that your emails look great and perform in that reading environment. 

Don’t want to spend thousands of dollars on a brand new iPhone testing device? You don’t have to. We’re excited to share that email previews for iOS 13 on the newest iPhone are now available in Litmus. 

How does your email look in iOS 13? See how iOS13 renders your email with Litmus Email Previews for the iPhone 11. Learn more →

Screen Sizes and Resolutions for the New iPhones

Apple’s September release introduced three new iPhones: the iPhone 11, iPhone 11 Pro, and iPhone 11 Pro Max.

With a screen size of 6.1 inches for the iPhone 11, 5.8 inches for the iPhone 11 Pro, and 6.5 inches for the iPhone 11 Pro Max, the new iPhones have the same dimensions as their predecessors (iPhone XR, XS, and XS Max). The resolution, pixel density, and pixel density ratio are identical as well.  

iPhone 11

iPhone 11 Pro

iPhone 11 Pro Max

No changes in device sizes are great news for email marketers and designers. If you’ve used specific media queries to target each of Apple’s iPhones in the past, those work just as well with Apple’s newest models. 

If you don’t target specific sizes but use a breakpoint for triggering responsive styles, you don’t need to make any changes either since that breakpoint is the same as with previous iPhone models: 414px. Setting the media query to target max-device-width: 414px will make sure that responsive styles are shown on all three of the new iPhone models.

@media screen and (max-device-width: 414px) { /* Insert styles here*/ } 

Dark Mode is coming to Apple’s iPhones

Last year, Apple brought Dark Mode to its desktop operating system, allowing users of MacOS Mojave to switch to a darker color palette for all windows, views, menus, and controls, making the interface more suitable for work in low-light environments or at night. 

With iOS 13, this popular feature is coming to Apple’s iPhones, too. Let’s look at how that might impact your emails.

How emails render in Dark Mode on iOS 13

The good news first: Similar to Dark Mode for MacOS, the new Dark Mode on Apple’s iPhones does not impact HTML emails by default. Dark Mode is only applied to personal and plain text emails. Even if you do not have a background color defined in your HTML email, the background is still rendered as white. So you don’t have to worry about Dark Mode messing with your code or rendering experience for regular HTML emails out of the box.

However, bright-colored email backgrounds can create a very jarring experience for subscribers who read email in Dark Mode. Having your screen switch from the dark inbox view to a really bright email (and vice versa) is exhausting to the eye and doesn’t make for a great reading experience for the subscriber.

So what can you do to improve the reading experience? With Dark Mode on MacOS, email designers and developers didn’t have an opportunity to target Dark Mode specifically. Instead, all they could do was opt for color choices that worked well in both bright and dark views. 

With iOS 13, however, email developers are able to target Dark Mode, and deliver a custom experience for subscribers opening in Dark Mode.

How to target Dark Mode on iOS 13

As emailgeek Thomas Steiner noticed while playing with the iOS 13 beta this summer, Apple introduces a brand new media query that allows you to specifically target email clients that are set to Dark Mode. 

Our experiments also show that targeting Dark Mode on iOS is surprisingly simple:

@media (prefers-color-scheme: dark) { 
/*Insert all your dark mode classes here, as you would insert mobile responsive classes./ 
 /* Remember to use !important to override inline styles */
} 

Using this media query, you can set custom styles that only apply when your email is opened in a client that’s set to Dark Mode. That means you can use different background colors, font colors, or even images for subscribers who open on Dark Mode. 

Want to see it in action?

Here’s one of our recent webinar emails optimized for iOS 13 Dark Mode:

When opened in iOS 13 Dark Mode, the email will display using a dark background. Plus, to make sure you can still see the Litmus logo on the dark background, we’ve set this email to use a different version of our logo—the one that uses a white font—to guarantee it’s readable and looks great on Dark Mode. You can check out the full email code here.

Start testing your emails in iOS 13 today

Litmus Email Previews for the iPhone 11 are available in your Litmus account, so you can start testing right away. Not a Litmus customer yet? Get started with Litmus today.

Bettina Specht

Bettina Specht was the Senior Content & Lifecycle Campaigns Manager at Litmus