Web Development

Most web developers have, even once, written an HTML email.

Coding a HTML website is one thing. Coding an HTML is another. There are a few things you have to consider when designing and coding one.

Keep it Light on the Images

While most people who prefer websites with dazzling images, most people don’t like it in their emails. For a few reasons.

  • They load slowly
  • It (sometimes) makes things hard to read
  • Makes it hard to make sense of it all

Besides, most email clients block the images at first load. Why not take advantage of CSS colors instead?

In any case, use images, but use them sparingly.

Use Tables

I can’t image using tables when coding in HTML, except when its for data based content. I am a big fan of pushing CSS to the limits but with HTML emails, you shouldn’t. Tables will be your friend here. No floats will be available to you.

<table><tr><td>I know you hate me and I know it.</td></tr><table>

Use External Images

Images should be hotlinked from an external server. That’s the way it should be.

<img src="http://www.gravatar.com/avatar/2461e49b79f7b1f72273bad5d06f2b3d?s=75" />

Use Inline CSS

Remember having read, never to use CSSs inline? Forget that when writing HTML emails. Most clients will block or won’t interpret external CSSs.

<p style='background-color: #333333; color: #FFFFFF'>This is some white text on black background</p>

Test on various email clients

Test. Test. Test. A nice HTML email will be able to be rendered correctly on a bunch of mostly used HTML email clients. The most popular are:

  • Microsoft Outlook
  • Yahoo! Mail
  • Hotmail
  • Gmail
  • Apple Mail

Now, don’t forget these when you think of writing or designing your own HTML emails!