iPhone 6 and 6 Plus: Responsive Email Design Optimisation

by Melle Staelenberg
29 September 2014
Responsive design

Responsive design

Responsive design is making sure content displays well regardless the device type used. By coding in so called ‘break points’, the HTML will adapt based on the width of your screen. For email, it is common to use 2 break points: one between mobile and tablet and another one between tablet and desktop. Responsive design works beautifully on iPhones and iPads – many Android phones support responsive design as well, but not all of them (Samsung’s built in mail app tends to disable media queries, depending which version you are on). As a result, responsive design best practice principles are commonly based on the consistency around Apple devices – for many of our clients, the iPhone’s mail app also happens to be the most popular email client, well above Outlook or web clients such as Gmail.

Bigger iPhones

All iPhones from the first model up used to have one thing in common: a screen that displays content as 320px wide. Although the introduction of ‘retina’ displays four years ago doubled the resolution, iPhones up to the 5s model still serve up content in the same width (generating a clearer, not larger, picture). With the launch of the latest generation iPhones, email designers now face the challenges of rebuilding mobile emails to cater for screens of 375px and 414px wide as well.

So what to do now?

If you have not optimised your current email designs beyond 320px, you might have noticed the iPhone 6 and 6 Plus display white borders on the left and right of your email creative (similar to the black borders you see on TV when watching old 4x3 footage). Not an immediate issue as such (you still get to see more of the email without scrolling as the screen is also longer), but this ‘dead space’ is fairly noticeable on the larger 6 Plus and makes the screen look a bit narrow

There are different ways to address the new screen sizes:

  • Start designing for the width of the iPhone 6 (using 375px), where content for older devices will be scaled down to 320px.
  • Introduce an extra ‘break point’ at 375px and/or 414px.
  • Use fluid design for resizing between break points.

Why Salmat?

Salmat Digital is Australia’s leading provider of responsive email designs, sending out emails on behalf of more than 100 clients. With an in-house Creative Agency, our team of email experts design and code email campaigns varying from marketing newsletters to electronic bills. Serving many of Australia’s largest brands, our responsive design experts code up to 300 new campaigns every month!

Find out more about Salmat's email offering here or call us on 1300 725 628.

50 search marketing tips

Page 1 of 2
  < 1 - 2  > 
About the author
Melle Staelenberg
Business Manager

Melle has been with Salmat since 2010. In his current role, Melle is responsible to maximise business value from Salmat’s core products, including email and mobile. His product expertise combined with a strong focus on research and a healthy dose of creativity helps driving Salmat’s digital roadmap. Melle holds a Masters degree in Business Economics and a BA in New Media & Digital Culture and is passionate about all things digital. Being Dutch, he likes to cycle – he’s also a big Ajax fan (the football team, not the cleaning product)!

More articles by Melle Staelenberg