Anatomy of the Perfect Email Design - Amazon S3...2 Anatomy of the Perfect Email Design There are...

Marketing Guide | September 2013

Distractions, smartphones, and the mobile market are changing how and when we view our emails. How we design them has to change.

Anatomy of the Perfect Email Design

Anatomy of the Perfect Email Design2

There are basic elements that each email design should have in order to convey your message properly to your audience and bring about the desired response and results for your campaigns. Each component is part of the overall influence that design has over your open, click-through, and conversion rates. These elements make up the structure, the very anatomy of the perfect email design.

Do you Know Where your Emails are Opened?

There was a time when you could almost guarantee that your emails would either be opened at work or at home on a desktop computer. But today over 50% of the U.S. population owns a smartphone, and tablet penetration is growing rapidly. This means your emails could be opened from practically anywhere and from a much wider range of devices.

Email can be opened in a wide variety of email environments across the three broad categories of Webmail, desktop, and mobile devices, with mobile devices becoming one of the most popular places for checking email over the last few years. According to Litmus, 44% of the opens it recorded in July of this year came from mobile devices; and Google’s Our Mobile Planet notes that smartphones are commonly used in a wide variety of locations including on-the-go, at work, in restaurants and cafes, and at social gatherings.

4.6%

Somewhere else

39.1%

School

44.9%

Public transport

55.5%

Airport

82.1%

Restaurant

82.9%

In a store

95.7%

Home

83.8%

On-the-go

70.2%

At a social gathering/function/event

63.7%

Doctor’s office

61.2%

Cafe or coffee shop

71.3%

Work


While mobile trends are a significant influence on email design, marketers must also consider all of the other email clients out there that subscribers are using. Subscribers are still reading emails in Outlook, Yahoo, Gmail, and Apple Mail. Emails still need to look great in those clients for campaigns to be successful.

In fact, looking at overall email client market share, Outlook is still a hugely popular email client, with 18% of all email opens recorded by Litmus. Although no single Webmail client has a huge percentage of the market share, if you add them together, they do make up a significant portion of opens, and they also have their own design and coding challenges which need to be addressed.

Header

Navigation

Pre-header

Primary message

Secondary message

Footer

The Anatomy of the Perfect Email Design

Breaking your overall email design into manageable parts helps to maintain a consistent plan for your campaigns and sets the stage for what your readers will come to expect from your communications. Here are the overall elements that make up the anatomy of the perfect email design.


Pre-Header

A pre-header, as the name suggests, is simply an area at the very top of your email, just above the header where you can insert text and links.

The pre-header is important because the first piece of text within the pre-header actually shows up next to your subject line in many email clients such as Outlook, Gmail, and other mobile email clients. This basically acts as an extension to your subject line and has been proven to play a big part in helping subscribers determine if they want to open your email or not.

Unfortunately most marketers still haven’t optimized this section and so the most common pre-header text is still “click here to view online” or “Please add us to your address book to ensure you receive our emails.” Such links shouldn’t be removed entirely. They should just be arranged so that the first line contains a message related to the content of the email.

It’s good practice to think of your pre-header text as an extension of your subject line, and to be creative and not just repeat your subject line.


Key points to remember for your pre-header:

• The Pre-header text is an extension of your subject line.

• The first line of text in your pre-header should be a marketing message which outlines the content of your email.

• Don’t delete your “view online” link – place it next to or underneath your marketing message.

• Be creative– don’t repeat your subject line.

Header

The header usually consists of your logo, navigation, forward to a friend, social media icons, phone numbers, and any other relevant or useful information for subscribers.

The header is one of the first things that subscribers see when they open an email. It’s where people look if they want to click through to a specific section of your website or find contact details. For that reason it tends to be one of the most clicked-on areas of an email. It’s also somewhere that people tend to click if they don’t see anything in the primary content area that they’re interested in.

A recommended design tip for headers is to keep them consistent with your website header. This not only makes your email instantly recognizable but also makes you look more trustworthy. If your branding is off then it’s possible that your subscribers could mistake you for a spammer.


