6 Design Tips for Building Successful Emails in 2015

[ 0 By
The latest version of this report is live! Check out the 2016 State of Email Report.

Email design is more than just an art—it’s a craft that drives results and revenue. As an email designer, you understand the importance of keeping up with the latest changes in the email world, especially when those changes—like new apps and updates to HTML and CSS support—can affect your carefully designed campaigns.

Unfortunately, that’s not always an easy task, which is why we released our 2015 State of Email Report. In it, we take a look at all of the latest email updates—and their potential effects on your designs.

Download the free report →

Here’s a sneak peak at some of the tips and takeaways you’ll find in the report.

Adjust your media queries

Due to the popularity of previous iPhone models, 320px became the standard breakpoint for media queries. With the introduction of the iPhone 6 and iPhone 6 Plus, there is no longer one media query that works for all iPhones.

iPhone 5

iPhone 6

iPhone 6 Plus

Display

4 in. 4.7 in. 5.5 in.

Dimensions

1136 x 640 px 1334 x 750 px 1920 x 1080 px

PPI

326 326 401

Device-Pixel-Ratio

2 2 3

Media Query Breakpoint

320px 375px 414px

The new screen sizes mean that designers will have to update their media queries when targeting iPhones (and other mobile devices) in responsive emails.

Use mobile-friendly elements

With over 50% of email opens happening on mobile devices, it’s more crucial than ever to have a mobile email strategy in place.

We love seeing the rise in responsive email design. Unfortunately, not all mobile email apps support media queries—most notably heavyweights like the Gmail app and Inbox by Gmail. As a result, designers need to incorporate mobile-friendly elements like large text, touch-friendly buttons, and simplified layouts into their designs.

Updates to image blocking

Similar to its predecessors, the new Outlook for Mac 2015 blocks images by default. Email designers should use defensive design techniques like ALT text, styled ALT text, and background colors—all of which are supported in this client—to combat image blocking.

On the flip side, Gmail began automatically displaying images in late 2014. While you should still use ALT text, you can rest easy knowing that your design will display as intended in Gmail.

A more visual inbox

Gmail’s Promotion tab grid view

Google has made massive strides creating a visually enticing inbox for subscribers. Gmail’s Promotions tab grid view—which is currently available for users that have opted in and are using the Gmail web interface—is Pinterest-esque with its large graphics and infinite scrolling.

gmail-promo-tabs

Source: Official Gmail Blog

To define which image will be pulled into your grid view, you’ll need to implement specific markup—called schema—into the HTML of your email. We’ve developed a handy (and free!) Gmail Promotion Tab Code Generator to help you create the code that you’ll need to add to your HTML.

If this schema isn’t included, Gmail uses an algorithm to determine which image should be featured. The sender name and subject line comes from your actual subject line, while the sender image is pulled from your company’s verified Google+ profile. If you don’t have a verified Google+ profile, the logo will be the first letter of your sender name.

Inbox by Gmail Highlights

Inbox by Gmail also takes the concept of a visual inbox to a whole new level with Highlights. With Highlights, information from an email is showcased in the inbox view under the sender image, from name, subject line, and preview text.

inbox-highlights

Similar to the Promotions tab grid view, you can implement a schema to include these visual elements in the inbox view. With schemas you can add images and reservation information directly within your subscriber’s inbox. Talk about creating an engaging email experience for your subscribers!

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 7% increase in Apple Mail opens in 2014, which now accounts for 8% 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 Apple Mail has excellent support for HTML and CSS, so we 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.

The first code editor built for email designers

Email designers have long been stuck using tools created for web design. With the community’s help, we launched the first code editor built for email designers by email designers: Litmus Builder.

Litmus Builder has a ton of features tailored specifically to email design, including real-time mobile and desktop previews, template and snippet support, images on/off views, and direct integration with Email Preview testing. It is made to let you build, test, and share campaigns faster and better than ever before.

Builder access is included in all Litmus subscriptions, or you can sign up for a free Builder-only account. Get started with Litmus Builder →

GET THE 2015 STATE OF EMAIL REPORT

Want even more information and actionable takeaways? Stay up-to-date on the latest email updates and advances by downloading the free report today!

Download the 2015 State of Email Report →

Prefer to check out all the details and takeaways in a presentation format? We have that available, too!