The CDXP platform from QuarticOn allows you to create emails as part of a campaign or automation in a standard format (i.e. using a drag&drop editor) or HTML. In this article, we provide you with a handful of good practices that will make it easier for you to create HTML messages and avoid problems.
Remember that email design is not the same as web design. If you care about W3C standards or use the latest CSS styles, well... in this case, you can forget about it all. Basically go back in time and think it's the year 2000 :) |
Message layout
Design width should be 650 pixels or less
The general rule of thumb for email size is to keep it 650 pixels wide or less. By following this rule, e-mail messages can be displayed correctly in most e-mail clients.
The best layout is the simplest layout
When designing HTML emails, simplicity is the best guide. If your design is too complex, you will run into a lot of problems when testing and debugging your email client. However, if you want to take a chance, be prepared to use a lot of tables and set aside enough time for testing.
Use basic HTML tables
To create the general layout of the message, use standard HTML tables. CSS floating and layout techniques will not render correctly in all email clients.
Be careful with table cell padding
Outlook will take the padding from any cell in the row and apply it to all cells in the row. This can cause visual changes you don't want. Try applying the same padding to all cells in a row, or put an inner div or table (with padding) in the cell where you want the padding.
Avoid using colspans="" in your tables
Some email programs don't fully support them, and others, using colspans, may have trouble displaying other cells.
CSS
Do not use external style sheets
External stylesheets won't work in many email clients – include all CSS with inline CSS in your HTML.
Don't use CSS classes, use built-in CSS
Many email clients do not support CSS classes. Use inline CSS instead, e.g. <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. For example, instead of grouping attributes like style="font: 12px, Arial", set each part individually, i.e. style="font-size:12px; font-family:Arial".
Avoid using CSS float or position options
Some email clients will ignore both the float and position CSS options. Try using tables instead.
Images and video
Use image source URLs
Instead of including an image like (<img src="img.gif">), append the URL to the file (<img src="http://site.com/img.gif">).
Always use alt attributes (<img src="http://site.com/img.gif" alt="Company ABC">)
Most email clients disable images by default. If you do not add alt attributes, your recipients will see only a blank field in the place of the image. Thanks to the alt attributes, they will see the description of the image, i.e. the text that has been placed in it.
Do not embed videos and/or flash
Do not add videos and/or flash videos directly to your e-mail. Many e-mail clients do not support this code, and spam and virus detection programs will mark your message as unsolicited. The solution in this situation will be to add the film cover itself (e.g. a screenshot), and then add a link to it, which, when clicked, will redirect the recipient to the film, opening it in a new window in the browser.
Animated GIFs are not fully supported
While adding GIFs is very useful for email marketing, we recommend against this option when creating HTML messages. While most email clients support animated GIFs, Outlook 2007 does not. Email programs that do not support animated GIFs will likely show only the first frame of the animation sequence.
Be careful with combined images
If you're using a larger image that's combined and placed in the HTML using table cells or img tags right next to each other, you'll need to test its display thoroughly. Some e-mail programs can add extra spacing between images and make the message look bad.
Avoid using images to improve the layout of your message
Some users use 1- or 2-pixel images to align elements in the message layout. However, there is a risk that e-mail programs/filters will think that this is an image that is used to track the reading/opening of the message and, as a result, will block your message.
Test your email with images disabled
Since most email clients display emails with images disabled by default, it is very important to check what an email looks like with images disabled.
Be careful with the size of the files
As with web design, pay attention to image file sizes in your emails. Try to keep them low to ensure your subscribers download your content quickly.
Background
Background images are not fully supported
If you use background images, please note that some email programs will not display them. However, if you still want to use them, use the HTML background option instead of CSS.
Background color throughout the email template
Many email programs (like Gmail) don't show the background color you set for the main view (<body> tag). So if you are setting the background color in the <body> tag also use a wrapping div with a background color that will wrap the entire content of the message.
Others
Don't put anything above the opening <body> tag
Anything you put above the <body> tag will likely be deleted and not displayed.
Do not include javascript
Javascript would probably be removed in most email clients, and some spam filters might detect it as malicious and unwanted code.
Avoid Microsoft Office
Generated HTML almost always means problems. In addition, when you copy and paste code from Office, you will also paste its formatting, which will cause problems with further design of the message.
See also: