Coding for Emails: Tips and Tricks

Coding for emails is a little different than coding a website… unless you happen to be coding that website in 1996. Internet browsers have advanced over the years (some more than others), however email clients, not so much. The cure for the common <div>itis can be found by coding emails, as divs can’t even be used in emails. The key to emails, are tables. Many common styles such as background-image are also unavailable to the email’s coder. The following are a few tips that I’ve encountered while coding emails that I’ve found incredibly handy.

First of all, if the design requires text over an image, do not even consider using background-image. The only way around this is to slice the image and text as an image. However, since most email clients don’t load images by default, you’re going to want to set the alt attribute on the image. To get this to show up correctly, make sure that the width and height of the <img> and the <td> are set to the width and height of the source image.

Also, “display:block” must be applied to the <img> tag.  Not having “display:block” set to the <img> can also cause an issue if the image is with an <a> tag: the <td> will stretch to a height slightly higher than its contents, no matter what the height attribute is set to.

An image within an <a> tag needs to have “border=0” applied to it, or when viewing in an email client, such as gmail, in Internet Exporer, the browser will put a blue border around the image.  Much like different browsers can render html slightly differently, the same is true for email clients. Many times something that looks good in gmail will not look so good in Microsoft Outlook. For instance, animated gifs will not animate in Outlook 2007 or 2010; they will simply show the first frame.

Lastly, it is important to note that viewing your .html file in your browser, is not representative of what it will look like in an email client. In order to properly check if the email is coded properly, you will need to use an email campaign manager such as Mail Chimp, or Campaign Monitor to send tests out, checking the email in different email clients using different browsers on different machines.