{"id":4745,"date":"2017-09-15T00:00:00","date_gmt":"2017-09-15T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones\/"},"modified":"2024-04-17T15:01:28","modified_gmt":"2024-04-17T19:01:28","slug":"what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones","title":{"rendered":"What Email Marketers Need to Know About iOS 11 and the New iPhones"},"content":{"rendered":"

With <\/span>iOS Mail accounting for about a third of all email opens in the first half of 2017<\/span><\/a>, updates to the iPhone family and changes to the mobile operating system and its email client can make a big impact on the email world. Now, after Apple\u2019s big event on September 12th, we know that it\u2019s not one, but three new iPhones\u2014iPhone 8, 8 Plus, and iPhone X\u2014that will make their way into consumers\u2019 hands soon, along with the new mobile operating system iOS 11. <\/span><\/p>\n

But what does that mean for email marketers? <\/span><\/p>\n

While iOS 11 won\u2019t be released to the public before September 19th, <\/span>the golden master (GM) version of iOS 11<\/span><\/a>\u2014that\u2019s the operating system version that will be released to the public in a few days\u2014was made available to developers on September 12th. We\u2019ve taken a close look at the latest version of iOS and Apple\u2019s preview of their new phones to break down the details every email marketer must know.<\/span><\/p>\n

\n\n\n\n
\"How<\/td>\n\n

How does your email look in iOS 11?<\/h2>\n

See how\u00a0iOS 11 renders your email with Litmus Email Previews for iPhone X, iPhone 8, iPhone 8 Plus, and more popular email clients and devices.<\/p>\n

Learn about Email Previews\u00a0\u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

iOS Mail still supports HTML5 video<\/h2>\n

Apple\u2019s back and forth on HTML5 video support for its mobile email client has caused confusion among email marketers for years. Apple supported HTML5 video in iOS 7, then removed video support with the launch of iOS 8 back in 2014, only to reintroduce it with the release of iOS 10<\/a> in 2016. \u00a0<\/span><\/p>\n

Then, earlier this summer, the email community noticed<\/a> that Apple may have pivoted, with an early version of the iOS 11 beta not showing support for HTML5 video\u2014again.<\/p>\n

So, what\u2019s the deal with HTML5 video in the final iOS 11 release?\u00a0Marketers who love the interactivity and creative freedom that HTML5 video adds to email campaigns can breathe a sigh of relief: <\/span>Video is still supported in iOS 11<\/strong>, with support on both iPhone and iPad.<\/span><\/p>\n

However, note that the poster attribute (poster=\u201d\u201d) is required to display a preview image of your video in the email. Previously, without a poster image defined, the first frame of the video would show. In iOS 11, however, the video appears as blank.<\/p>\n

Screen sizes\u00a0& resolutions for iPhone 8 and 8 Plus<\/h2>\n

There are no changes in screen sizes with the iPhone 8. Both the iPhone 8 and iPhone 8 Plus have the exact same screen sizes and resolutions as their predecessors (iPhone 7 and 7 Plus).<\/span><\/p>\n

\n\n\n\n\n\n\n\n
<\/td>\n\n

iPhone 8<\/p>\n<\/td>\n

\n

iPhone 8 Plus<\/p>\n<\/td>\n<\/tr>\n

\n

Screen sizes<\/p>\n<\/td>\n

\n

4.7 inches<\/p>\n<\/td>\n

\n

5.5. inches<\/p>\n<\/td>\n<\/tr>\n

\n

Resolution<\/p>\n<\/td>\n

\n

1334\u00d7750<\/p>\n<\/td>\n

\n

1920\u00d71080<\/p>\n<\/td>\n<\/tr>\n

\n

Pixel Density<\/p>\n<\/td>\n

\n

326ppi<\/p>\n<\/td>\n

\n

401ppi<\/p>\n<\/td>\n<\/tr>\n

\n

Pixel Density Ratio<\/p>\n<\/td>\n

\n

2<\/p>\n<\/td>\n

\n

3<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

With that, all media queries that were in place for the iPhone 7 family will work just as well for the new iPhone 8 phones.<\/span><\/p>\n

iPhone 8 (Zoom View):<\/strong><\/p>\n

 @media screen and (max-device-width: 320px) and (max-device-height: 568px) { \/* Insert styles here *\/ }<\/code><\/pre>\n
iPhone 8 (Standard View) and iPhone 8\u00a0Plus (Zoom View):<\/strong><\/p>\n
@media screen and (max-device-width: 375px) and (max-device-height: 667px) { \/* Insert styles here *\/ }<\/code><\/pre>\n
iPhone 8 Plus (Standard View):<\/strong><\/p>\n
@media screen and (max-device-width: 414px) and (max-device-height: 776px) { \/* Insert styles here *\/ }<\/code><\/pre>\n
Screen sizes\u00a0& resolutions for iPhone X<\/h2>\n
With the iPhone X, Apple introduces a brand new screen size to the mix.<\/span><\/p>\n
\n\n\n\n\n\n\n\n
<\/td>\n\n
iPhone X<\/p>\n<\/td>\n<\/tr>\n
\n
Screen size<\/p>\n<\/td>\n
\n
5.8 inches<\/p>\n<\/td>\n<\/tr>\n
\n
Resolution<\/p>\n<\/td>\n
\n
2436×1125<\/p>\n<\/td>\n<\/tr>\n
\n
Pixel Density<\/p>\n<\/td>\n
\n
458ppi<\/p>\n<\/td>\n<\/tr>\n
\n
Pixel Density Ratio<\/p>\n<\/td>\n
\n
3<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
With 5.8 inches in diagonal, the display on iPhone X is taller than the one on iPhone 8 Plus. What\u2019s important, though, is that the width of the display on iPhone X matches the width of the 4.7 inch displays of the iPhone 8. The increase in screen size comes from the fact that the screen is 145pt <\/span>taller<\/span><\/i> than a 4.7 inch display. <\/span><\/p>\n
\"Screen<\/figure>\n
While more screen sizes often mean more trouble\u2014and more cases to optimize for\u2014the fact that the screen width remains the same is great news for email designers: No changes in width means that existing media queries will work for the iPhone X, too. <\/span><\/p>\n
iPhone X media query:<\/strong><\/p>\n
@media screen and (max-device-width: 375px) and (max-device-height: 812px) { \/* Insert styles here *\/ }<\/code><\/pre>\n
At the same time, the iPhone X provides roughly 20% additional vertical space for content\u2014that\u2019s more emails on display in the inbox and more of your content visible once your email is opened.<\/span><\/p>\n
Fixing scaling issues in iOS 11<\/b><\/h2>\n
Autoscaling issues in Apple\u2019s mobile mail app have first surfaced with the release of <\/span>iOS 10 in September 2016<\/span><\/a>. With iOS 11, we keep seeing this bug. As the community reported in several Community discussions (see <\/span>here<\/span><\/a> and <\/span>here<\/span><\/a>), emails aren\u2019t spanning the full width of the screen but appear zoomed out and off-centered.<\/span><\/p>\n
\"Scaling
An example of an off-centered email in iOS 11 as shared by Community member Rasmus Bidstrup<\/figcaption><\/figure>\n
You can prevent iOS 11 from automatically scaling your email by adding the following bit of code to the head of your emails:<\/p>\n
<meta name=\"x-apple-disable-message-reformatting\"><\/code><\/pre>\n
A big thank you to <\/span>Rem\u00ed Parmentier<\/a>\u00a0for\u00a0<\/span>sharing this fix with the Community<\/span><\/a>. <\/span><\/p>\n
Optimize for high pixel density<\/h2>\n
The iPhone X comes with that Apple calls the <\/span>Super Retina Display<\/span><\/i>. With 2436 x 1125 pixels\u2014or 458 pixels-per-inch\u2014that\u2019s the highest pixel density ever seen on an iPhone display. <\/span><\/p>\n
And with that, <\/span>optimizing your email\u2019s images for high-DPI screens<\/span><\/a> is more important than ever. If you\u2019re not accounting for high-resolution displays, you run the risk of looking careless to subscribers. Because of the way high-DPI displays work, non-optimized images end up looking blurry and pixelated on retina screens. Here\u2019s an example:<\/span><\/p>\n
\"Non-Retina
Non-Retina v. Retina Images<\/figcaption><\/figure>\n
You can ensure your images appear crisp and clear by multiplying the number of pixels in each image by a specific scale factor. In other words, create your images in larger formats so that, when they\u2019re scaled down in the email, there are more pixels for retina screens to display. For the iPhone X and all Plus versions of the iPhone family, <\/span>Apple recommends a scale factor or 3x; for all other displays it\u2019s 2x<\/span>. <\/span><\/p>\n
As we increase the dimensions of an image, however, the file size increases, too. That increased size cuts into a subscriber\u2019s data plan and can cause an email to load slowly. Both issues are a big problem and create a less-than-friendly user experience. Image optimization tools can <\/span>help compress your images to reduce file size<\/span><\/a> while at the same time ensuring your emails look great on high-DPI displays. <\/span><\/p>\n
iOS 11 targeting<\/h2>\n
Last year, <\/span>R\u00e9mi Parmentier<\/span><\/a> found that it\u2019s possible to use @supports declarations in CSS to target iOS 10 specifically.<\/span><\/p>\n
We can target iOS with the proprietary property \u201c-webkit-overflow-scrolling\u201d that is only supported on iOS. If we use this in combination with one of the properties supported exclusively in iOS\u2019 most recent webkit versions\u2014 #RGBA color notations, for example\u2014we can specifically target iOS 10 and above.<\/span><\/p>\n
Here\u2019s a media query that will target iOS 10:<\/strong><\/p>\n
\n@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {\n\/* Insert CSS here *\/\n}\n<\/code><\/pre>\n
If you\u2019d like to specifically target iOS Mail in the most recent version of Apple\u2019s operating system\u2014that\u2019s iOS 11.0, 11.1, or 11.2\u2014@support declarations combined with padding properties will do the trick:<\/p>\n
Target iOS 11.0 & 11.1<\/strong><\/p>\n
\n@supports (padding-left:constant(safe-area-inset-left)) {\n\/* Insert CSS here *\/\n}\n<\/code><\/pre>\n
Target iOS 11.2<\/strong><\/p>\n
\n@supports (padding-left:env(safe-area-inset-left)) {\n\/* Insert CSS here *\/\n}\n<\/code><\/pre>\n
Did you spot any other updates that we missed? Let us know in the comments below.<\/p>\n
\n\n\n\n
\"See<\/td>\n\n
How does your email look in iOS 11?<\/h2>\n
See how\u00a0iOS 11 renders your email with Litmus Email Previews for iPhone 8, iPhone 8 Plus, iPhone 7, iPhone 7 Plus.<\/p>\n
Learn about Email Previews\u00a0\u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
With iOS Mail accounting for about a third of all email opens, updates to the iPhone family and changes to the mobile operating system and its email client can make a big difference to the email world.<\/p>\n
We\u2019ve taken a close look at iOS 11 and Apple\u2019s preview of iPhone 8, 8 Plus, and iPhone X. Here’s what email marketers, designers, and developers need to know.<\/p>\n","protected":false},"author":3,"featured_media":4746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478,102,90],"blog_category":[53],"class_list":["post-4745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","tag-html","tag-ios","blog_category-tips-resources"],"yoast_head":"\nWhat Email Marketers Need to Know About iOS 11 and the New iPhones - Litmus<\/title>\n<meta name=\"description\" content=\"With iOS Mail accounting for about a third of all email opens, updates to the iPhone family and changes to the mobile operating system and its email client can make a big difference to the email world. We\u2019ve taken a close look at iOS 11 and Apple\u2019s preview of iPhone 8, 8 Plus, and iPhone X. Here's what email marketers, designers, and developers need to know.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Email Marketers Need to Know About iOS 11 and the New iPhones\" \/>\n<meta property=\"og:description\" content=\"With iOS Mail accounting for about a third of all email opens, updates to the iPhone family and changes to the mobile operating system and its email client can make a big difference to the email world. We\u2019ve taken a close look at iOS 11 and Apple\u2019s preview of iPhone 8, 8 Plus, and iPhone X. Here's what email marketers, designers, and developers need to know.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-15T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-17T19:01:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/ios-11-whats-new.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What Email Marketers Need to Know About iOS 11 and the New iPhones - Litmus","description":"With iOS Mail accounting for about a third of all email opens, updates to the iPhone family and changes to the mobile operating system and its email client can make a big difference to the email world. We\u2019ve taken a close look at iOS 11 and Apple\u2019s preview of iPhone 8, 8 Plus, and iPhone X. Here's what email marketers, designers, and developers need to know.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones","og_locale":"en_US","og_type":"article","og_title":"What Email Marketers Need to Know About iOS 11 and the New iPhones","og_description":"With iOS Mail accounting for about a third of all email opens, updates to the iPhone family and changes to the mobile operating system and its email client can make a big difference to the email world. We\u2019ve taken a close look at iOS 11 and Apple\u2019s preview of iPhone 8, 8 Plus, and iPhone X. Here's what email marketers, designers, and developers need to know.","og_url":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2017-09-15T00:00:00+00:00","article_modified_time":"2024-04-17T19:01:28+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/ios-11-whats-new.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones"},"author":{"name":"","@id":""},"headline":"What Email Marketers Need to Know About iOS 11 and the New iPhones","datePublished":"2017-09-15T00:00:00+00:00","dateModified":"2024-04-17T19:01:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones"},"wordCount":1159,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/ios-11-whats-new.png","keywords":["Design","HTML","iOS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones","url":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones","name":"What Email Marketers Need to Know About iOS 11 and the New iPhones - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/ios-11-whats-new.png","datePublished":"2017-09-15T00:00:00+00:00","dateModified":"2024-04-17T19:01:28+00:00","description":"With iOS Mail accounting for about a third of all email opens, updates to the iPhone family and changes to the mobile operating system and its email client can make a big difference to the email world. We\u2019ve taken a close look at iOS 11 and Apple\u2019s preview of iPhone 8, 8 Plus, and iPhone X. Here's what email marketers, designers, and developers need to know.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/ios-11-whats-new.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/ios-11-whats-new.png","width":1380,"height":724},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/what-email-marketers-need-to-know-about-ios-11-and-the-new-iphones#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"What Email Marketers Need to Know About iOS 11 and the New iPhones"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=4745"}],"version-history":[{"count":3,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4745\/revisions"}],"predecessor-version":[{"id":96172,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4745\/revisions\/96172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/4746"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=4745"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=4745"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=4745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}