sco.ttadg.es

How To Code Your Own HTML EmailsMarch 11, 2007There are a lot of great resources out there that teach you how to code HTML emails. Most of them go to great lengths to list what works and what doesn’t (you’ll notice the “what doesn’t” column is always much longer than the “what does”).

Anyways, since I was always one of those (annoying) students that asked my teachers “why? why? why?” I thought I’d go over some fundamental issues in coding HTML emails. I believe if you know why things work the way they do, you’ll spend less time worrying about nitty gritty “how” details, and be able to create better emails for you and your customers.One thing I have to stress is that in order to code your own HTML email, you really, really, really need to know how to code HTML. You should be able to code web pages “by hand” without the help of any WYSIWYGs. If you’re that good, then you really don’t need to know a million little rules (like what CSS definitions work in this email program, but not in that email program). Just being able to understand “the fundamentals” will save you a lot of time and frustration.Not an expert coder? No worries. Most email marketing services provide you with built-in templates that you can use instead. MailChimp takes a different approach. We give you 4 of the most common email marketing layouts known to man, and that have been tested in all the major email programs. Just pick a layout, then use our built-in HTML Template Designer to customize it to match your brand. See it in action here.

HTML Email In A Nutshell

An HTML email is nothing but a web page. That’s it. I’m sorry if you thought there was more to it than that. So if you can code your own web page, you can code your own HTML email templates. There is a little catch, though. You have to code like it’s 1996 (I’ll explain later).

HTML Email: Proper Delivery

What makes HTML email so hard for most people is not the designing and coding part. It’s actually delivering it properly. You can’t just attach your HTML file and images to an email and send it. When people open the HTML file, your images will all be broken (because their email program has stored them in a temporary folder somewhere on your hard drive.Even if you do manage to get your HTML email to display properly, there will be some recipients who can’t (or won’t) view HTML email in their email programs. So you need to send your HTML email along with a plain-text alternative version of your message. Then, your recipients’ email programs will automatically determine which format to display. In the early days, email marketing services would call this “HTML email sniffers.” As in, “our solution comes with sniffers that automatically detect which version to display for your recipients.” The truth is, the “sniffer” is on the recipient side, not the sender. It was just easier to explain that way. Nowadays, just about everybody can receive HTML emails. Some still choose not to.So how do you properly send an HTML email along with a plain-text alternative version? Simple. You send it in “Multipart/Alternative MIME” format. If you’re a programmer, this is where the gears in your brain start spinning. So go ahead and bookmark this web page, so you can come back to it later. Now, go on and Google “multipart alternative” and figure out how to send them from your own server. You may find some PHP or Coldfusion or ASP scripts out there. You may even find a way to rig Outlook or Thunderbird to send multipart messages. Go ahead and get it out of your system now. Then, when your ISP shuts you down for sending too many emails from your account and hogging up all their bandwidth, or when you realize that properly cleaning bounces and unsubscribes and tracking opens and clicks is a lot of work, or when you get blacklisted because your server wasn’t reputably configured, come back to this page.Back again? Cool. By now, you’ve learned that delivering HTML email is the hard part, and it’s not what you were hired to do. That’s the part you want to outsource to an email service provider (ahem, like MailChimp). Email service providers (the good ones) work alongside ISPs and anti-spam groups and maintain their servers for deliverability.So you can design and code your own HTML emails. Just use an email service provider to handle delivery. FYI, MailChimp comes with built-in templates, but also lets designers use their own code.Enough about delivery. Let’s move on to the fun stuff…

Coding Your HTML Emails: Fundamental Principles

Like I said earlier, coding an HTML email is basically like coding a web page. Only you’ve got to do it the old fashioned way. Remember back in the 90’s when there were no WYSIWYGs yet, and you had to code everything by hand? Remember the Internet Explorer vs. Netscape wars? Remember how you had to test your work over and over and over again? HTML email is a lot like that. Times 10.

1. The most important thing (if you wish to preserve your sanity) is to keep it simple. Focus on your message, not your craftiness.
2. Images should be posted on your publicly accessible web server. In your code, use absolute paths to point to them. Attachments are often stored in randomly named temporary cache folders by some email programs. They also hog a lot of bandwidth (especially when they bounce) so attachments are not the way to go.Tip: One common mistake is to post your image files on an intranet, extranet, password-protected server, or a secure server that’s extremely slow. Post images on a fast, public-accessible web server.
3. TABLES and SHIM.GIFs are your friend. Keep it simple, because email programs use different HTML rendering engines. Some of them use Internet Explorer, or Firefox. Some of them use their own proprietary renderers (Lotus used to do that, which is why you’ll find lots of old rants on out there about Lotus and HTML email problems).
4. Don’t code your emails too wide. Most people view messages in their preview panes, which are narrow and small. Don’t ask me if you should code for 1024×768 screens or 800×600. Puh-lease. This is email we’re talking about here. The preview pane in AOL 9 is less than 200 pixels wide, my friend. Think small. The templates we design at MailChimp are never more than 600 pixels wide, or they’re f luid-width.
5. Your email will display differently in all the different email programs out there. So testing is a must. And we’re not talking about IE, Firefox, and Safari. We’re talking about Outlook, Outlook 2007, Outlook 2003, Outlook Express, Thunderbird, Apple Mail, Eudora, Lotus, Gmail, Yahoo!Mail, AOL, AOL Web, Hotmail, MSN, Comcast, Earthlink, and on and on and on. How to cope? Keep it simple. TABLES. 600 pixels wide max.
6. Email services that are browser-based, like Gmail, Yahoo!Mail, Hotmail, etc., will strip out your DOCTYPE, BODY, and HEAD tags. Makes sense—they don’t want your code to potentially override theirs. Anything you’d normally code inside those tags (bgcolors, embedded CSS, JavaScript, background music files, etc) will also get stripped.
7. You have to consider spam filters and spam firewalls when you code. It’s pretty obvious that spammy words like “Viagra” or “V14GR4″ will get you spam filtered. But spam filters also look for stuff like, “do you have too many images, and not enough text?” If you’re sloppy with your code, you’ll look like a sloppy spammer. See: How spam filters work.
8. 99% of your CSS won’t work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.). That means no CSS-positioning, DIVs, etc. Before you ask me for a detailed list of what works and what doesn’t, just remember this (it’ll save us all a lot of time): When your email is opened in Gmail, for example, the CSS in your HTML email could potentially override the CSS on the rest of their page. So they disable a lot of it. Inline CSS is safer, and plain-old FONT tags are safest (code like it’s 1996, remember?).