When it comes to optimizing your email header for mobile, it’s better to simplify rather than trying to squeeze everything in, since space on mobile devices is a very precious commodity. By using a responsive design to hide your navigation and other links, you allow the subscriber to focus on your primary message. Since mobile users are often multitasking while they use their device, the less distractions you have, the better.

This is a great example from John Lewis of how to optimize an email header for mobile—and probably an ideal solution for most companies. It used a responsive design to hide everything within the header apart from the logo and the first four navigation links. It’s a simple solution and doesn’t detract from the primary message, but still gives subscribers a few other opportunities to click through.

Key points to remember for your email header:

• Make sure that it contains a logo, navigation, social media links, and any other information, such as phone numbers, that might be useful for your subscribers. Keep the branding consistent with your website as this will help make your email look more trustworthy and instantly recognizable.

• Use responsive design to simplify it for mobile users.

Primary Message

If you had the choice of showing your subscribers only one section of your email, the primary message would be it. The reason that you are sending an email, whether it’s selling something, promoting a new service, or encouraging people to sign up for an event, should be very clearly shown within this section. Ideally it should just be one message; don’t dilute your email by trying to add as many messages as possible.

You should also keep your primary message fairly concise. One or two paragraphs maximum is a recommended length. A few years ago it was quite common to see extensively long, copy-heavy emails, but in reality people don’t spend long enough on an email to read that much text.


SC Johnson’s Right@Home newsletter is a great example of a best practice primary message. It contains all of the key elements that should be included: a large bold title, one paragraph of text, a nice image, and clear call-to-action.

Key points to remember for your primary message:

• Limit this section to the one main message that you want to get across to your subscribers.

• Don’t go overboard and write a novel; your subscribers should be able to read your primary message in less than 10 seconds.

• Make sure it contains a large title, one paragraph of text, a clear call-to-action, and an image.

Secondary Message

Secondary messages usually sit underneath or on the right-hand-side of your primary message. There are often multiple secondary messages, and they usually contain less content than the primary message. Even with pinpointed, targeted segmentation you’re probably never going to be able to please everyone with your primary message, and secondary messages give you another opportunity to add some value through additional content or products that your subscribers might also be interested in. Again, like the primary content, your secondary content should also contain a large title, a short description, a call-to-action, and an image.

Many brands try to overload their emails with as many secondary messages as possible, and then end up with a huge email that actually deters many subscribers and dilutes the primary message.

Research shows that having too many choices leads people to stall and avoid choosing altogether. The same thing applies to emails. It’s better to include three strong messages rather than everything from your website and blog. Plus, most subscribers are going to spend less than 10 seconds reading an email. It’s always a good idea to scan your email to see if you are able to pick out all of the key points in under 10 seconds. If not, then you might want to think about cutting some of your secondary messages.

Image

Short decription

Clear call-to-action

Title


Key points to remember for secondary messages:

• Give subscribers additional stories or products to click through to in case they aren’t interested in your primary message.

• Secondary messages should contain a title, one paragraph of text, a call-to-action, and an image.

• Don’t overwhelm your subscribers with too many secondary messages.

Call-to-Action

The call-to-action simply tells your subscribers what you want them to do, whether that’s to buy your latest product, sign up for an event, “Like” you on Facebook, or download a whitepaper. Every email you send should have a very clear and well defined call-to-action.

Unfortunately, you often still see “Click here” as a call-to-action. Obviously, this is better than not having a call-to-action, but you should really try to be more creative. “Click here” just isn’t very compelling and doesn’t really describe what you want your subscriber to ultimately do. In the example above, See’s Candies uses great call-to-action phrases such as “Shop Lollipops and More” and “Enter the Sweeps” to entice its readers to click for a specific reason, and find out more information.

Using large HTML buttons is becoming more prevalent, and they are also easy to click on mobile devices and can still be seen when images are blocked.

Key points to remember for calls-to-action:

• Each primary and secondary message within your email should have a clear call-to-action.

• Calls-to-action that are more descriptive are more effective than generic terms such as “Click here.”

• Ideally your calls-to-action should be coded in HTML and large enough to easily click on when using a mobile device.


