Coding HTML for emails can be a total bitch. I’m not going to give an exhaustive how-to here, but I just wanted to share a few tricks I had to learn the hard way, in case it might save you some headaches.

First, a few general rules. These rules will occasionally need to be broken, but if you start off by at least trying to follow them, you’ll give yourself a more stable foundation.

  • Host all of your images online (or via a CDN/S3) and use absolute URLs. Of course.
  • Use old-school tables to position all of your elements. I know you spent a lot of time weaning yourself off them and mastering div tags positioned with CSS, but email clients rarely handle that stuff properly. For email, we’ve gotta take it all back to 1998.
  • When you do use CSS (which is by no means recommended against), put your styles either in-line, or in the body tag. Many email clients will chuck your head tag completely.
  • Set alt attributes for all of your images and links. I’ve seen email clients discard images and links that didn’t have alt attributes.
  • Explicitly setting border-collapse on your tables to collapse with CSS seems to help kill certain table spacing-related quirks.
  • Validate your HTML at w3.org. Get it as close to perfectly valid as possible (necessary hacks may make perfect validity impossible).

Now there’s one thing in particular that has given me an extraordinary amount of hell when doing HTML emails, and that is background images. Particularly when it comes to Outlook’s nasty habit of chucking them.

If you’re okay with having one big background image behind everything, you can apply a background image via CSS to the body tag. That actually works in Outlook. However, put your CSS inline or within the body tag (see above). I’ve also heard that you need to set repeat-y if you go this route; that setting CSS background-repeat to no-repeat will actually lose the background image completely in Outlook. Not sure if that’s always the case or what.

The holy grail here is applying background images to table cells. It doesn’t really work in Outlook. There is, however, a hack that I’ve found, and that is the main thing I wanted to share here today:

<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
	<td style="width: 600px; height: 350px; background-image: url('http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg');">
		<!--[if gte mso 9]>
		<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; top: 0; left: 0; border: 0; z-index: 1;' src="http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg" />
		<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; top: -5; left: -10; border: 0; z-index: 2;'>
		<div>
		<![endif]-->
		<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
		  <tr>
		    <td height="350" align="center" valign="top">
		  		<p>This table in here has a bunch of stuff I want to lay over the background image...</p>		  
		    </td>
		  </tr>
		</table>
		<!--[if gte mso 9]>
		</div>
		</v:shape>
		<![endif]-->
	</td>
</tr>
</table>

Outlook can’t (or refuses to) render basic CSS, but it does know VML (Vector Markup Language), which is what Microsoft Office uses to position elements in Word and Powerpoint. So what we’re doing is targeting Outlook specifically, and hitting it with some VML.


Comments

24
  • Paul

    Paul Paul

    Reply Author

    Thanks for this, really useful.

    Posted on

  • Michael Birchall

    Hey Skwerl,

    Thanks so much for posting this!
    It made my images appear in Outlook… however – when an outlook user replies, Outlook creates a .png of the signature and looks garbled.

    Have you experienced this before? Have a look at my code and images of what’s happening over here..

    http://stackoverflow.com/questions/10732829/html-email-signature-returning-png-file-on-outlook-reply

    Posted on

  • Andrew

    Andrew Andrew

    Reply Author

    Awesome tip – thank you!

    Posted on

  • eric

    eric eric

    Reply Author

    Outlook will often mangle things when you forward. So, this is a great trick — but you need to be careful with it. If you have the luxury of being able to punch exactly the code you want out to your clients (which you ought to have if you’re doing direct email), this will work; if, like some mailing shops, you actually use Outlook to drive your process, this may very well not work at all. (This is surprisingly common. Scary, but surprisingly common.)

    So, if you use this, test it WITH THE WORKFLOW THAT WILL BE USED TO SEND THE MESSAGE.

    (I would love it if I could use this technique. The designers I work with just will not stop producing email designs that can only be rendered by slicing, which includes the very real probability that people won’t see the image alt-text when they open the message. Alas, these days I’m mostly handing off to a direct email shop that uses Outlook to send their messages…don’t ask, I can’t explain why.)

    Posted on

  • David Withers

    I’m having an issue where nested tables are only showing the first nested table.
    let me know if you’d like to see the code.

    Also thank you!!!! so close to having a bomb proof email!!!

    Posted on

  • Wolfi

    Wolfi Wolfi

    Reply Author

    Whoaa… thanks. I’ve searched and tryed for hours to get this to run.

    Posted on

  • hieu

    hieu hieu

    Reply Author

    Hi, thanks.
    If i send email to gmail or yahoo is text view not correct as in email of outlook. You can help me fix it.

    Thanks.

    Posted on

  • Arne

    Arne Arne

    Reply Author

    Thanks, Dude! You definitely made my day!

    Posted on

  • Pike

    Pike Pike

    Reply Author

    Thanks for the info, but using your code here did nothing for me when viewing it in Outlook 2010. Still on the hunt for a way to view images with overlaid html tables in Outlook. If anyone has any other info on this please let me know

    Posted on

    • Kym

      Kym Kym

      Reply Author

      Pike, Have you found a solution for this? I’m having the same problem. I’ve searched all over and everyone is saying to do the same thing with VML and it works everywhere except when I view in outlook 2010 and outlook 2013. In web outlook it views fine though.

      Posted on

  • Lauranne

    Hi !
    Thanks for your explanation. In fact it makes couple of weeks I try several solution to display properly signature with picture. My main problem is for Outlook Web App users, for whom a popup window appears at each email (they can’t set a checkbox to don’t show popup window anymore).

    It appears that, if the VML code appears a good solution for outlook 2010 for example, it seems not working for OWA. Do you have any idea / hint / solution about solving the problem ?

    Thanks for your help !

    Posted on

  • Raquel

    Raquel Raquel

    Reply Author

    Fantastic! Thanks for sharing, our holiday email looks awesome!!

    Posted on

  • Passing Through

    Passing Through Passing Through

    Reply Author

    Awesome write-up. Just was I was looking for. Thank you for sharing.

    Posted on

  • Amelie Wight

    Howdy! I know this is somewhat off topic but I was wondering which blog platform are you using for this site? I’m getting sick and tired of WordPress because I’ve had problems with hackers and I’m looking at alternatives for another platform. I would be awesome if you could point me in the direction of a good platform. Orange Roofing Contractors, 1010 N. Batavia St., #F2, Orange, CA, 92867, US, 714-770-8684

    Posted on

  • Ashok

    Ashok Ashok

    Reply Author

    Really thankful to you. you saved my time to fix the issue in Outlook.

    Posted on

  • ljubo

    ljubo ljubo

    Reply Author

    JUST wanted to thank you!!!!!! works great

    Posted on

  • chintan

    chintan chintan

    Reply Author

    i try but it is not working properly

    plz tell me how to apply background image in outlook

    Posted on

  • Lydia

    Lydia Lydia

    Reply Author

    It’s not working for me:

    Help, please…

    Posted on

  • Jonny

    Jonny Jonny

    Reply Author

    This looks great! However, I am trying to right align a nested table where the is and it doesn’t like it! Do you know how to align right tables within a vml shape?

    Posted on

  • Dmytro

    Dmytro Dmytro

    Reply Author

    Thank you mate you just did my evening. I’ve spent the whole day to get working VML hack. Thanks for sharing.

    Posted on

  • suganya

    suganya suganya

    Reply Author

    I tried the code. But it is not working for me. Should I do some customizations to use VML in my HTML?
    Looking forward your great help

    Posted on