Standard email elements and basic HTML email design recommendations

This section describes the anatomy of the basic marketing email and provides general design optimization tips. Best practices for email design leave room for diverse approaches, but the following guidelines serve as an effective starting point.

Preheader text

We recommend including preheader text at the top of every email. The preheader is composed of one line of HTML text at the top of the email, above the header/logo (in some situations, it may require two lines of copy, but shorter is typically better). Keep in mind that this is the first text that will appear in a subscriber’s preview pane. Effective preheaders typically do the following:

• Summarize the email’s primary call-to-action and/or build on the subject line.
• Include a link to the primary landing page
• Include a “view with images” link so subscribers can view a web-hosted version of the email.

Header & navigation bar

Place your logo on the left side of your header. It’s important for branding and for recognition of your emails.

Use HTML text for your navigation bar links. Consider periodically changing the links included in your navigation bar to feature topical items corresponding with the target of a particular campaign (for example, the best links to include with a sale message may differ from the best links to include with an account management message). It may make sense for your brand to place a promotional link in the navigation bar, such as a graphical element “breaking” the header. This serves as an extra place to capture clicks from subscribers who may not scroll to read the full email.

Email body

The “email body” conveys your primary and secondary message(s). Most subscribers will spend only a few seconds on your email, and the below moves can help you get the most from their brief moments of attention:

• Establish clear content groupings and a messaging hierarchy by leveraging color, size and other elements
• Make your copy easy to skim by keeping it brief (four lines is a good rule-ofthumb maximum), and consider using bullets to convey services or product features quickly.
• Encourage scrolling with unique layout patterns and playful peeks.
• Use button treatment for primary calls-to-action (CTAs).
• Ensure text links use a web-safe font, stand out and look clickable.
• Leave space for expanding fonts; some email readers and platforms display fonts larger than others.
• Focus on readability when selecting text and background colors and when determining text size. Keep your body copy 13 point or larger and legal text 11 point or larger (like the text in the footer) so that you don’t lose readers who might struggle to read small print.
• Use HTML text wherever possible.
• Design for a usable experience whether a subscriber has images on or off, since most inboxes don’t load images by default.

Recovery module

Recovery modules are optional content blocks that appear toward the bottom of emails. They generally contain several links to product categories, clearance items, articles and other resources or points of interest for subscribers. Recovery modules sometimes capture clicks from subscribers who haven’t found anything of interest in the body of the email or who are looking for specific information.

Footer

The footer is the HTML text that appears at the bottom of the email (also referred to as “legal text”).

• Include disclaimers for promotions included in the email, if applicable.
• Include an unsubscribe link. Use a subhead, bold text or different colored text to make this link easy to find, preventing spam complaints. If you have included an unsubscribe link in your preheader or header, we recommend also including one in the footer because subscribers have been trained to seek it there.
• Include other administrative links such as those to update preferences, change email address and subscribe (for those who receive the email as a forward). These links should appear before the unsubscribe link to prevent those who would like to change their email address from unsubscribing and then re-subscribing.
• Consider placing an “add to address book” link in the footer.
• Include your mailing address (street address or P.O. box).
• Include copyright information.

Social network sharing links

Share links allow subscribers to share your email—or portions of it—with their friends and family members on social networks such as Facebook, Twitter, Pinterest and Google+.

• Include links allowing subscribers to share your entire email as a permanent fixture in your header
• Include links to share specific elements of your email when appropriate (for example, you might include “Pin It” functionality on a particularly engaging photo to encourage sharing via Pinterest).

Social network community links

We recommend including links toward the bottom of your email inviting subscribers to connect with your brand via social sites on which you have a presence. Consider grouping community links with mobile app, SMS subscription, blog and RSS subscription links. These links work well together because they all present ways for you and your customers to stay in touch.

A note on preview pane optimization

Most subscribers use preview panes to read their emails, limiting the visible area of the email. Although preview pane sizes vary, thinking of the visible area as a square with 320-pixel sides is a safe approach. The messaging in this space deserves a high level of consideration; often subscribers decide whether to engage more deeply with an email depending on whether the preview pane interests them.

