Email design

Step 1. Find the right image

When first thinking about your email design find the right imagery that will best convey your message. In this specific use-case we are looking for images that have a healthy amount of uniformly colored negative space around an isolated subject. Negative space is the blank space around your subject or main focal point. This amount of colored negative space can be replicated into the background of the email. Thus creating a continuous background that makes a strong statement and helps the viewer focus on the message. These images are examples of photographs with excellent amount of negative space.

 

 

Pro tip: Color has strong psychological effects on how your audience perceives your company and messages. Use that to your advantage by letting color emphasize your message (trying to build drama use black, alerting the public use red, want to be taken seriously perhaps a deep blue?).

Step 2. Match and fill the background color

The default for all emails background color is transparent.

Pro tip: On screen, transparent is typically portrayed as white (white is typically the default background color for most things). Be sure to always set your background color as this may be effect how your audience will view your message.

In this case we are looking to match the background color of the image. You can do this by sampling the hex color that is in your hero image and plug that figure into the background color. Once both the background colors of the image and email match then you achieved a continuous background.

Step 3. Build graphic elements that work with the color

After establishing your color background begin creating or placing design elements and compliment the color. Do this with product tools like type, social, buttons, etc. But if you are looking to use icons or illustrations then find or source graphics that have a transparent background. This will ensure that whatever is placed on top of the design will not clash with the background.

Step 4. Incorporate image backgrounds in content blocks

All content blocks within composer have the functionality of uploading a background image instead of a color. This is helpful if you need to create complex messaging or need a layering effect in your design. To do this you would drag and drop a block onto the composer and then choose background image opposed to color. Then, follow the same steps as before by finding the right image that will match your background. Next, you can overlap text, buttons, and imagery.

Pro tip: Background images are perfect for having an image behind your logo or to emphasize a message. Be sure to pick imagery that is simple and not too busy.

HTML body

Most email clients today can read HTML. It is still a good idea to send a plain text message for those email clients that either cannot read HTML or are configured for text-only messages. Sending both an HTML and plain text message allows the email client to decide which one to display.

There are a couple of reasons why you should include an HTML body in your email:

Tracking opens

When you send a text body, the only time you can tell if someone opened the message is if the recipient performs an action like clicking a link. The moment an HTML body email is opened, it is tracked.

Links

HTML allows you to include links in your content. If you send a plain text message and you want to track your URLs, that URL is going to be long and messy unless you use a service like Tiny URL. Unfortunately, this issue cannot be avoided. Plain text messages do not allow you to mask your URLs.

Plain text body

You can create a text-only version by taking the content from your HTML version and applying the following formatting practices: Use a plain-text application, such as Notepad or TextEdit. Word-processing applications can create formatting and character issues.

• Make your text content easy to scan by establishing clearly defined areas for a header, main content, and a footer in your message. Consider including an area for call-to-action links.
• Use a combination of white space and formatting visual-aids to make content easier to scan. For example, use hyphens for bullet lists and use a line of 50 = characters to separate content.
• Keep company branding and the most relevant content as close to the top as possible.
• Reduce the amount of text.
• Keep URLs on their own lines. This makes them easier to find and use. It also makes your message easier to read. If you must include a URL within the text, separate it from the surrounding content with parentheses or square brackets.
• Many email clients automatically convert text that appears to be a URL into a clickable link, which is not tracked. Make sure that your URLs are fully formed, such as: http://www.your-company.com.
• Use one of the following options to define text width:
  • Force line breaks for the entire message of 50 - 60 characters. This limits the width of the message and makes it easier to read. However, you can't be sure where an email client or screen resolution forces line breaks. This approach works best when the message is displayed on a desktop monitors that use the full-screen.
  • Don't force line breaks and let the text flow and wrap naturally. This approach works best on mobile or smaller resolution screens. The text might not be as easy to read on a desktop monitor, but text versions of emails are more likely to be read on smaller or lower resolution screens.

Images

Many email clients block images by default. Recipients must manually enable the display of images. Don’t rely on images to convey your message and make sure that offers and important content are text-based.

Optimize image file size

Optimize images to keep file sizes as low as possible while keeping an acceptable level of image quality.

Image dimensions

The default email width in composer is 600 px. For images we'd recommend a maximum image size of the following:

Drag-and-drop layout	Maximum
Full width section images	600 px
2 column section images	300 px
3 columns sections images	150 px