Footer

The footer is the last section of your email, and it usually contains your address, phone numbers, useful links, privacy policy, and social media icons.

The footer is actually an extremely important and highly-underrated part of an email. Most brands don’t really give it much care or attention but if it’s done correctly it can significantly increase your click-through rate.

If the footer contains several interesting or useful links, companies will see improved response rates. If subscribers don’t see anything that interests them within the primary or secondary content sections of an email, they still might want to click through to a specific section of your website or social media pages, all located within the footer.

Unfortunately, the footer often serves as a hiding place for unsubscribe links within the Terms and Conditions content of an email. If a subscriber doesn’t want to receive your emails anymore, hiding the unsubscribe link isn’t going to keep them on your list; if anything, it’s going to encourage them to mark your email as spam, which will hurt your sending reputation.

Key points to remember for your footer design:

• Make sure you include useful information such as addresses, phone numbers, and links back to your website.

• If you get it right, you can increase your click-through rate by 5 -10%.

• Simplify your email design for this section for mobile users.

• Don’t hide your unsubscribe links.


Create your den

Alternative text

A Word about Image Blocking

According to Litmus, 67% of major desktop email clients, 100% of Webmail clients, and 80% of mobile devices don’t display images by default. Why? Image blocking is used by email clients to combat spam emails, which mainly consist of images. The idea is that if images aren’t enabled by default, it will discourage spammers because it reduces the chances of their emails being seen. Unfortunately, a large number of legitimate senders also like to send emails with lots of images, which requires more creative approaches to getting around this issue.

One way to make emails stand out with images turned off is by adding colorful backgrounds to your tables and ensuring that every image has some alternative text which tells the subscriber what they would see if the images were turned on, as in this example from Urban Outfitters.

Another solution is to code your emails with a good text-to-image ratio, so that most of the main messages and calls-to-action are easy to read with images turned off. Additional benefit of doing this is that it improves your deliverability. As mentioned previously, spammers tend to send image-only emails, so having a good amount of HTML text within your email tells Internet Service Providers that you aren’t a spammer.

Some brands have gone to extreme lengths to make their emails stand out with images turned off. This email from Playstation which shows the transformers logo with images disabled is so cleverly done that it actually went viral on Reddit. The email looks so interesting with images turned off that it likely achieved a high open rate. However, it takes a substantial amount of time to code an email like this, so it’s not something you would do for every campaign.


Another option to beat image blocking is to use a tool which converts images into HTML tables. As you can see in this example, the Samsung and social media icons are still visible with images blocked.

still visible with images blocked

So why not convert every image in an email into HTML with one of these tools? There are a few caveats: for example, converting an image into HTML will really increase the weight of an email and can make it slower to download. So, it’s best to stick to small brand logos and social media icons when using these tools.

Key points to remember about image blocking:

• It really is worth putting time and effort into optimizing your campaigns for image-blocking when you consider how many email clients block images by default.

• Whether your emails are image-only or a mixture of images and text, there are many ways that you can optimize your campaigns.

• Ideally though, you should have a high text-to-image ratio to improve deliverability.

Here’s another great example from Lego:


Optimal Email Measurements

Email measurements vary widely in terms of width. You have likely received emails from 320 pixels — the width of an iPhone— to horizontal emails which can be as wide as 2000 pixels, like this example from Crate & Barrel.

Because there is such a variety of screen sizes and email environments in which subscribers will read your email, 500 - 600 pixels is still considered to be the ideal width. Generally speaking, an email which is between these widths will render well and be easy to read in most of them.

Since the number of mobile users is only increasing, you should lean towards a skinnier width or try using a responsive design which adjusts the width of your email when it’s viewed on a mobile device. This will ensure that your messages are easy to read.

Steps for Optimizing Email Design

Objectively look at each section of your email separately and assess where improvements could be made. For example, does your pre-header contain some useful text promoting the content of the email, or does it just say “Click here to view online?” Does your header have a navigation and social media icons, is the call-to-action in the primary content section easy to read and click on, and most importantly, does it encourage subscribers to take action?

