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.
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">