Define widths and heights for all images. This allows your layout to remain intact even when images are blocked. Messages can appear different and difficult to read when images with undefined dimensions are suppressed. You can check for this during testing by previewing your messages with images disabled.

Text in images

Text in images is not visible when images are disabled or unavailable. Also, text in images cannot be personalized directly from list data and require image-editing capabilities to make changes. Include alternate text attributes even if they are blank, which is coded as alt="".

Background images

Background images are not supported in several email clients. If you want to use a background image, define supporting background colors that might help the look of the message where background images are not available. Text on a gradient or texture should be a standard foreground image for consistent rendering.

Continuous background color

Designing continuous background color emails where your message elements float on top of a single color is great a way to create provocative and focused emails. Build one of your own or check out our templates.

Animated GIFs

Web-based email clients support animated GIFs, but desktop clients such as Outlook and Notes do not. Email clients that don't support animated GIFs display only the first frame of the animation. If you use an animated GIF, ensure that the first frame of the animation includes meaningful content.

Accessibility

Make sure that everyone can receive and understand your message, regardless of any disabilities or assistive devices they may use. Subject lines are important, use headers, use tables, use contrasting colors for backgrounds and text. Use meaningful link text instead of click here. Use helpful descriptions in ALT tags within your images. Test. And try reading it using assistive technologies like screen readers. Most operating systems have a screen reader built-in that you can use.

ALT attributes

Alt attributes provide alternative text content when images are not available. They are used by screen readers for visually impaired recipients. Consider the function of the image to help determine the alternate text. Don't provide alternate text for images that don't communicate content. For example, an image that is used as a border doesn't need alternate text. In this case, leave the value blank (alt="").

Dark mode

Dark mode adjusts the background and font colors of an email to light on dark.

Pro tip: It's difficult to apply dark mode or responsiveness to an email that is already created and does not contain those elements. It's better to start from scratch knowing you want dark mode and/or responsive email.

HTML tips

With the multitude of email client, browser, and platform combinations, it may not be possible to make your messages appear the same to all recipients. However, if you adhere to these proven best practices, you can code to one widely compatible standard for consistently reliable rendering.

General HTML quick reference

• Code your messages with the HTML 4.01 transitional document type definition or lower and declare its use at the beginning of the code. See W3C for details on the 4.01 transitional DTD.
• Include the DTD definition at the top of your code.
• Specify character encoding, which is either ISO-8859-1 or UTF-8.
• Forms should be hosted on your website or as a landing page, like one of ours, where they can be linked to from within your emails.
• Use CSS3 media queries to provide alternate responsive styles for mobile device rendering.
• If you include comments, keep them to a single line.
• Use only inline CSS and limit that to font-related definitions only. Embedded and external CSS is not widely supported and is a common cause of rendering issues.
• Do not use div or span tags for positioning or CSS-based layout. This approach doesn't work in email.
• Do not rely on cellpadding, cellspacing, or CSS padding and margins. They are not supported and can cause to rendering issues.
• Set the background color for an entire message by using a parent table that is 100% wide with a bgcolor value.
• Replace the following characters with HTML entities or use ASCII equivalents: © ® ™ – — … ’ " UTF-8 encoding supports © and ® directly.
• Do not use embed tags.
• Host all images. Do not attach images.
• Avoid background images.
• Include alt tags for all images. For images where alternate text is not relevant, include a blank <alt> tag. For example, <img... alt="">.
• To display Arabic content right to left use <p dir='RTL'></p>. When you type in Campaign, the text will still go left to right, however, after you publish or preview, it should display correctly. You could also create your HTML in a text editor, such as Notepad.
• Before you test or send an email, be sure to validate the code and correct any issues. A good source for validation is W3C Markup Validation Service.
• Code for multiple screen types and test extensively in as many email clients as possible.
• The presence of any scripting language code is almost always flagged as potentially malicious and leads to your message being kept out of inboxes by any respectable spam filter. To protect against this, HTML email bodies are automatically stripped of any scripting language when found.

Warning: If you use a user-defined span class code, the break tag </br> might be moved out of the span class, for example, <span class="text-spacer"></span><br/>.

The Document Type Definition (DTD)

At the top of your HTML code, include the document type definition or DTD. The DTD defines the markup language specification that is used and determines how the browser or email client interprets and renders the HTML. Some email clients might strip the DTD, but it should be included during development for code validation.

HTML email can safely be coded as either HTML 4.01 Transitional or XHTML 1.0 Transitional. HTML 4.01 Transitional is recommended because it has fewer coding requirements than XHTML 1.0 Transitional.