• Be mindful of the height of your preheader and header navigation bar since these elements limit the amount of the email body that is visible in the preview pane
• Include your headline and primary call-to-action in the preview pane.

Mobile-influenced design best practices

Whether or not your company has made a conscious choice to target a mobile audience, we now live in a multi-screen world: consumers read email on all kinds of devices, so email needs to offer a positive experience on smartphones, tablets and desktop screens. Because of this reality, the following best practices have emerged for all email design.

• Avoid using long subject lines, which will push email content even farther down an already-small mobile screen
• Ensure that your most valuable content is within the top left 320-pixel area of your email. Not only is this helpful for preview pane optimization as described above, but some mobile devices don’t scale an email to fit the width of the screen. Because of this, some viewers will only see the top left corner of the email at 100% of its normal size.
• Make emails easy to scroll, encouraging rapid scanning while still conveying key information. Check that text is legible, even when scaled down on a smaller screen.
• Keep emails brief, allowing the landing page to tell a more detailed story.
• Ensure that CTAs are easy to click by using large buttons and links, adding padding between sections, and designing entire sections to be clickable. When pressed to a touch screen, the human finger requires more space to click accurately than a mouse does. Make sure that your CTAs are padded at least 10–15 pixels to avoid frustrating tap errors.
• Keep email file sizes small for quick load times at any connection speed.

Mobile design recommendations

With mobile email readers composing a significant (and increasing) percentage of many brands’ subscribers, it’s essential that design teams have the expertise to deliver seamless mobile experiences. Reports continue to demonstrate that mobile subscribers become less engaged when forced through an experience that isn’t designed optimally for their device. Making choices about email design for mobile requires you to develop an understanding of your subscriber behavior and of the resources available for your brand to invest in mobile design.

Getting started with mobile design

Knowing your subscribers’ opening behavior

Get a breakdown of your subscribers’ behavior, including the percentage of your subscriber base reading on mobile devices, and which type of mobile devices and operating systems they’re using (you can get this information from Return Path or Litmus). You may be surprised to find more opens coming from tablets than phones, or from iOS than Android. Getting a solid grasp of your subscribers’ habits will allow you to invest in mobile optimization in a way that reaches the largest possible audience

Knowing your subscribers’ devices

While Android devices make up a larger share of the market, it currently looks as though iPhone and other Apple iOS devices contribute to a larger share of mobile opens. That said, it’s important to keep in mind that open metrics may be skewed by the fact that many devices block images by default, while iOS does not.

Google’s Android operating system is used on a variety of devices from companies including Samsung, HTC, LG and Motorola. Because Android is open source, manufacturers often customize it, which sometimes modifies the email app in ways that lead to inconsistent rendering across devices. Windows Phone and BlackBerry also present their own unique challenges.

It’s likely that the level of support for email across apps and operating systems will continue to change; this is an area that calls for ongoing testing and readjusting.

Choosing your mobile email design strategy

There are two primary approaches to designing in a way that prioritizes your mobile audiences: mobile-optimized email and responsive email. Once you understand your subscribers’ behavior and assess the time, energy and financial resources your brand can commit to mobile design, you can select the most appropriate approach, described below.

Mobile-optimized email

Mobile-optimized email is HTML email designed specifically for small mobile devices that render designs at 320–480 pixels. This type of email still renders on desktop screens, but it’s designed to fit small screens best. When most of your subscribers open email from their smartphones and small tablets, it’s time to put those customers first by delivering a mobile-targeted experience.

The drawback of mobile-optimized email is that it limits the experience you can provide to your desktop readers: email designed to render on a small screen looks small when opened from a desktop and doesn’t utilize all of the available desktop screen real estate. Further, the narrowness of the design limits design layout options.

Even so, mobile-optimized email delivers a positive experience for most subscribers on mobile and desktop screens. It’s a solid strategy for mobilizing your email program without significantly increasing the time or money invested in the program.

