7 Design Tips for Building Successful Emails in 20160
As an email designer, it’s your job to provide subscribers with a functional email experience. This means eliminating friction that can erode the subscriber experience, and ultimately damage your brand image.
Achieving this goal is complicated by the fact that email is constantly evolving. It’s crucial to stay on top of the latest updates in the email world, especially when those changes—like new apps and updates to HTML and CSS support—can affect your carefully designed campaigns.
In the 2016 State of Email Report, we round up everything that happened in the email world last year, helping identify major innovations that can have huge implications for your email campaigns.
Here’s a sneak peek of what you’ll find inside:
1. KEEP THE APPLE WATCH IN MIND
In April 2015, the Apple Watch was launched. The addition of wearables to the email app fleet was inevitable—and it’s bringing with it some major implications for email designers. If your audience includes tech early adopters and potential Watch users, then consider the subscriber experience on the Watch.
Since Apple Watch displays plain text when remote or linked images are detected, it’s crucial to optimize the plain text version of your emails. Also note that special characters, extra spaces, and other formatting tricks reserved for desktop plain text consumption translate very poorly to the Watch’s small screen.
There is also a more advanced option to add a third part to your message: text/watch-html. By including this additional part and specifying the Content-Type as “text/watch-html,” the Watch will display the text/watch part instead of the plain text part when the HTML part is unsuitable. However, be sure to check with your ESP before adding the Watch part—not everyone supports it.
2. OPTIMIZE FOR IMAGE BLOCKING
Outlook 2016 and AOL’s Alto Mail app were both introduced in 2015—and each block images by default. Email designers should use defensive design techniques like ALT text, bulletproof buttons, and a proper balance of imagery and HTML text to combat image blocking.
3. DON’T HIDE YOUR UNSUBSCRIBE LINK
In September 2015, Gmail rolled out new “block” functionality to all Gmail webmail and Android Gmail app users, giving consumers yet another option to rid their inboxes of email they don’t want. When a subscriber “blocks” a sender it means they’ll never see an email from that sender again.
The upside is that the new “block” option should reduce spam complaints because some subscribers who would have previously clicked “report spam” will now click “block” instead. The downside is that the “block” button may have created a new, lower bar for ISP intervention, so some subscribers who might have previously clicked “unsubscribe” will now click “block” instead.
So what should you do? Make it easier to unsubscribe. If subscribers can’t easily spot your opt-out link, some will simply block your message or mark it as spam. If your unsubscribe link is buried in small gray type, it’s time to break it out on a line by itself with larger, easier-to-read text.
In addition, add the “list-unsubscribe” header and Gmail will, in certain circumstances, place an “Unsubscribe” link after your sender name and sender email address.
While this link allows subscribers to skip your opt-out process—including the preference center, if you use one—it’s still preferable to getting a block or spam complaint.
4. UPDATE YOUR INTERACTIVE EMAILS
In September 2015, Apple released the latest version of their mobile operating system, iOS 9. This updated operating system added support for a few new CSS properties—and introduced a few changes that are bound to frustrate email designers.
One such frustration? The general sibling selector (~) is not always supported. Litmus Community members Rémi Parmentier and Justin Khoo both reported that the general sibling selector ~ is not supported on iOS 9 when used with the :hover or :checked pseudo class selectors.
A lot of interactive emails use pseudo classes to check whether or not something has happened in an email and style elements appropriately depending on the state. However, this bug will cause formerly interactive emails to be static.
Luckily, there’s a fix! Simply replace the general sibling selector ~ with the adjacent sibling selector +. Although not as flexible as the less-specific general sibling selector, it achieves the same results.
5. USE TABLE-BASED LAYOUTS
In September 2015, Microsoft launched the latest version of their Outlook client—Outlook 2016. Unfortunately, it hasn’t changed much from its predecessors. Like Outlook 2007, 2010, and 2013, Outlook 2016 renders emails using Microsoft Word, which has poor support for HTML and CSS and has a ton of frustrating quirks.
More recent versions of Outlook (2007-2016) have poor support for HTML and CSS and include a number of quirks to keep in mind:
- No support for background images in divs and table cells
- No support for CSS float or position
- No support for text shadow
- Poor support for padding and margin
- Poor support for CSS width and height
- Problems with nested elements background colors
Due to its lack of support for many CSS properties, table-based layouts are a necessity for optimization in Outlook 2016. You can also use conditional CSS to target Outlook 2016 specifically.
6. USE MOBILE-FRIENDLY ELEMENTS
With 55% of email opens happening on mobile devices, it’s more crucial than ever to have a mobile email strategy in place. While using responsive design is a great option, you must also use mobile-friendly elements in cases where media queries are not supported.
For example, neither AOL’s Alto Mail app nor the Universal Outlook app, both of which were introduced in 2015, support media queries.
Take advantage of large text, touch-friendly buttons, and a single-column design to provide your subscribers with the best experience possible.
7. USE OPEN DATA TO MAKE DESIGN DECISIONS
While looking at industry-wide email open trends is a great indicator of adoption of certain email clients, it’s your audience that matters. It’s more important than ever to look at where your audience is opening their email and adjust your designs accordingly.
For example, we saw a 22% increase in iPhone opens in 2015, which now accounts for 33% of total email opens. If you’re seeing something similar in your own audience, you can use that data to inform your design decisions. We know that iOS, iPhone’s operating system, has excellent support for HTML and CSS, so you can safely use advanced techniques like HTML5 video backgrounds in our campaigns.
The key is understanding your audience. With Email Analytics, you’ll get the data you need to optimize your designs. Sign up for a free trial today. No credit card required.
GET THE 2016 STATE OF EMAIL REPORT
Want even more information and actionable takeaways? Get up-to-date on the latest email updates and advances by downloading the free report today.