It’s also worth analyzing click maps to see where people are currently clicking on your email. You should be able to identify the most clicked regions of your email and areas where there is room for improvement. Most brands could probably increase their click-through rate by 5 - 10% by adding a cluster of useful links to the footer of their emails.

Heat map tools such as Eye Quant will also give you a good indication of the areas of your emails which stand out the most. Ideally, you want the main call-to-action within the primary content to be the area which stands out the most.

You should also use a tool like Litmus to track your subscribers and find out what devices they are actually using to read your emails. You can then customize your template for those particular devices and email clients.

2000 pixels


Thoroughly testing any changes you make, in as many different email clients as possible, will help you identify issues before the emails reach your subscribers. Unfortunately, email clients tend to render emails differently so your email could look great in one client and terrible in another.

Testing your email on a real mobile device is incredibly important to ensure it’s easy to read, navigate, and click through on. This will give you a much better feel for how truly mobile-optimized it is, rather than relying on a preview tool.

And finally, always make sure that you thoroughly test any changes that you make before you roll them out to your entire database. This tends to be something that many marketers forget about until the last minute, but it should be a key element of your optimization plan.

To make testing seem less daunting, create mini testing plans for each section of your email. Examples would be: a plan for the pre-header, another plan for the header, and so on.

Then, all that’s left to do is record the results and make incremental improvements. Before you know it, you’ll have a best practice template which gets you much higher open, click-through, and conversion rates.

Conclusion

How and when subscribers view email has become less and less predictable, and marketers are challenged to adapt to this ever-changing environment with design best practices that help you stay a step ahead of the expectations of your tech-savvy audiences. The rewards of doing so are significant: optimal engagement with subscribers that brings about the desired response and revenue from your email campaigns.

Keep these key actions in mind as you work to improve and maintain your email performance:

• Assess each section of your current email template individually – how could each be improved?

• Analyze click and heat maps to determine where your subscribers are currently clicking.

• Find out what email clients your subscribers are using – optimize with the top email clients in mind.

• Actually try interacting with your emails on a mobile device – how easy is it to navigate, read, and click?

• A/B split test your improvements until you’re sure what works best, then roll them out to your entire database.

lyris.comCopyright © 2013 Lyris, Inc. All rights reserved.

North America

United States Corporate HQ 6401 Hollis Street, Suite 125 Emeryville CA 94608 USA

Toll-free +1800.768.2929 Intl. +1510.844.1600 Fax +1510.844.1598

Latin America

Argentina Luis Maria Campos 1059 3rd floor (C1426BOI) Ciudad de Buenos Aires

Main +54 (11) 4777 2557 Brazil +55 (11) 3711 5698 Mexico +52 (55) 4169-1779

Europe EMEA

United Kingdom 1 Vincent Square Victoria, London SW1P 2PN

Main +020 7630 2960 France +33 176 66 00 23 Sales +020 7630 2961 Support +020 7630 2962

Asia Pacific

Australia Citigroup Centre, 2 Park Street, 39th Floor Sydney, NSW 2000, Australia

Phone +61 2 9004 7316 Support +1800 179 675

Contact

About Lyris, Inc.

Lyris is a leading global provider of digital marketing solutions that help companies engage with customers in more meaningful ways. Lyris products and services empower marketers to design, automate, and optimize data- driven interactive marketing campaigns that facilitate superior engagement, increase conversions, and deliver measurable business value. Lyris’ high-performance, secure, and flexible digital marketing platforms improve marketing efficiency by providing automated digital message delivery, robust segmentation, and real-time digital channel analytics. The Lyris solutions portfolio is comprised of both in-the-cloud and on-premises offerings – Lyris HQ and Lyris LM – combined with customer-focused services and support. More than 5,000 companies worldwide partner with Lyris to manage and execute sophisticated digital marketing campaigns across email, social, Web, and mobile channels. Learn more at www.lyris.com.

Anatomy of the Perfect Email Design - Amazon S3...2 Anatomy of the Perfect Email Design There are...

Documents

Transcript of Anatomy of the Perfect Email Design - Amazon S3...2 Anatomy of the Perfect Email Design There are...