Designing email templates is not like designing web pages, if you want to design
newsletter templates, read this before you start.
Preview pane
People open emails in preview panes, and different email programs have different
sizes for this too. Outlook, Thunderbird, Gmail ... all have different sizes to
display your email. Keeping this in mind, you need to design your email templates.
Here are our suggestions: Your logo should always be visible so place it at the
left. Your templates’ width should not exceed 600 pixels. Try to position the important
content at the top, so that users do not need to scroll down.
Table based layout
Your newsletter templates’ structure should be based on table. Set the width in
<td> and avoid using percentage in width.
<table cellspacing="0" cellpadding="4" border="0">
<tr>
<td width="100"></td>
<td width="120"></td>
</tr>
</table>
Background colors specified in CSS or the <body> tag is ignored by many email
programs, use a <table> having 100% width and give a background color to the
table.
Images
One of the biggest challenges is by default images in an email will not be displayed
in most of the preview panes. So do not contain your important messages in images.
Always specify dimensions for each image. Again, maintain the same dimensions for
the image. Some email clients ignore the dimensions mentioned in the code and rely
on the dimensions of image.
Avoid .PNG and use .GIF or .JPG.
Do not forget to specify the alt text; many email clients will display that (when
the image is not displayed).
Use align instead of float, align is highly respected by most of the email clients.
Video
If you want to place videos in your email, you need to follow the following guidelines:
- Replace the video with a good image where recipients can click.
- Link the image to a landing page on your website and put the video on the same page.
Now, you might think why not placing the video in email itself. Well, in that case
your recipients will not be able to view it because antivirus programs will block
that.