XHTML 1.0 Transitional supports the entire HTML 4.01 Transitional specification. It also requires that all tags and attributes are lowercase and that all tags are properly closed. Tags that do not have a separate closing element, such as the <BR> tag in HTML 4.01, require a closing space and slash in XHTML. For example: <BR />.

The following example shows the code for the respective DTDs. Select one of the DTDs to include before the opening HTML tag.

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Character encoding

In the head of your HTML code, define the character encoding. Character encoding determines what characters can be displayed in your message. There are two types of character encoding:

• ISO-8859-1 (ASCII)
• UTF-8

The American Standard Code for Information Interchange (ASCII) is a character encoding standard based on the English alphabet. It is the default character set used in American digital communications. The ASCII character set is represented in the Western European character encoding, which is defined in HTML as:

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

For emails that consist of non-English language characters, use the UTF-8 character set because it supports all languages. For example, if your message requires the Chinese character set, you must use the UTF-8 character set, which is defined in HTML as:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

UTF-8 is becoming the dominant character encoding of the web with many Internet standards organizations that require full UTF-8 support in email programs. It is also increasingly becoming the default encoding for operating systems, programming languages, applications, and APIs. In fact, UTF-8 can be used for English language emails as well because it supports the entire ASCII character set as well as international characters. It also supports symbols such as ® and © without any HTML conversion required.

Cascading style sheets

Cascading style sheets (CSS) are used to code presentation elements on the web. There are three different ways to include CSS:

• External CSS points to an externally hosted style sheet file. External CSS is not supported.
• Embedded CSS is code that is defined in the head of the HTML code. Embedded CSS is poorly supported across desktop email clients.
• Inline CSS is defined where is it needed, throughout the document. Inline CSS is the only reliable option for styling your email content.

The following list of inline CSS properties are consistently supported among the major email clients. The supported properties are mostly limited to basic font-related definitions. There are no margin, padding, or positioning properties.

• Font-family
• Font-size
• Font-weight
• Color, which is used for defining link colors
• Text-decoration
• Display, which is used in image tags to fix a bug in Gmail and Outlook.com.

For example:

<TD style="font-family:arial,helv,sans-serif;font-size:12px;color:#ff0000;">Sampletext.</TD>

Do not to use short values for CSS. For example, use #FFFFFF not #FFF.

Do not use list styles because they are not supported in several clients.

There are two exceptions where embedded CSS can be effectively used:

• As fixes for well-known bugs in email clients that don’t strip out embedded CSS
• CSS3 media queries for styling content specifically for mobile devices

Special characters

The following table illustrates the special characters that might require special attention when they are used in email. These characters can’t be typed directly into your message and can be problematic by displaying as blocks or question marks.

Description	Character	HTML entity	ASCII equivalent
Copyright	©	©	(C)
Registered trademark	®	®	(R)
Trademark	™	™	(TM)
En dash	–	–	–
Em dash	—	—	—
Ellipsis	…	…	…
Apostrophe	'	’	'
Open quote	«	“	«
Close quote	»	”	»

If you use these characters in your email, replace them with either the HTML entity (in HTML code) or the ASCII equivalents (in text content). It is common practice to use the ASCII equivalents for the apostrophe, quote, em dash, en dash, and ellipsis characters in your HTML, although the HTML entities are the typographically correct characters.

Consider setting the auto-format and auto-correct options in your word-processing application to use the ASCII equivalents of these characters instead.

Note: UTF-8 encoding supports © and ® directly.

Comment tags

Comments are great for labeling or explaining source code. Comments can be used safely, but only if they begin and end on the same line. There should be no hard breaks between the comment start and end tags.

If you comment out sections of your code, remove any content that you don't want displayed before you send. AOL Mail displays content that was commented out if the comment mark-up spans multiple lines.

Email address links

Email addresses that appear in messages are usually converted into links. If you want to retain control of the appearance of your message, code email addresses as mailto links. Then, you can apply a color style to the link and make it consistent with the rest of your design. Apply this link to email personalization strings also. For example:

<a href="mailto:%%email%%" style="color:#ff0000">%%email%%</a>

Spacing issues

Don't use padding or margin styles to control the spacing in your HTML message because these styles produce mixed results across major email clients.

Yahoo! Mail does not handle spacing between <p> tags the way you would expect. Instead of adding a line of white space between paragraphs, it adds only a line break (<BR> tag). Instead of using <p> tags, use two line breaks tags or table cells for consistent content spacing.

Tables

