Last Updated: 29 Oct 2023
|
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
marketing-tech:html-email:tips-and-tricks [Apr 14, 2010 07:42 PM] dordal |
marketing-tech:html-email:tips-and-tricks [Oct 23, 2023 02:20 PM] 111.225.149.107 removed |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | = Creating HTML Emails - Tips & Tricks = | ||
+ | HTML emails are funny... most modern web browsers fully support standard XHMTL 1.0/CSS2.1 when displaying web pages. Email clients, such as Outlook and Entourage, even in their most recent versions, are not nearly so compliant. Furthermore, | ||
+ | |||
+ | Here are a number of tips & tricks that help get things through unmolested. These are current as of April 2010. | ||
+ | == Layout Techniques == | ||
+ | |||
+ | * **Use tables for layout. Lots of tables.** Table support seems to be pretty solid; support for positioned ''< | ||
+ | * If you're making a static width email, **make sure it isn't more than 600px wide.** | ||
+ | * **Use inline styles, attached to specific tags.** External style sheets are a lost cause, and some web clients, [[http:// | ||
+ | * That means that if you're coloring your links (and who isn' | ||
+ | <a href=" | ||
+ | </ | ||
+ | * **There' | ||
+ | * Here's **a list of inline styles that are pretty well supported**. For all the gory details, see the [[http:// | ||
+ | * background-color | ||
+ | * border | ||
+ | * padding | ||
+ | * color | ||
+ | * font | ||
+ | * font-* (e.g. font-family, | ||
+ | * letter-spacing | ||
+ | * line-height | ||
+ | * table-layout | ||
+ | * text-* (e.g. text-align, text-decoration, | ||
+ | * **Keep your emails pretty simple.** Most mail readers are going to have a hard time with anything complicated. If you look at most of the HTML emails you //get//, you'll see that a lot of them have a simple header, body content, and a footer with unsubscribe information. Not much in the way of fancy layout or graphics. | ||
+ | * **It's generally best to keep messages on a white background.** Some mail readers strip out background colors on the body. If you //really// want to have a colored background, you can make a ' | ||
+ | <body style=" | ||
+ | <div id=" | ||
+ | content goes here | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | * **'' | ||
+ | * **Use HTML character escape sequences**, | ||
+ | |||
+ | == Text Version == | ||
+ | When doing the text version, please visit: | ||
+ | |||
+ | * **Use ASCII**: Use only ASCII characters in your text email messages. This means replacing ''& | ||
+ | * Replace verbiage such as '' | ||
+ | |||
+ | == Using Images == | ||
+ | |||
+ | It somewhat goes without saying these days, but host the images for your email on your website. Don't attach them to the email itself. Here are some tips for how to best host them: | ||
+ | * **ALWAYS date-stamp the filename of every image.** For example, use ''' | ||
+ | * Corollary: **NEVER, EVER move your images**. If you send an email referencing ''/ | ||
+ | * If you're sending a lot of emails, **you might consider grouping all the images in an email folder** and then inside dated folders, rather than putting a date on each image: < | ||
+ | / | ||
+ | / | ||
+ | / | ||
+ | </ | ||
+ | * **Make liberal use of '' | ||
+ | * **Always use the ALT tag**, and make it descriptive. People may be more likely to click ' | ||
+ | == JavaScript / Forms / Flash == | ||
+ | |||
+ | Don't use any JS / Forms / Flash. Most mail clients block all rich media (e.g. flash) as well JavaScript and form submissions. | ||
+ | |||
+ | == Baseline Support (a.k.a. The Worst Email Clients) == | ||
+ | |||
+ | As of August 2008, Gmail and Outlook 2007 (which uses the Word rendering engine) are the worst email clients. If you can get it to work in those, it will probably work most anywhere else without too many tweaks. | ||
+ | |||
+ | == Mail Client Specific Tricks == | ||
+ | |||
+ | Your email may be read in any mail client, so you'll probably want to pay attention to all of these. | ||
+ | ==== Yahoo Mail ==== | ||
+ | * The new version of [[http:// | ||
+ | < | ||
+ | p { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | (Incidentally, | ||
+ | ==== Outlook 2007 ==== | ||
+ | * In a stroke of pure stupidity, Microsoft decided to switch Outlook 2007 to using the rather broken Microsoft Word HTML rendering engine. The [[http:// | ||
+ | * The Word engine [[http:// | ||
+ | * You'll definitely want to test your HTML emails in Outlook 2007, and make them look as good as you can. They' |