The Don'tsDo not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets.Don't use javascript in an email newsletter. Ever. There's no better way to have your newsletter marked as spam.Don't use the <body> or <html> tag. Most email services will ignore them. You can try putting your whole newsletter inside a <div> and apply inline styles to it. Results may vary.The Do's
Use tables. Lots of them. You're welcome to try <div> tags for positioning and layout, but my research shows that tables are more consistently supported. C'mon now. Get over your table-phobia. Use inline styles liberally in tables. In fact, you'll find you can get the best millage out of inline styles in <td> tags. That way you are setting up little style regions within each table. Think of these inline styles as miniture style sheets. This allows non-technical users to swap content in and out of pre-formatted cells in a modular fashion. Define the background color in a td cell or table tag with bgcolor=, not the CSS style. This works in all email services I tested. Test your newsletter by sending to yourself or colleagues. This will give you the chance to catch any problems before your whole subscriber list does!Images Define background images using background= instead of the inline background-image call. Gmail, among others, will ignore any url() attribute in an inline style. Keep in mind, though that if the background image is ignored, the default color is going to be white. Sooooo your white on black text will disappear! Don't do it! Stick with text colors that are visible against a white background. Don’t use images for important content like calls to action, headlines and links to your web site. Outlook, Gmail and others turn images off until allowed by the user. If your entire newsletter is graphical, all your recipients are going to see is a lot of broken images. Use alt text for all images. Declare BOTH height AND width parameters for images. Poor old Outlook Web Access especially needs this for your table layout to display properly.
Use tables. Lots of them. You're welcome to try <div> tags for positioning and layout, but my research shows that tables are more consistently supported. C'mon now. Get over your table-phobia.
Use inline styles liberally in tables. In fact, you'll find you can get the best millage out of inline styles in <td> tags. That way you are setting up little style regions within each table. Think of these inline styles as miniture style sheets. This allows non-technical users to swap content in and out of pre-formatted cells in a modular fashion.
Define the background color in a td cell or table tag with bgcolor=, not the CSS style. This works in all email services I tested.
Define background images using background= instead of the inline background-image call. Gmail, among others, will ignore any url() attribute in an inline style. Keep in mind, though that if the background image is ignored, the default color is going to be white. Sooooo your white on black text will disappear! Don't do it! Stick with text colors that are visible against a white background.
Don’t use images for important content like calls to action, headlines and links to your web site. Outlook, Gmail and others turn images off until allowed by the user. If your entire newsletter is graphical, all your recipients are going to see is a lot of broken images.
Use alt text for all images.
Declare BOTH height AND width parameters for images. Poor old Outlook Web Access especially needs this for your table layout to display properly.
Remember Me
a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u