Email Design

When you design a Hypertext Markup Language (HTML) email, remember that mailbox providers have developed slower than web browsers. Keep your design simple and rely on older HTML standards.

Note: Some applications — such as Blackbaud Online Express — automatically ensure that the HTML and CSS used for email result in messages that render correctly across mailbox providers and on mobile devices such as smart phones and tablets.

Note: To preview how your design renders across mailbox providers, use a testing service like Email on Acid.

CSS

As some mailbox providers remove the CSS from <head> and <body> tags, use inline CSS. Mailbox providers may reject CSS shorthand, so declare each attribute of your elements separately.

Note: For an exhaustive look at which CSS style elements popular mailbox providers support, see Campaign Monitor's CSS Support. To quickly move existing CSS inline, use a conversion service such as Premailer.

Tables

Mailbox providers have poor support for <float>, <margin>, and <padding>, so use tables for layout. As you design your tables, follow these best practices:

  • To set the width of a table, set the width of each of its cells rather than of the table itself. As email services have poor support for percentage-based widths, use pixels instead.

  • To add padding to a cell, use either the <cellpadding> attribute of the table or a CSS padding for each cell, but not both. Or, nest tables rather than set margins or padding for table cells.

  • Avoid whitespace between the <td> tags of your table, as mailbox providers may add padding above or below the cell contents.

Color

The use of color can help engage your audience and promote your organization's branding across email. As you design color in your HTML email, follow these best practices:

  • Mailbox providers may ignore the <background-color> specified in your CSS or <body> tag, so use a container table for background colors. For example, nest your email content within a 100%-width table with a background color.

  • Use longhand hexadecimal color values, as some mailbox providers may reject shorthand values.

  • To prevent mailbox providers from overwriting your hyperlink colors with their default colors, set a default color inline for each link and then use a redundant span inside the <a> tag. For example:

    <a href="https://blackbaud.com/" style="color:#8cbe4f"><span style="color:#8cbe4f">This is a hyperlink.</span></a>

Images

As most mailbox providers block images by default, provide <alt> text for images so the recipient's first impression of your email isn't an empty placeholder or stripped image. The use of appropriate <alt> tags can increase recipients' trust in your message and the likelihood that they allow a mailbox provider to download your images. As you include images in your email, follow these best practices:

  • Provide a background color to use with mailbox providers that don't support background images.

  • Set the dimensions of your images so mailbox providers don't impose their own sizes for blocked images. Size images correctly before you add them to your content, as some mailbox providers rely on the true dimensions of the image instead of the dimensions specified in the CSS.

  • To position images, use the <align> attribute rather than <float>.