You still have a nice amount of control, the prefab template is pretty nice, and MailChimp will do everything possible to make sure the email looks it’s absolute best in all email clients. With MailChimp, you design your emails right within their web editor. They are also full-service HTML email marketing providers out there. Premailer will parse the HTML and convert all your styles into inline styles for you, as well as give you a list of CSS warnings on things you are doing that might be dangerous and for which email clients they are dangerous. With Premailer, you just design your email as a webpage (still think tables), then submit your URL. If you just don’t want to think about all these nasty inline styles screwing up your code and all the little rules of what will work and won’t work, don’t worry! There is a really nice (and free) preflight service out there called Premailer. Too bad we can’t just use a div with auto left and right margins for centering, but it won’t work most email clients. The outer table is also your big chance to set the background-color for the whole email. A vary common technique is to set a table with a 100% width with a nested table inside of it that is centered with a static width. The email equivalent of the browser window is the “viewport”, or the area in an email client dedicated to showing the actual email. Tables are still the best way to achieve consistent results across email clients. Take a look at the code of almost any HTML email you’ve gotten. Grids are designers friends, there is lots you can do with a grid.

Since you will be using tables, think gridular.

Think creatively on what you can do with images. Need a big green title for a block of text? NOW $159 It’s not as awful as you might think, since we are basically developing a one-off email, inline styles are not nearly as egregious as using them on a website. For a great complete list of what online email services support what, check out this article. There are quite a few more things you should be aware of. Chances are Eudora will ignore anything you try to declare with fonts. Basically any CSS positioning at all doesn’t work.

Background-image / Background-position.

Not many email clients support this, best to just forget it. UPDATE: In 2020, this is much better supported. Hotmail will support a style section in the body but Gmail still doesn’t. Apple Mail.app supports it, but Gmail and Hotmail do not, so it’s a no-no. Not to mention mobile clients.Īssuming you have a fairly large list you are sending out to and have no idea what kinds of email clients they are using, you will need to think in terms of what you can’t do more than what you can do. Here is a partial list: AOL (multiple versions), Comcast, Earthlink, Gmail, Hotmail, Lotus Notes,, Outlook (multiple versions), Thunderbird, Windows Live, Yahoo!, Mail.app. Think it’s a pain having to test websites in 4-5 different browsers? It’s much worse with email. Every single email client reading your email is going to have it’s own rules about how it deals with HTML emails, so you are going to have to design for the lowest common denominator. Design for the lowest common denominator first.Īfter the plain text version of your email is done, then start thinking about design. Most email clients support it, it’s that thing that pops up that asks you if you want to send it plain text, HTML, or both, like in this Thunderbird screen shot:Ĭouple quick tips for your plain-text email: Hard-wrap your lines at 60 characters and write out full URL’s instead of using anchor tags. Sending BOTH a plain-text and an HTML email in one combined email is called the Multipart/Alternative email format, or MIME. You will need to do this anyway, since one of the golden rules is to send a plain-text alternative to HTML emails. Doing this first, while you are fresh, will lead to better copy, a better plan for the design, and ultimately a better email.

The first thing you should do is to write the plain-text version of your email. A good source of information about CSS in in HTML email is Campaign Monitor’s guide. Probably not a great source of information anymore.

Update: This article is about a decade old as I update this. Make sure to create it so that it looks the best it possibly can in all email clients.Only send email to people that opted to receive them.

If you decide to do it, these are what I consider to be the five golden rules of HTML emails: If you just want to do it because everyone else on your block is doing it too, don’t. This is surely a debated issue, but ultimately I say if you have a message you feel would benefit from a nicely designed email you should go for it. Should you be sending HTML emails at all?

Css iliner tool for email