Every time you read your email, you are likely to open an HTML email, one which includes links and images and the omnipresent “If you wish to unsubscribe to this mailing…†directive at the bottom.
I occasionally delete these messages before my conscious brain even knows they’re there. But some HTML emails are stunning—succinct, content-driven messages wrapped in beautifully designed boxes. And I read them. Some are from Fortune 500 companies, some are from small business entrepreneurs. All are trying to stand out in a crowded ecosystem.
Many of us would profit by knowing how to create and send HTML emails. They keep ongoing clients in the loop, they attract new clients, they act as extensions of our websites and blogs, they help us, on a regular basis, to refine our message.
I recently attended an excellent—and free–seminar on HTML email at the Noble Desktop, a New York-based organization which specializes in teaching all aspects of Web Design and Desktop Publishing. I thought it important to share what I learned.
What do you need to send an HTML email?
Basically, any email application that supports POP, IMAP and SMTP will allow you to send HTML emails. In short, all of them. Clients such as Microsoft Outlook, Thunderbird, Gmail and Hotmail all include tools to send HTML emails.
In the current version of Thunderbird, for example, you would:
- Create the HTML page you wish to send, either by hand coding or using an editor such as Dreamweaver.
- Select and copy the source code.
- Click on Message> New Message
- Click in the body of the message.
- Click on Insert >HTML
- Paste in the source code.
It is possible, with some applications, to code directly in the email window. However, coding your own email gives you greater control over the final product. So, code it, make sure that you have chosen the appropriate “Insert HTML†tool, and and paste it into the email window.
The nuts and bolts
When you design your HTML email, keep it simple.
In creating a normal web page, you are designing it to be part of a whole, a component that interacts with other components within your design universe. An HTML email is a self-contained entity at the mercy of a larger entity—the email application itself.
These applications—Outlook, Gmail, Yahoo—live in their own HTML and CSS universes and have their own coding rules to follow. Therefore, some basic rules to keep your code out of their way:
- No Flash, no Quicktime movies, no animated GIF’s. Current Email applications cannot handle them.
- You can use CSS to style, but again, keep it simple.
- Put your CSS style declarations in the body of the email, not in the <head> tag. Email applications—especially browser-based ones like Gmail– are very protective of that <head> space; they don’t want your code conflicting with theirs. If they see any weird code (translation: anything not theirs) in the <head>, they’ll strip it.
- Style using Class, not ID attributes.
- When you make a CSS style declaration, do not use any CSS shorthand. Use ‘font-family,’ font-size’ etc. Spell it out.
- Once you’ve made the declaration, repeat it inline.
For example, don’t just do this:<td colspan=â€2†valign=â€top†class=â€mydocâ€>Do this:<td colspan=â€2†valign=â€top†class=â€mydoc†style=â€font-size:13px; font-weight:bold; padding: 0px; font-family= Verdana, Helvetica, sans-serif; margin= 0px;â€Â face=†Verdana, Helvetica, sans-serif;†size=â€13pxâ€>The redundancy ensures consistency across platforms, as the inline style is permanently attached to the element it is styling. It will also protect you in case the declaration is overlooked or deleted. - Avoid using DIV’s and SPAN’s. SPAN’s might survive intact, as they are in fact inline elements. DIV’s will cause conflicts with your email application’s code. Which is why Tables are good. Yes, Tables. Yes, Nested Tables.It seems counter-intuitive to go back in time to Tables when you are designing something that may be read on a Blackberry or IPhone, but Tables are clean and simple and they read well across browsers. Tim Slavin of Sitepoint suggests nesting everything inside one big “Container Table,†as it acts as a sort of <BODY> tag, protecting everything inside it.Inside the large “Container Table†you might design a one-column or two-column layout with a header, main content, and footer. You might create a layout with more complexity, but nest no more than four levels of tables. Simplicity.
- If you are using absolute widths, make your “Container Table†600px. Most email windows are not nearly as wide as your screen, and many people make their windows even smaller, so 600px is a safe width. If you are using percentages, make your “Container Table†no greater than 98%. Some sources suggest 95% or even 90%, to make sure you are within Yahoo’s or Gmail’s or Hotmail’s structural parameters.
- Use absolute paths for image links. Remember that your HTML email is alone in a strange universe. Your images live on your website; make sure that the email can find its way to them.
- Include height and width attributes for all images; if your images fail to load, your layout will remain intact.
- Test Your HTML Code. Once you’re happy with the design of your HTML email, test it out on as many email applications as you can. Insert your HTML email into Thunderbird or Outlook and send it to yourself. Then send it again via Gmail or Apple Mail. And again via….you get the idea.
The proliferation of HTML email has spawned new companies that offer HTML email services such as customizable templates, email list management and mailing strategies, tracking and analytics. Among them: MailChimp, Campaign Monitor, MaxBulk Mailer and Constant Contact. Have a look at their offerings. They can do a lot of your heavy lifting.
HTML email is, sadly, likely to be pegged as spam, and filtered out before your target audience ever sees it. To separate themselves from Internet ruffians, legitimate senders are increasingly turning to companies like Return Path for certification, and it seems likely that certification will be mandatory in the very near future. And for tips on getting through spam filters, check out these great recommendations posted on the Webgrrls blog.
HTML email is clearly not the only way to communicate with clients, customers, friends, and colleagues. But it is a great arrow in your quiver and a good way to send up a flare.
Did you enjoy this post? subscribe now to get all of the posts Comments (0)