• Define <table> and <td> widths.
• Do not use height definitions for table and table cells.
• Remove extraneous spacing between table cell content and the closing </td> tag.
• Where necessary, control spacing with table cells. Do not use CSS margin and padding styles.
• Provide space for cell content in table layouts that break when cell dimensions are exceeded.
• Simplify table structures where possible by stacking tables to reduce rowspan and colspan needs.

Nested elements

Campaign rearranges nested elements if the outside HTML element is not closed correctly.

The proper syntax of an anchor tag that contains an image tag is as follows:

<a href="www.yourcompany.com"><img src="logo.gif"/></a>

This example creates an image that, when clicked, goes to yourcompany.com. The initial anchor tag does not contain a forward slash, which is correct.

An anchor can be built improperly, with a forward slash in the closing tag like this example:

<a href="www.yourcompany.com"/><img src="logo.gif"/></a>

In this example, rearranges and rewrites the elements like this example:

<a href="www.yourcompany.com"></a><img src="logo.gif"/>

In this example, the image is no longer part of the link and the template does not work as intended. Be sure to use correct syntax and always test your templates before you send your email.

Note: MHTML is not supported.

Bullet color

You can include non-black colors in your messages by adding HTML code that defines the colors into the original HTML before you import it into the system.

You can use or modify the following sample code in your HTML:

<html> <body bgcolor="#FFFFFF" text="#000000"> <divstyle="color:#ff0000;"> <ul> <li> <font color="#000000">Apple</font><li> <font color="#000000">Orange</font> <li> <fontcolor="#000000">Grape</font> </ul></div></body></html>

Importing HTML

• Don't import HTML created by any Microsoft™ Office application. HTML created from Microsoft Office applications has many non-standard XML references, as well as div and style tags, that are not supported in most email environments. If you import HTML created from an Office application into the application by using the Import HTML feature, you might see many errors. If you choose to do this, use the Paste from Word tool in the email layout.

• Name all your links before you import HTML to avoid issues later. If you import your HTML without names for your links, Campaign automatically assigns names by using the first characters of the URLs.

HTML and CSS limitations in email client

Recipients use many different email clients, each of which might have known issues and workarounds.

Familiarize yourself with what an email client is doing when a user opens an HTML email.

Not all email clients support all elements. We recommend that you thoroughly test your emails before you send. For example, some emails clients don't support custom fonts. If an email client doesn't support a web font we'll replace it with a standard font instead.

Litmus provides guidance as to why do some email clients show my email differently than others.

Mobile responsiveness

Mobile devices are quickly becoming the majority of email opens. Unless your messages are designed for multiple screen types, your desktop-geared designs are likely to result in a frustrating experience for mobile recipients.

Regardless of the approach you use, apply these mobile-specific best practices to improve your results.

• Plan for desktop and mobile throughout the entire design process.
• Start with the standard email best practices.
• Use CSS3 media queries to provide a responsive mobile email experience where possible.
• A minimum font size of 14 px is recommended for easy reading on smaller screens.
• Provide ample space for touch interaction. 44 px by 44 px is the recommended minimum size for tappable elements.
• Use single column layouts.
• Reduce the amount of content that is shown in mobile versions. Focus on providing only content that is most relevant to your primary message goals.
• Keep your layout simple and easy to scan.
• Keep styles as lean and simple as possible.
• Use code comments and restrict them to one line per comment.
• Use images sparingly and wisely. Where possible rely on typography, contrast and color instead.
• Position calls-to-action wisely. The upper-left area of the message is prime real estate for mobile email clients that do not yet support media queries. Include a Click-to-view in browser link here so that users can open your message in web browser.
• Test extensively with multiple screen sizes and resolutions. Use a tool such as email insights add-on, which allows you to preview the rendering of your messages in over 30 different major email client and device combinations from your interface.
• Hide navigation bars, icons, and any other potentially distracting, non-essential elements.
• Avoid clustering links. Links that are too close together are difficult to interact with on a touch interface.
• Use high-contrast designs because they are easier to read in different lighting conditions. Think about indoor and outdoor lighting conditions.
• Avoid horizontal scrolling.

Coding approaches for multiple screen types

A modern and effective email marketing strategy addresses the needs of both desktop and mobile recipients. The following approaches to coding can help you accomplishing that balance.

Scalable
This approach might be easiest to implement because of its use of familiar HTML coding practices and a single layout design. The key elements of this approach are a narrow message width and a simple layout that is easier to read and interact with on mobile devices. However, this mobile-friendly presentation might appear awkwardly narrow when viewed on larger displays.

