What device, browser, or app do you use for email? According to Litmus, email opens on mobile devices topped 50% for the first time in December 2013. This means that overall more users were checking email on a phone than on a computer. Numbers will vary based on the target audience, however this is a trend that should continue.
So what can you do to best target these on-the-go users? There are several strategies in email design, each with pros and cons.
A scalable email design is built with a single layout that is used across all devices, from mobile to desktop. The email is generally built for the desktop view and in mobile the email looks like a zoomed out version of the desktop view.
Pros: Easy to implement. Looks great on desktop.
Cons: Poorer user experience for mobile. Smaller text and buttons means the user needs to pinch and zoom.
2. Mobile First
A “mobile first” email design is usually a simpler, cleaner design, with content in a single column. The main body text is larger, usually 16px, and buttons are larger and easily clickable on a mobile device. The basic intent of a mobile-first email design is to make sure the email is easily viewable and clickable on a mobile device. The desktop view looks the same as the mobile view.
Pros: Looks great on mobile devices. Simpler design is usually easier to implement.
Cons: Desktop view can be less than ideal, with larger buttons and text.
Email width changes to fit the screen size. Sizes for content and images are percentage based instead of fixed width, with text wrapping automatically.
Pros: Images and text resize automatically to fill the screen
Cons: Text can look really stretched out on a wider screen.
Responsive email design uses media queries to show different content to different size devices. Basically, you can define a set of rules for how each item in the email displays on different size screens. Responsive design gives you the most control over how an email renders. This can range from simple changes to the font or hiding or showing entire elements on one screen size or another.
Pros: Very flexible. Able to create designs that work well on different size devices.
Cons: Not supported by a few key email providers (most notably, Gmail). More complex. Needs lots of testing.
There are several different options for designing email templates. All have pluses and minuses and range from simple to complex. With more and more emails being opened on mobile devices, mobile-friend emails are a must. Responsive email design is certainly the way things are moving today.
Responsive design gives you the most flexibility, with one big drawback…lack of support in some email clients, including both the Android and iPhone Gmail apps as well as web-based Gmail on the desktop. To counteract the lack of support for responsive design, consider designing an email that looks great on Gmail without media queries. Once your email looks good there, then apply responsive media queries to make your email look great on any device.