Design Newsletter Templates

How to create a Cross-Client Compatible HTML Email Newsletter Template

Things to Consider ...

You can use HTML code to create eye-catching email newsletters, but designing a newsletter is different from normal web pages.
If you are looking for a free HTML editor, then you should take a look at MS Expression Web link.

Always keep in mind, that mail clients like e.g. MS Outlook or Thunderbird or are no web browsers and will not support the latest web technologies. For example, MS Outlook uses the MS Word rendering engine instead of the MS Internet Explorer (or Edge) engine to render HTML. Also web mail clients and mobile devices will not support all HTML elements.

 

warning Creating HTML code for newsletters is a bit like coding back in 2000 ...

 

  • Don't use HTML5
  • Use <table> instead of <div> - most mail clients will not support floating div's
  • Use html attributes like bgcolor (if available)
  • Avoid CSS3 specific code
  • Use HEX values (e.g. #FF9000) for colors instead of rgb(...)
  • Use padding instead of margin
  • Avoid <div> and deeply nested tables
  • Don't over-optimize your HTML code
  • Make sure the message is still readable if images are blocked by the recipient's mail client
  • Don't use Javascript, Flash, embedded video, iframes, forms or external CSS code
  • Send test messages to your target client devices before sending out a mailing

Tutorial Page Topics:

  • Basic Template with Background-Table and Container
  • Reset CSS Styles
  • Alignment
  • Cell Padding
  • Font Face, Color and Size (incl. Font Size Conversion Chart)
  • Link and Hover Color
  • Background Color
  • Background Images

 

Read more:

Basic Template with Background-Table and Container

Let' start with a basic template page containing a background table and a container.

  • Some mail clients are cutting out the body tag, so we use a background table as body wrapper
  • The container inside the background table defines the width of the message
  • Old HTML attributes like "cellpadding" are used to make the code cross-client compatible
  • Meta name="viewport" forces mobiles to render the message in the original size (initial-scale=1.0)

 

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

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">

    <style type="text/css">
    body {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;}
    #bgtable {width: 100% !important; height: 100% !important; margin: 0; padding: 0;}
    table, td {border-collapse: collapse;}
    table {mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
    .ExternalClass {width: 100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div
    {line-height: 100%;}
    img {-ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: 0; text-decoration: none;}
    a img {border: 0;}
    </style>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" offset="0">

<!-- background table -->
<table id="bgtable" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tr>
        <td align="center" valign="top">
            <!-- container 600px -->
            <table border="0" cellpadding="0" cellspacing="0" class="container" width="600">
                <tr>
                    <td align="left">Hello World!</td>
                </tr>
            </table>

            <!-- container 600px -->
        </td>
    </tr>
</table>

<!-- background table -->

</body>

</html>

 

 

warning All samples and many more templates are included in MailList Controller.

MailList Controller Homepage   Download Free Version

Reset CSS Styles

The sample source code above contains the most important style resets:

 

  • body {margin: 0; padding: 0;}
    Remove margin and padding from body

  • #bgtable {margin: 0; padding: 0;}
    Remove margin and padding from #bgtable (background table)

  • body {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
    Prevent clients from resizing the text

  • table, td {border-collapse: collapse;}
    Remove extra spacing in table and cell

  • table {mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
    Remove extra spacing in MS Outlook

  • img {-ms-interpolation-mode: bicubic;}
    Improve image quality in MS (mobile) clients

  • img {border: 0; height: auto; line-height: 100%; outline: 0; text-decoration: none;}
    a img {border: 0;}

    Remove border around images and image-links

  • img {height: auto; max-width: 100%;}
    Adjust height and max-image width

  • .ExternalClass {width: 100%;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div
    {line-height: 100%;}
    Adjust the line height in Outlook.com web mail client.

 

It might be required to reset further elements like e.g. h1, h2, h3, h4, h5, h6 depending on your project.

Alignment

Use the align attribute to specify the alignment of a cell.

  • align="left"
  • align="right"
  • align="center"
  • align="justify"

 

...
<td align="left">Hello World!</td>
...

Cell Padding

Specify the cell padding as inline css:

 

...
<td ... style="padding: 16px; ...">Hello World!</td>
...

Font Face, Color and Size

You can define the font in your CSS style or inline.
Don't use shorthand CSS "font:" use "font-family:", "font-size:", "font-weight:" and "line-height:" instead.

 

CSS Style:

...
<style type="text/css">
...
.container {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: normal;
    line-height: normal;
    color: black;
}
...
</style>
...

 

Inline:

warning Some (web) mail clients cutting out <style>. Use an (additional) inline style for cross-client compatibility.

...
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: normal; line-height: normal; color: black;">
    <p>Hello World!</p>
</td>
...

 

<FONT> Tag:

warning Some mail clients might not support CSS or inline fonts at all. Use <font face= and <font size= for cross-client compatibility.

<p><FONT face="Calibri"><FONT size="4"><FONT color="black">Physical Meaning of Geometrical Propositions</FONT></FONT></FONT></p>
or
<p><FONT face="Calibri" size="4" color="black">Physical Meaning of Geometrical Propositions</FONT></p>

 

You can directly format text using the internal editor. Click on the "Font-Size" icon and select the size from 1 to 7.
The default font size in most our templates is size 3 (16px).

 

Font Size Conversion Chart

<FONT size= Point (pt) Pixel (px).
1 8pt 11px
2 10pt 13px
3 12pt 16px
4 14pt 19px
5 18pt 24px
6 24pt 32px
7 36pt 48px

 

warning If you want to use a custom line-height, then you should also specify the line height (in px) in the .ExternalClass for Outlook.com web mail.

Link and Hover Color

Specify the colors as text or HEX value, e.g. color:#0000FF; (for blue)
Add the following styles to your <style> section:

 

...
<style type="text/css">
...
a {color:skyblue; text-decoration:none;}
a:hover {color:orange;}
...
</style>
...

 

Please note, that some mail clients might override your link or hover colors with their own colors.
text-decoration: none; removes the underline style from links.

Background Color

Apply the background color to a table using the bgcolor attribute. Specify the bgcolor as text or HEX value, e.g. color:#0000FF; (for blue).
See "How to change background-colors in a HTML newsletter" for details and samples.

 

<table bgcolor="blue" ...
or
<table bgcolor="#0000FF" ...

Background Images

MS Outlook 2007 and newer supports background images only in the <body> tag, either as HTML attribute or inline style.
Be aware, that you cannot control the tiling and other mail clients might not show body backgrounds at all (or in a different size).

 

Are foreground images with text overlay the solution?

  • No, major web mail and desktop clients don't support CSS positioning, so you cannot overlay a foreground image with a text element.

What can I do?

  • Use background images, but be aware that MS Outlook will not show the background image (try to use a background color as fallback).
  • If you add the text directly to the image, then all users with disabled images won't see neither the image nor the text.
  • Try to cut your image into slices and position it (as foreground images) in a table "around" the text. This method is often called "slicing".
  • Don't use background images, e.g. use background colors instead.
    This seems to be a good solution, since many mail clients are blocking images by default (or the user has to unblock images first).
    Important: Use the bgcolor attribute to set the background color of <table> or <td> ... e.g. <table bgcolor="#FF0000">