9. How Email Open and Click Tracking Works

   If you’re sending HTML email, chances are you’re doing it for marketing of some sort. If that’s the case, you probably want to track opens and clicks. This functionality is built right into email marketing solutions like MailChimp, so you really don’t have to do anything. But it helps to know how it works.To track an “open” in an HTML email, you’d embed a tiny, 1×1 pixel transparent .GIF at the bottom of the message. Some people call this a “tracker image” or “web beacon.” Actually, you probably don’t want it to be 1×1 pixels, because that’s a little too common. Some anti-virus packages automatically block images that are 1×1, because they know it’s a beacon. Anyways, whenever your recipient opens his email, the tracker image is downloaded from your server (and you can count that as an open). This is why most people will tell you that you can’t track opens unless it’s an HTML email, and why open tracking must be taken with a grain of salt. That’s only partly true.It’s true that only HTML email can have embedded tracking images. But you can track “opens” from a plain-text email too. MailChimp lets you enable click-tracking in your plain-text emails. Whenever someone clicks a link in their plain-text email (or if they leave images turned off while viewing your HTML email) we can track that as an “open.”That brings us to click tracking. You’ve probably already figured this one out. Just use redirect scripts. MailChimp automatically converts all links in your emails to point to our redirect scripts. When a recipient clicks your link, they’re redirected from our server to your original URL (in the blink of an eye) and we track the click. That helps us generate nice little campaign reports telling you which links your recipients clicked most.

   Proper List Management

   I can’t just teach you how to code and deliver HTML emails without telling you at least a little bit about proper list management. If you’ve made it this far, you’re probably the type of do-it-yourselfer who is managing your own email list in some database on your server. Right? That’s fine, but if you don’t manage your list properly after every campaign you send, you could get blacklisted by ISPs and anti-spam groups.Here’s what you need to know about managing your email lists:

   • First of all, don’t send mass email marketing to any lists unless the recipients gave you permission. The key word there was “marketing” not “transactional email” or “personal messages.”
   • After every campaign you send, you will get bounce backs. There are two overall types of bounces. A “soft bounce” means the recipient was “temporarily unavailable” (away on vacation, account overquota, server down for maintenance, etc). A “hard bounce” means the email was undeliverable. The account has expired, it never existed, etc.
   • You should remove hard bounces immediately, because if you keep sending emails to a server, after that server has told you repeatedly “hey buddy, that email doesn’t exist here!” they will most likely start blocking your future messages (and telling other servers out there what a jerk you are, and that you’re probably an infected zombie).
   • If an email soft bounces 3 campaigns in a row, they say you should clean it from your list. That’s best practice, But we’ve found that if you send daily emails, you’re going to lose A LOT of subscribers while they’re on vacations that last more than 3 days. Even if your list is huge, and you can afford to lose a few subscribers like that, you’ll probably get annoyed at all the “hey, I’m not getting your emails anymore” complaints.
   • Unsubscribe requests should be handled immediately.
   • For more information on proper list management, check out these suggestions from MAPS.

   By the way, you can setup a list in MailChimp, and we’ll manage it free (we only charge you if and when you send emails). Then, you can totally customize the signup form and opt-in process to match your branding. Or, use our API to pass opt-in data directly from your website to MailChimp.

   The Future of HTML Email

   Over the years, we’ve seen lots of technology come and go that could “threaten the future of HTML email.” Stuff like blacklists, anti-virus programs that block web beacons, aggressive spam filters, email programs that turn images off by default, Outlook 2007, yadda yadda. But HTML email is here to stay. Instead of obsessing over all the email programs and coding tricks and CSS hacks and Flash compatibility, just keep your designs simple and focus on your message. That being said, there are some things you will need to keep your eye on in the near future:

   • More and more people are switching to browser-based email services, like Yahoo!Mail and Gmail. Those guys are using AJAX and other cool stuff to make their interfaces behave just like your desktop program. And heck, why not put the burden of spam filtering on some hosted solution, instead of your own computer, right? Those services have varying levels of HTML email and CSS support. And they need to make a buck, too. Think about the cost of managing millions (billions?) of email accounts, their bandwidth, their storage, etc. Their spam filters will get more and more aggressive and creative. They’re already starting to require authentication, and will likely gravitate more and more to certified email programs like SenderScore, Habeas, and Goodmail. If you’re a big sender, you’ll need a dedicated IP address and you’ll need to seek certification soon.
   • More and more people are using mobile devices to check their email. Blackberries and cell phones render HTML email in strange ways. They often strip out everything but text and a few images (and display them vertically, too). Does that mean we’ll see a shift back to plain-text?
   • Not really. Apple’s iPhone will display web pages in full, and let you “zoom in” to specifc areas on the screen. It’ll probably handle HTML emails beautifully. See, with email marketing, it’s always two steps back, then one step forward.
   • Microsoft’s Outlook 2007 is switching its email rendering engine to Microsoft Word (instead of Internet Explorer). They say it’s to make the creation and editing of HTML email easier. On the bright side, we can now tell people who want to send emails to their prospects (but don’t have permission) to go use their own email program (instead of, “sorry, you’re out of luck”). On the down side, expect to receive a lot more sloppy looking emails from people really soon.
   • Email Reputation and Certification will be very important soon. Large email senders will want to seek Goodmail, or SenderScore, or Habeas certification. I can’t predict how prevalent they’ll be or how soon (this article has some info on that) but if you plan to do a lot of email marketing, start studying up on those services now.

   Top HTML Email Coding Mistakes

   Over the years, we’ve noticed some common mistakes that people make with HTML email (ahem, okay we admit—we’ve made a few of them ourselves), so we thought it would be good to share them with you…
   Sending nothing but a big, giant graphic as your HTML email.

   We’ve seen lots of people (especially graphic and web designers who are new to email design) send HTML emails that are nothing but one gigantic graphic. First of all, that’s what spammers do. They send a giant graphic, hoping to trick spam filters (see, spam filters need to read text in order to determine if a message is spam). But the spam filters have caught on to this. Try sending an email that’s nothing but a graphic, and you’re lucky if any of your recipients even open it. Spam filters aside, email programs now turn images off by default. That means your recipients have to click a button to “open images” in order to view that work of art you made. If you think they’ll actually take the time, you’re deluding yourself. You can send HTML emails with nice, big graphics. But always include some text in the message, as a backup. Assume people won’t be able to see your images. What would you want them to read there, instead?
   Not testing your campaign in different email programs

   Before you send an email out to your entire list, you should have sent at least 4 or 5 tests to yourself, and to all your test email accounts. Whenever we send one of our MailChimp newsletters, we send about a dozen tests before sending the final version. You should setup as many test accounts with free email providers as possible (like Yahoo!Mail, Hotmail, and Gmail). You might consider setting up accounts with Comcast and AOL, too (AOL accounts can be setup for as low as $4.95, if you call and ask). Leave them in their default settings. Don’t tweak any of their junk mail filters, and don’t add yourself to their address books. Check that your email isn’t spam-filtered, your images aren’t broken, each and every hyperlink works, your CSS is displaying properly, and that your unsubscribe link works.
   Trying to send HTML email campaigns with Outlook or Outlook Express

   Lots of people try sending their HTML email newsletters with Microsoft Outlook, or Outlook Express. This is a big mistake. For starters, Outlook won’t send your email in “multipart-alternative” format. Multipart format means that an HTML email is sent with a plain-text alternative embedded along with it. That way, if someone’s email application can’t read HTML email, the plain-text version displays instead. Also, Outlook will send all your images along as attachments, which won’t always work. Images in HTML email must be hosted on a web server, and your HTML code should point to them with absolute paths. Add to all that the fact that Outlook won’t help you track email clicks and opens, manage unsubscribes, or process and clean bouncebacks from your list. Finally, using your desktop email application to send email marketing campaigns is a bad idea because your ISP may suspend your account after a certain amount of bandwidth has been reached (and some ISPs limit outgoing email to 500 per hour).
   Using JavaScript or ActiveX in HTML email.

   Just about every single email application out there blocks JavaScript and ActiveX from working, as a security measure to prevent viruses. Make sure your code doesn’t contain any JavaScript or ActiveX, such as on form submit buttons, pop-up window links, image pre-loaders, Flash movies, etc. If you’re copying HTML from an existing web page, make sure you clean the code of all JavaScript. If you’re building your HTML email in some kind of WYSIWYG application, or Microsoft Word, Excel, or Powerpoint, be aware that those applications sometimes add “extra” code like ActiveX that will get blocked by some email programs.
   Embedding CSS in the wrong place.

   Linked CSS files won’t always work in HTML email, so you’ve got to use inline or embedded CSS. Normally, when you code a web page, you put the embedded CSS code in between your tags. But lots of email applications (especially browser based ones) strip out the HEAD and BODY tags of your HTML email, so your CSS will get stripped too. Embed your CSS just above the content, below your BODY tag. If you design web pages for a living, that will probably make you feel “dirty” but trust us—it’ll work fine in your emails. A little safer approach would be to use inline CSS instead. Even safer? Ditch CSS altogether. At MailChimp, we use CSS to keep our sanity (it helps make cosing so much easier). But we don’t overuse it, and we always make sure our emails look ok if CSS were to fail completely. Note: Embedded CSS is not very well supported in the newer browser-based email programs, like Yahoo!Mail, Gmail, Windows Live, .Mac Mail, and AOL Webmail. Those web services tend to only allow inline CSS.
   Over-ambitious CSS, CSS positioning, and DHTML.

   Don’t even try to use CSS positioning. Sorry, but with HTML email, you’re still stuck using a lot of tables and shim.gif’s (for now). If you’re not an HTML coding pro, and you’re letting an application generate your HTML email code for you, just be sure to look through the code and check to make sure CSS is done according to our guidelines. While you’re checking the code, make sure there’s no DHTML, either (that’ll break too). Even if you have no idea what CSS positioning or DHTML is, you might be using it accidentally. If you use Microsoft Word (or Excel, or PowerPoint) to “design” an email, then choose “Save as HTML,” you’ll often get some overzealous CSS and other stuff that’ll break in email programs.
   Writing like a spammer.

   We all get spam. You know what it looks like. The subject lines are IN ALL CAPS, letters are highlighted bright red or bright blue, they SCREAM by using lots! of! exclamation! points!!!! and they use phrases like, “hottest, best, click now! limited time only!, and act now!” Don’t be like that. Keep your subject lines brief and to the point. Keep your content relevant. Don’t try to use gimmicky catch phrases. Avoid spammy words. More advice on avoiding spam filters here.
   Only using images

   Some people design an email in Photoshop, then “Export to HTML.” That just generates a big graphic! The problem with this is that spam filters can’t read emails that are nothing but giant graphics. When they encounter an email they can’t read, they block it. Always include some kind of “computer-readable” text in your email. And don’t just make it your “unsubscribe” copy.
   Forgetting the plain-text alternative version.

   Lots of designers and marketers work so hard on their HTML email, they’re too tired to spend any time working on their plain-text alternative email. This is bad. Spam filters will penalize you for not including a plain-text version of your email (think about it—that’s what lazy spammers do). Also, what about all your recipients who can’t (or won’t) view HTML email? And some people prefer plain-text, because they’re always checking email on their mobile devices. Always spend a good amount of time creating your plain-text emails.
   Forgetting to upload your graphics to your public web server

   We’ve seen some people do their work on a “staging” server or on their “network drive” at the office, and forget that the general public won’t won’t have access to those servers (and so images will be broken). Or they use the company’s “network drive” because the email is for internal employees. This of course won’t work for employees who check email at home. We’ve seen others have their IT group setup a temporary computer at the office “that’s open to the public.” That’s not the same as having a public web server with a domain name. Assuming a little makeshift computer in your office can even handle the traffic, coding your email with a bunch of IP addresses in the tags will most likely get your email blocked by spam filters. You should get access to your company’s website. Create a folder for all your email campaigns. You might include subfolders (by date) for each campaign. Host all your images there. While you’re at it, go ahead and create an “archives” page on your website, where visitors can read your past campaigns. This works as great “search engine bait” too.
   Not using “absolute” paths in your images and hyperlinks.

   With HTML email, you need to host all your images on your server, then use absolute paths that point back to your server.

   So, instead of coding an image like this:

   You would code it like this:

   Same goes for hyperlinks. Instead of a link like this:

   Click here

   You’d code the link like this:

   Click here

   If you’re coding your emails locally with some kind of WYSIWYG application, they’ll often keep graphics in some folder on your computer, and reference graphics with “relative” links (relative to the location of your HTML file). Always make sure you go back and check that your tags use absolute paths. One little tip is to go ahead and upload all your email’s graphics to your server at the very beginning of your project. That way, you’ll have to use absolute paths from the get-go.

   Other HTML Email Resources:

   If you’re new to email marketing, we’ve also got a free “Getting Started” guidebook on our website at:
   http://www.mailchimp.com/resources/gen_email_design.phtml
   It’s full of HTML email design and coding tips, best practices, and links to more resources.

   You can also subscribe to The MonkeyWrench, our newsletter that’s chock full of HTML email tips and tricks.

   Bookmark the MailChimp Blog and visit often, because we’re always updating it with the latest HTML email coding tips and email marketing news.

   Other Email Marketing Resources

   • Free HTML email starter templates
   • Common HTML email coding mistakes
   • How To Start Permission Email Marketing
   • Industry Averages for Open, click, bounce, unsubscribe, and complaint rates
   • How spam filters work
   • HTML email tips for web designers

   About MailChimp

   Created in 2001 by The Rocket Science Group, MailChimp is an award-winning email marketing solution that makes email marketing easy, affordable and fun. Thousands of web designers, small business owners, and large corporations from all over the world use MailChimp to manage their permission lists, design great looking HTML email newsletters, and track their campaign results. See how MailChimp works, and then signup for your own free trial account.

This entry was posted on Thursday, July 12th, 2007 at 7:13 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.