As the iPhone 6 and iPhone 6 Plus introduce larger screen sizes to the market, it’s important to know what these changes mean, and how they will affect the way that recipients see your emails. The big change is the size and scaling on the larger of the two new handsets, the iPhone 6 Plus. To put this in context, let’s start by looking at how the iPhone screens differ from other displays. One of the key differences between the iPhones and the majority of other screens is the way they render graphics to make the most of their high-pixel-density Retina displays.

On some Android devices, high pixel-density displays are used to fit more content on the screen, thus making things smaller than the designer may have intended. However, newer iPhones (and a few high-resolution Android devices) instead render graphics at the size they were intended by introducing a ratio between the pixel dimensions of a graphical element, and the actual number of physical pixels used to display that element. This is called “device-pixel ratio.”

For example, the original iPhone displayed 1 designed pixel as 1 physical pixel, but the iPhone 6 has double the amount of pixels for the same display area so the element render fits 2 physical pixels. This means that the effective pixel width of the screens for the purposes of designing graphics is 375 px and 414 px respectively for the iPhone 6 and iPhone 6 Plus ‘ this is referred to as the ‘device-independent pixel width’. This means that text and images appear smoother as the individual pixels are smaller and less visible. iPhones make this adjustment automatically so existing emails will render accordingly. But due to the iPhone 6 Plus’ much expanded screen and device-independent pixel width of 414px, there will still be pixels left over after the ratio has been applied to the standard 320px width of mobile responsive emails. The remaining pixels will therefore be rendered as additional background space either side of the email.                        

Increased screen sizes and resolution

Given the amount of email opened on iPhones, and the fact that the iPhone screen was one of the narrowest among smartphones, mobile-optimized email have traditionally been designed to the standard of 320px wide. However the introduction of the iPhone 6 and iPhone 6 Plus means that, for the first time, there are now 3 different widths of iPhone screen sizes to consider. And combined with the many other screen sizes and resolutions across phones and tablets, email designers may now find that the two-version responsive email approach that has been commonly used to date needs modifying. There are two main alternatives that can be used to allow the best mobile-optimized experience in email.

Through the use of media queries, designs can be made specific to each screen size. The email could be resized to show different designs/layouts at incrementally smaller breakpoints. For example, a different design at 414px, 375px and 320px. This would include 3 versions of each design, specially optimised images, layouts and HTML builds. The alternative is a fluid responsive email, where the media query is not constrained by display sizes but is designed so the email’s layout and elements will react to the device’s dimensions and simultaneously reorder/stack. This fluid approach offers less control over the HTML, but will adapt to all screens.

Expanded inbox

On both iPhone 6 and iPhone 6 Plus, the extended screen means that in the native account, a greater number of emails are displayed in the inbox. There is also a bigger preheader space for each email, so more of the snippet and hosted version link text is visible in the inbox. This means that more information or branding can be conveyed at this stage, before the email is opened. This can also be adjusted through the phone’s settings. Once the email is opened, the additional height of the screen allows more content to be viewed above the fold. Again, this could mean more information can be displayed upfront, potentially allowing more chances for conversions.

The landscape view in the iPhone 6 Plus shows a scaled down preview of the selected email to the right of the inbox. Unlike in the iPad though, the inbox and sidebar cannot be collapsed to view the email at full screen and most commentators predict that emails will typically be viewed in portrait-view so it remains to be seen how much the preview pane is used.

Usability

As with other mobile devices with screens sizes that fall into ‘phablet’ territory, the iPhone 6 and iPhone 6 Plus will change how people interact with emails due to their physical size. Using the phones one-handed restricts how far across the screen thumbs can reach, so it may be useful to bear this in mind when designing for mid-size screens and test placement before rolling out new templates.

Last updated: Oct 17, 2016