May 20, 2015
Eric Vaillancourt
HTML emails break all the rules you’ve ever learned as a web designer. These simple email HTML tips will get you started creating clean emails that render consistently across email clients.
Email HTML Tips
Tip 1: Use Tables
Many email clients don’t support modern CSS and <div> layouts. The solution is to use a simple table of a decade ago. Complex tables with rows and columns won’t render properly in most email clients: Instead, build tables with rows only. Each row should represent a section of your email and contain nested tables. These nested tables generate columns of information. This way, when the email is viewed on a mobile device, each table will align one below the other. Use standard HTML values like width, height, cell padding, cell spacing, bgcolor, align, and valign.
You may also use nested tables to center your email. For example, use a table 600 pixels wide and center-aligned inside a table that is 100% the width of your email. Then add additional tables inside the 600-pixel table for content as needed.
Use <BR> and <Table> tags instead of <P> and <SPAN> tags to avoid inconsistent spacing. Paragraphs have different margins in each email client, so it’s better to use two <BR> tags. The safest way to have consistent spacing across email clients is to use tables. If you must use a <SPAN> tag, end it with a <BR> tag. Don’t use a spacer image, which used to be common practice.
Litmus provides some excellent free responsive email templates, which use tables, and can be used as a starting point. MailChimp also has an email field guide with introductory resources.
Tip 2: Use Inline CSS
Most email clients remove the <header> of an HTML page, so external style sheets won’t render properly. Instead, put CSS in-line with each element. However, when coding mobile versions, use the <style> tag in the <header> element for media queries.
Manage links by using an inline style for each link color. Add the colors in hexadecimal format and use the longhand version #000000 rather than #000.
Remember that not every CSS element is supported in every email client. This CSS guide details which CSS is supported in 18 of the major email clients and which is not, Can I Use this allows you to see supported elements, and this handy free design tool can help bring email styles inline.
Tip 3: Email Width
Keep emails under 600 pixels wide. Many email clients have a preview window which has a limited size.600 pixels renders properly in Outlook, Thunderbird, and Apple preview panes. It’s almost impossible to be certain that your email will display in full size and in which client.
Tip 4: Use Images Wisely
Many email clients don’t display background images or turn them off by default. Use a background color as a fallback, so if the image is disabled, text is still readable. Test emails with images turned off, and don’t forget the Alt text, as well as the width=”value” and height=”value” for each image.
Minimize the number of images in your email to keep it readable and reduce loading time. Don’t use images for important information, since in many email clients, images are turned off by default.
Keep it simple. If you want a shadow at the bottom of an image, use an image with the shadow included in it instead of using a separate image for the shadow. Readability and the primary email clients used by your target audience may influence your design choices. For example, if you want to create a transparency effect using a PNG image, keep in mind that Lotus Notes only supports GIF and JPEG. Therefore, you will need to decide if it’s important for your target audience. Remember to resize images as needed in a graphic editor, and always use absolute links to avoid broken images.
Use the align=”value” attribute instead of the float:value; attribute, because the float attribute is not supported in every client.
Tip 5: Test, Test, Test!
There are 30 major email clients, so testing is very important. Test on both a PC and a Mac, test mobile devices, and all major email clients such as Outlook, Gmail, AOL, and Yahoo. Many testing platforms, such as Litmus, are available and allow you to test how emails render in dozens of email clients and devices at once.
The email standards project, W3C Community and this css guide can help you keep up with the latest developments with major email clients.
Tip 6: Use Email Templates
Use email templates created by leaders in the HTML email community and test them carefully before using them. If the templates pass the tests, then start customizing them. Here is a list of additional resources to build emails and find free email templates to get started.
Tip 7: Keep it simple
Simplicity is the key to compatibility. Use simplified code, minimize image use, use tables, don’t go larger than 600px, keep it short and sweet, use well-built templates as a starting point, don’t forget the unsubscribe, and view your creation in a variety of browser links. Finally, test, test, and test again. Remember not to use Flash, Video, JavaScript, and Forms in an email.
Need help with your Marketo email strategy? From creative services to high-volume campaign execution, MERGE is ready to assist. Contact us and let’s get the conversation started!