Ways to optimize for mobile

Keep mobile-optimized emails simple - Use clear messaging and imagery that help convey the primary message. Strip away non-essential elements. Mobile subscribers are often on-the-go or engaged with other activities (watching television, chatting with friends, etc.). Straightforward, uncluttered messaging is the most effective way to get these subscribers to act.

Lighten your email file sizes - This will increase the chance that they will render effectively on mobile devices. Some mobile email clients will require an additional button-press to download the rest of the email when file weight is too big. The optimal email weight for mobile is 20K or less, and while that weight may not be realistic for some marketers, the more you can slim down the file weight the better. Mobile Internet speeds, while sometimes quite fast, are inconsistent and often dependent on a subscriber’s location. It’s also worth noting that subscribers pay per megabyte when downloading content, so sending lighter files shows respect for your customers.

Responsive email

An email coded responsively and designed upon a flexible framework will automatically adapt its layout to better fit the customer’s current screen size, no click required. Responsive email is composed of one HTML file that uses CSS media queries to listen for a device’s screen width. Copy and imagery can be wrapped, hidden, resized or optimized when the layout reaches a specified width. In order for this to happen, the mobile email app must recognize the responsive media queries, which the native email apps on iOS, Android and some newer BlackBerry devices currently do.

The majority of Windows Phones do not support responsive media queries, although future updates may include support. When a responsive email is opened on a device that does not recognize the media queries, the email simply opens as any other basic HTML email would on a mobile screen. Responsive email is a bit more difficult to design and code than mobileoptimized email, requiring a higher initial investment. However, it results in a better user experience than other approaches and has been shown to facilitate higher click-through conversion when aligned with the right audience.

Examples of how responsive email design can be utilized

Wrap elements.

Wrapping elements lets your email design reflow to fit within a mobile screen. When designing elements to wrap, think in terms of the grid structure for both the mobile and desktop versions: for example, the Apple iPhone has a screen width of 320 pixels, so if the desktop version of an email is designed to be 640 pixels wide and divisible into two columns, elements can wrap without the need to scale.

Hide elements.

Sometimes, images take too long to load on mobile devices or make your email too long for mobile customers. Responsive design allows you to hide images and other elements, streamlining the experience for the mobile reader. The responsive email can hide an entire text block or text within a block.

Adjust elements.

Many elements can change across versions to deliver an optimal mobile experience. Elements that can change include font size, color, family, weight, decoration, style, variant, line-height, margin, padding and many more.

Optimize images

In addition to hiding them, images can be manipulated to look great on any device. If an email’s hero image is too wide for a small screen, it’s easy to swap the image out for one that is specifically cropped to fit a mobile screen. The email’s images can also be resized, hidden or cropped by hiding slices. Further, if an image looks blurry, you can “sharpen” it by saving the image at double the size and shrinking it to fit the layout.

Mobile-optimized landing pages

Without a web experience designed for their needs, customers might disengage before converting. After you’ve invested time and thought delivering email that renders effectively on mobile devices, complete the experience with a mobileoptimized landing.

• Make it easy for users to find what they originally clicked on in the email.
• Utilize alternatives to Flash, such as HTML5, CSS3 and JavaScript.
• Be clever with the use of space by embracing accordions, carousels, modals, drop downs, tabs, etc.
• Make the checkout process as quick and easy as possible. Minimize the number of form fields and investigate simple solutions
• Optimize pages for speed and reduce files size—fast load times are critical to keeping customers from disengaging
• Optimize your landing page widths to be more mobile-friendly
• Keep landing page copy brief. Save the more expansive details for another page deeper on your site.
• Remember that for touch screen users, there is no hover-state for links; if they touch, they click.

A note on whether to include plain-text email

In most cases, we recommend that email marketers no longer include plain or rich text versions of email creative along with their HTML versions. In the past, Internet Service Providers’ (ISPs) formatting requirements demanded a text creative version. However, the growing sophistication of smartphones and the evolution of ISP infrastructure have eliminated this need.

