You may already be familiar with the rules and the latest options on how to create a modern and accessible website. But can you apply all that knowledge in practice to compose an email? The short answer to this question is often no. Due to the variety of email providers and the limited support of CSS, there are some specific rules, do's and don'ts that you need to follow when designing your campaign.
In this article, we will provide you with more information on how to create your own HTML email, so that it is displayed exactly as you intended.
First and foremost, it is important to know that the design of HTML emails does not work the same way as web design. Are you familiar with W3C designs and already using the latest CSS? Then it's good to know that designing an email is approached very differently.
Layout
A design width of 650px or less
The general rule for email size is to keep it 650px or less in width. This way, it can generally be displayed correctly to the majority of your contacts/in most display configurations. Simple layouts still work best in this regard.
Simple layouts
When designing an email, the rule is the simpler, the better. If you create a complex design, you will encounter many issues during testing and your contacts are likely to experience many bugs.
If you do want a relatively advanced design for your campaign, be prepared to use a lot of tables. Additionally, it is important to test the design multiple times before it is finally sent out.
Use basic HTML tables
To correctly design the overall layout of your campaign, you need to use standard HTML tables. CSS floating and other layout techniques are not displayed correctly in all email providers.
Be cautious with table cell padding
Email providers like Outlook remove the padding from each cell in a row and apply it to all other cells in the table. This can result in some visual changes that are not desired. Try to apply the same padding to all cells in the row OR place a div or table (with padding) inside the cell that you want padded.
Avoid using colspans="" in tables
Some email providers do not fully support these colspans. It can also lead to display issues in other cells when you apply a colspan.
CSS
Do not use external stylesheets
These will not work in many email providers. Therefore, you will need to include all your CSS inline and then place it in your HTML.
Avoid using CSS classes - always use inline CSS
There is a high chance that your CSS classes will not be supported. Instead of CSS classes, it is better to use inline CSS. An example of this is: <div style="color:#cccccc;">content</div> instead of <div class="cssclassa">content</div>.
Avoid using CSS shortcuts
With CSS, you can normally set properties in groups. Such as: style="font: 12px, Arial". Instead of grouping such attributes, you should set each part separately. For example, like this: style="font-size:12px; font-family:Arial".
Avoid using CSS float or position options
It is common for both float and position options to be ignored. Instead, try to use tables.
Images and videos
Use absolute image source URLs
Instead of including an image like: (<img src="img.gif">), it's better to include the absolute URL in the file like in this example: (<img src="http://site.com/img.gif">).
Always use alt tags (<img src="http://site.com/img.gif" alt="Company ABC">)
Most email providers disable images by default. Unless you use alt tags, your contacts will only see an empty box. With an alt tag, subscribers will see the text you placed in the tag.
Avoid embedding videos or Flash items
It's not a good idea to directly embed videos and/or flash in your email. Many of these codes are not supported, which can result in your campaigns being marked as spam by spam and virus detection programs. Instead of embedding your video/flash in the campaign, you can take a screenshot of how the video from Flash Player looks and then include that. When someone clicks on this image, you can set it up to open the video or flash in a new browser.
Animated GIFs are not fully supported
Consider if you really need an animation in your email. While most email providers support animated GIFs, Outlook 2007, for example, does not. When animated GIFs are not supported, the first frame of the animation sequence will likely be displayed.
Be cautious with sliced images
If you have a larger image sliced and place it in your HTML using table cells or img tags side by side, you will need to test this extensively. It is common for extra space to be added between the images, which can make the overall appearance less appealing.
Avoid using images to assist with layout
Sometimes images are used to improve your layout. Images of 1 or 2 pixels are used to align items in the layout. Various email providers may see these images as potential read/open tracking images, which can have negative consequences.
Test your campaign with images disabled
For many contacts, displaying images will be disabled by default. It is very important to check how the email looks when this is the case.
Watch the file size
Just like with regular web design, you want to be aware of the size of image files displayed in your campaign. Try to keep the size of these files as small as possible to ensure they are downloaded quickly.
Background
Background images are not fully supported
If you use a background image, keep in mind that some email providers may not display them. If you still want to use a background image, use HTML background options instead of CSS to create a background.
Full background colours
Many email providers (such as Gmail) do not display the background colour you set for the main text (<body> tag). We recommend that when you set a background colour in the body tag, also generate a wrapping div with a background colour that surrounds the content. This way, even if the background colour is not fully supported, you will still see something similar.
Miscellaneous
Do not place anything above the opening tag (<body>)
Anything placed above this tag will likely be removed and not used.
Do not include javascript in the campaign
If you include javascript in the email, it is likely to be removed and many spam filters will mark this content as 'spam'.
Avoid Microsoft Office
If you still use it, it is almost certain to cause problems. Additionally, when you copy and paste from Office, you paste the Office formatting into the campaign. This will almost certainly cause issues in your design.