There are two primary areas to focus on when designing emails and newsletters: structure and content and there are some very important rules to follow on both of them.
- Size: Design HTML messages with a maximum width of 600 pixels so it can be viewed in the preview pane of email clients. Limit the size of an email to 150k, including images, to prevent long download times.
- Email clients, like Gmail and Outlook 2007, have poor support for HTML tags like float, margin and padding, so tables work best as the framework of any email. For the best results, keep the following in mind when coding your table structure.
- Set the width in each cell, not the table.
- Use a container table for body background colors.
- Avoid unnecessary whitespace in table cells
Gmail is the principal culprit for this one. Since Gmail strip out the CSS from the <head> and <body> of any email, all CSS must be inline. The good news is this is something you can almost completely automate. There are some services like Premailer that will place all CSS inline with the click of a button. If you use such a tool you can leave this step to the end of your build process so you can utilize all the benefits of CSS.
4) Top 300 pixels is above the fold
Small email preview panes on many email clients require that the most compelling content is in the top 300 pixels.
5) Don’t assume that images will be viewed.
Many email clients have image blocking on by default so:
- Set the height and width of your images to help your message maintain its proper layout even if images are turned off.
- Never use images for important content like headlines, links and calls-to-action.
- Use alt text for all images and always include the width and height so blank placeholder images don't throw your design out when images are disabled.
- Test your design in a preview pane, full screen and with images turned on and off and tweak the structure accordingly.
6) Always include a plain text version
- It helps with delivery, enough said. If you’re only going to send an HTML version, then at the very least, Use both HTML text and images in the message, not all images. That way, recipients can still read the message if the images are turned off.