While HTML content may not render properly for recipients who have images blocked (and also might not render well on some older devices), including a link to a web version of the creative in the email preheader is sufficient to address this concern. Mailing a plain text version along with HTML creative has a negligible effect on deliverability—only a very small percentage of users would view a text version. Our exception to this recommendation applies to marketers targeting IT professionals, to whom we recommend sending both HTML and plain text versions. This particular audience has a higher propensity to request, read and engage with text-only emails.

Coding recommendations

The last thing any hardworking email marketing team wants is for a technical oversight to negatively impact the subscriber experience. This section details today’s email coding best practices to help ensure that your HTML emails render properly for the widest array of email clients.

Despite the simplicity of the final product delivered to the inbox in email marketing—a single HTML file with no interactive components—coding for email is a challenging discipline that requires highly specialized skills and industry knowledge, which often differ from the coding skills and knowledge required for web development.

The primary challenge in coding email-friendly HTML involves the number of platforms developers must contend with. In regular web development, one must code for different web browsers and operating system platforms. Browsers and platforms must still be considered when coding for the email channel, but the more crucial consideration is how different webmail clients (such as Yahoo, Gmail, Hotmail and AOL) and desktop email clients (such as Outlook 2007 and 2010) interpret and render coded HTML.

Significant considerations for coding HTML email

