In this article, you'll learn helpful tips for creating HTML emails from scratch.
Layout
- 650px or less design width
The general rule for email size is to keep it 650px or less in width. This allows the email to display correctly in most email clients and configurations. - Simple layouts are best
With email design, simple is best. If you try to do a complicated design, you will encounter a lot of testing and debugging with email client issues. If you want to complete a more advanced design, be ready to use a lot of tables and set a reasonable amount of time aside for testing. - Use basic HTML tables
You will need to use standard HTML tables to create the overall layout. CSS floating and layout techniques will not render correctly across all the email clients. - Be careful with table cell padding
Outlook will apply the padding from any cell in a row to all the cells in the row. This could result in some visual changes that you do not want. It would be best if you tried to apply the same padding for all cells in a row or place an inner div or table (that has padding) within the cell you would like to have padding. (More Info) - Avoid using colspans="" in your tables
Some email clients do not fully support colspans and others may have display issues for the other cells.
CSS
- Do not use external stylesheets
They will only work in a few email clients, and you should include all of your CSS using inline CSS within your HTML. - Do not use CSS classes - always use inline CSS
Many email clients do not support CSS classes. Instead of declaring CSS classes, you should use inline CSS. An example would be <div style="color:#cccccc;">content</div> instead of <div class="cssclassa">content</div> - Don't use CSS shortcuts
CSS allows you to set properties in groups normally. Such as style=" font: 12px, Arial" Instead of grouping such attributes, you should set each part individually. Such as style="font-size:12px; font-family:Arial" - Avoid using CSS float or position options
Some email clients will disregard both the float and position CSS options. Try to use tables instead.
Images and video
- Use absolute image source URLs
Instead of including an image such as(<img src= "img.gif">) you must include the absolute URL to the file such as (<img src= "http://site.com/img.gif">) - Always use alt tags (<img src="http://site.com/img.gif" alt="Company ABC">)
Most email clients disable images by default. Unless you have alt tags, your subscribers will only see a blank box. With an alt tag, your subscribers will see the text you put in the tag. - Do Not Embed Videos or Flash
Embedding videos directly or flash into your email is not a good idea. Many email clients will not support such code, and many spam & virus detection programs will flag your email as spam/malicious. Instead of embedding your video or flash into your email, take a screenshot of what the video of the flash player looks like and embed that. You can have the video or flash open in their browser when they click on it. - Animated GIFs are not fully supported
Ask yourself whether you need an animation in your email. While most email clients support animated GIFs, Outlook 2007 does not. Email clients that do not support animated GIFs will likely show the first frame of your animation sequence. - Be careful with spliced images
If you have a larger image spliced and placed into your HTML using table cells or img tags right next to each other, you will need to test thoroughly. Some email clients may add extra space between your images and cause your email to look bad. - Avoid using images to help with your layout
Some people use 1 or 2 pixel images to help align items within their layout. Some email clients or filters will think it is a potential read or open tracking image and penalize the email. - Test your email with images disabled
Since most email clients show emails with images disabled by default, you must check to see how your email looks with images disabled. - Watch your file sizes
As with traditional web design, you want to be aware of image file sizes for your email. Please try to keep them low to make sure they will download quickly for your subscribers.
Background
- Background images are not fully supported
If you use a background image, remember that some email clients will not show them. If you still wish to use a background image, use the HTML background options instead of using CSS to declare a background. - Full body background colors
Many email clients (such as Gmail) do not show a background color that you set for the main body (<body> tag). If you are setting a background color in the body tag, you should also have a wrapping div with a background color that surrounds your content. This way, even if the body background color is not supported, you will have something similar.
Miscellaneous
- Do not put anything above the opening <body> tag
Anything you put above the body tag will likely be stripped and unused. - Do not include javascript
It is likely stripped in most email clients, and spam filters may detect it as malicious code. - Avoid Microsoft Office
The HTML generated will almost guarantee issues. Additionally, when you copy and paste from Office, you will be pasting in their formatting and likely have design issues.