Fluid
When you use percentages to define all table-related widths in your layout, your content fluidly wraps to fill the available screen area. For example, instead of defining two columns as 600 and 200 pixels wide, you define them as 75% and 25%. By doing so, the table column widths scale up or down, and the content shifts and re-wraps as you resize the browser or view the content on different-sized devices. This approach results in less control over how the recipient sees your message and can be awkward-to-read text areas for large displays.

Adaptive
By using CSS3 media queries to trigger specific sets of styles, you can target specific resolutions and display corresponding fixed-width layouts. For example, in addition to including a standard fixed-width desktop layout, you can target the resolution of an iPhone by using a media query. A tailored layout is presented when your message is viewed on that device. However, one drawback is the wide range of devices with different screen resolutions. CSS3 media query coding is required as well as additional development time and effort to create and test each layout.

Responsive
Truly responsive design combines the best of fluid and adaptive approaches by incorporating CSS3 media query styling and percentage-based widths. A responsive email scales and wraps the content to fit 100% of the screen regardless of the recipient's device. CSS3 media query coding is required as well as additional time and effort to create and test.

Adaptive and responsive coding

Note: To incorporate an adaptive or responsive approach to your email coding, you must have a working knowledge of CSS.

The key to adaptive and responsive emails is to combine media queries with strategically-placed classes or IDs. Media queries are included in the head of your HTML code. In the following example, look for the tag @media.

Note: You must refer to HTML elements by using attribute selectors, as shown in the sample code because of a bug in Yahoo! mail.

<head>
<style type="text/css">
/* Standard email client bug fixes */
div, p, a, li, td {-webkit-text-size-adjust: none; }
.ReadMsgBody { width: 100%; }
.External Class { width: 100%; }

/* Smartphones */
@media screen and (max-width: 480px) { }

/* 100% width control */
table[class=full-width], img[class=full-width] {width:100% !important; height:auto !important;}

/* Text size */
span[class=subheadtext] {font-size:20px !important;}
span[class=content] {font-size:16px !important;}

}

/* Medium screen tablets */
@media screen and 9min-width: 481px) and (max-width: 649px) {
table[class=full-width], img[class=full-width] {width:100% !important; height:auto !important;}

}
</style>
</head>

Media queries contain styles that refer to elements included throughout the message content. They are activated only when certain conditions are met and override conflicting styles. In the previous example, styles are activated when the screen or browser width falls in the ranges of either 1 - 480 pixels or 481 - 649 pixels.

Desktop email clients receive the standard layout as included in the HTML document without any of the media query styles applied.

When this message is viewed on a smartphone with a screen 480 pixels wide or less, the first set of media query styles are triggered. In that situation, any table whose table tag contains the attribute class=”full-width” re-scales and the contents wrap to 100% of the available width. The other styles in that media query are also activated and the result is an alternative layout, where the tables are stacked vertically, and the text is formatted to be easier to read on a smartphone.

Note: Not all mobile device email clients support CSS3 media queries. However, iOS and Android email clients account for the majority of mobile opens and they support media queries. Email clients that do not support media queries display the full sized desktop layout as they would if you hadn’t included any responsive or adaptive code. For these email clients, include a Click-to-view in browser link in the upper left of the email. This part of the message is visible without scrolling or zooming. When recipients click that link, your email opens in a web browser where your media query code is used and the content is displayed as you intended.

Things to remember

• Place important click-through links in different parts of the message to test click-through rates and to provide multiple opportunities for recipients to click. (How many is too many? You don’t want to overload the email with links so that the email client doesn’t reject it as spam).
• Keep the body of the message clear and concise.
• Provide a summary for longer topics with an anchor link to the complete topic content.
• Keep your important messaging above the fold so that recipients see the important content without scrolling.
• Many recipients use message preview, which opens the email in a small viewer within the email client. Only a small portion of the message is visible. Be sure that the important messaging is in the first 1 - 2 inches of the content.
• Be aware of spam and junk triggers based on words and phrases in the body of the email.
• Campaign sends multipart MIME messages, which means that both HTML and text content are sent as part of one email. A recipient's email client receives the multipart message and determines which version to display based on user preferences. Most desktop and web-based email readers are HTML-capable and display the HTML part of a multipart message. However, some mobile readers might be limited and display only the text part of the multipart MIME message. For this reason, it is important to always use a multipart MIME message instead of sending just a text or HTML message.