• Suppression of images in the inbox environment is commonplace.
• Support for standard CSS positioning is inconsistent amongst email platforms.
• Using table-based code is essential for achieving consistent and accurate email rendering.
• Some web-based email platforms (notably Gmail) strip out

  Want more like this?

  Want more like this?

  Insight delivered to your inbox

  Keep up to date with our free email. Hand picked whitepapers and posts from our blog, as well as exclusive videos and webinar invitations keep our Users one step ahead.

  sign up

  By clicking 'SIGN UP', you agree to our Terms of Use and Privacy Policy

  

  SIGN UP

  By clicking 'SIGN UP', you agree to our Terms of Use and Privacy Policy

  Creating slices in Photoshop and exporting graphics

  Make sure to use a consistent naming convention for image files (i.e., “title_main. gif” for the main title text). Although this can be cumbersome, it is helpful when making templates that will be reused. When naming images, try not to use words that may trigger browser-installed ad block programs. Some such keywords in particular include: ad, promotion, banner.

  Coding

  Focus on clean, organized code to avoid render errors and make it easier to share files with other teammates. Because DIV- and CSS-based layouts are not supported by many email clients, you will need to use tables in your HTML. The bulk of the rest of this document will provide tips and considerations for coding your emails.

  Render testing

  While there are great tools for previewing your emails across multiple platforms at once, nothing beats manually reviewing your campaigns on the major email platforms, on browsers and on your target audience’s favorite devices.

  A deeper look at coding particulars and top mistakes to avoid

  The following pages offer a deeper look at coding support and specifics across the major email environments.

  Unsupported HTML features

  Several common HTML features used on the web are not supported in email environments.

  Scripts, Flash and Embedded Video

  Some email clients still disable interactive JavaScript and other scripting elements within HTML email, often categorizing emails containing scripts as spam. Because of this, JavaScript (and any other scripting language) should be used cautiously and tested with segmented lists.

  Cascading style sheets (CSS)

  Externally linked CSS files—and anything else in the section of an HTML document—are commonly stripped out by email client platforms. In addition, CSS class definitions in

  Want more like this?

  Want more like this?

  Insight delivered to your inbox

  Keep up to date with our free email. Hand picked whitepapers and posts from our blog, as well as exclusive videos and webinar invitations keep our Users one step ahead.

  sign up

  By clicking 'SIGN UP', you agree to our Terms of Use and Privacy Policy

  

  SIGN UP

  By clicking 'SIGN UP', you agree to our Terms of Use and Privacy Policy

  Using web-safe fonts

  For serif fonts use Georgia, Times or Times New Roman. For sans-serif fonts use Arial, Verdana or Tahoma.

  Using
  to achieve text breaks

  Be cautious when using the
  tag to force manual breaks in blocks of text. Some email clients, such as Outlook 2007 and the iPhone, render leading and font sizes larger than normal and may wrap text before the manual line breaks as in the example below. It is best to let text wrap based on the container it’s placed in whenever possible.

  Special characters

  Special text characters should always use the proper HTML escape codes to ensure recipients on all platforms are able to view the text properly. For example, the character é should be coded using the HTML escape code é. For apostrophes, use the single quote escape code ’. Other escape codes can be found by searching online for “HTML Escape Codes.”

  Links

  With hyperlinks, keep in mind that many web-based email providers and client email programs have their own parsing engines and have widely varying methods for displaying text hyperlinks. Such parsing engines will typically apply their own styling to text hyperlinks, which often clash with the creative design of the EDM. A combination of anchor tags with style attributes provides the best results across a wide variety of email services (see example below).

  Other considerations with hyperlinks

  • Do not include commencing and ending spaces
  • Do not include commas, periods and other punctuation within hyperlinks.
  • Always include http:// at the beginning of web addresses
  • Do not use dotted decimal addresses (e.g., 94.31.231.18) in like URLs because many email clients may categorize the email as spam

  Responsive email

  When coding responsive emails, simpler is better. Changing the order of modules is hard, and it makes the email prone to breaking. An example of changing the order is going from having the structure hero module, secondary module A, secondary module B in the non-responsive design to having the structure secondary module A (as a banner), the hero, secondary module B. It’s best to keep elements showing up in the responsive version in the same order as they appear in the non-responsive version, left to right and top to bottom. This may seem limiting, but there are different ways to structure code based on the responsive outcome, so it’s best to examine both designs in detail before beginning code.

  Code structure

  When you’re coding an email, keep in mind that the HTML for both the nonresponsive and responsive version is in one file. When you make the nonresponsive email, it needs to have the necessary elements and code structure for the responsive version. When starting out, it’s often a good idea to draw out your table structure on the email and write out how it will transform from the non-responsive to the responsive version of the email.

  Make your classes as reusable as possible. That is, avoid creating classes for specific elements, where class=“image1” .image1{ width:200px !important; height:150px !important;}. Instead, create one class per style that you want to apply. This makes the classes easily reusable on another element. It can be helpful to break the CSS into sections—a height section, a width section, a fonts section, a margin section, etc.—and to alphabetize your classes within that section.

  When your code is well-organized, classes will be easily found, ensuring that you don’t have duplicate classes in your code.

  External style sheet

  We recommend using external style sheets to contain your CSS. Some webmail clients, such as AOL and Outlook.com, have begun to render responsive styles. Advancement of email platforms is to be applauded, but it turns out that Internet Explorer 9 can’t apply the display:block; style to a , which results in a broken rendering when the responsive styles trigger there. There are some fixes regarding this involving the use of the float property, but that tends to introduce issues in combination with some other code. Using an external style sheet is a good solution because both Android and iOS native mail clients recognize the tag and render your responsive styles.

  Testing

  Testing is very important for responsive emails—be sure to test on your audience’s most used devices. If you’re testing the iPhone, test the most recent version of the OS as well as the version just before that. When testing Android, make sure you test more than one device as some phone manufacturers alter the OS, and the functionality of responsive emails may be affected by those changes.

  Platform-specific fixes

  Earlier in this document we mentioned that

  Want more like this?

  Want more like this?

  Insight delivered to your inbox

  Keep up to date with our free email. Hand picked whitepapers and posts from our blog, as well as exclusive videos and webinar invitations keep our Users one step ahead.

  sign up

  By clicking 'SIGN UP', you agree to our Terms of Use and Privacy Policy

  

  SIGN UP

  By clicking 'SIGN UP', you agree to our Terms of Use and Privacy Policy