When creating your own HTML email content, there are several design tips and recommendations to keep in mind:
Layout
- Keep the width of your design between 500-650 pixels to ensure readability in most email clients and applications.
- Avoid complicated layouts, a large number of nested tables, and tables with a large number of rows and columns.
- Design for the preview pane: keep all important information above the fold, and pay special attention to the upper left corner.
Tables
- Set the width in each cell (not the table) in pixels (not percentages).
- Avoid spacer images and stick to fixed cell widths.
- Nest tables; do not rely on left and right margins or padding for table cells.
- Avoid unnecessary white space in table cells.
- Use a container table for body background colours.
Images
- Avoid using one big image for your content. This can be interpreted as spam by many filters. Instead, use a balance of image and text areas.
- Include absolute paths to images in your HTML – using relative paths will not work. You will need to host the images on your server and then link to them in your code, or upload them to your Content Library and obtain the full URL path, or import your Template using the .zip file option.
- Ensure images are in RGB format, 72 DPI resolution and optimized for JPG or GIF format.
- Setup an alt tag for each image, as many email clients and applications do not display images by default.
- Always set height and width attributes on images – so in the event they are not displayed, your layout will remain intact.
- Avoid images less than 16 pixels in height or more than 1700 pixels in height.
CSS
- Any CSS inside the <HEAD> tags will be lost.
- Use inline CSS instead, and make sure it’s below the <BODY> tag.
- Use longhand descriptions for fonts and colours.
Other Content
- Do not include Flash or animated GIFs on a main page (they will not work in most email programs).
- Include several hyperlinks to encourage recipients to click through.
- Avoid JavaScript, ActiveX, and CSS positioning – complicated coding will not be supported by most email clients.
General
- Include a doctype tag as the first line of HTML code (XHTML 1.0 Transitional doctype tag recommended)
Test, Test, and Test Again
- Use the Inbox Preview tool to preview how your design will appear in popular email clients and applications.
- Focus on refining your design to display optimally in the email clients/applications used most by your subscribers.
- Retest your Template every few months to ensure that it still renders correctly as the various email clients and applications continue to evolve.
Comments
0 comments
Article is closed for comments.