Web Development

What you should know when coding HTML emails

HTML emails continue to be a popular way of marketing a company's product. Here are some best practices to keep in mind when coding those emails.

HTML emails continue to be a popular way of marketing. While social media is definitely a force to be reckoned with, emails are still considered the official way of communicating with customers and clients. In fact, social networks rely on emails to communicate with their subscribers and to push other important information to users. In addition, more and more people are accessing their emails on their mobile devices than at any other time in history. That being the case, let's see how we can develop HTML emails that render well on different browsers and on the different mobile devices.

What to avoid

Almost every website you come across today uses some CSS in one way or another. Email clients like Gmail, however, are wary of CSS and in most cases will cut everything above the body tag and disable external style sheets. If you'll be using CSS in your layout, make sure that it's embedded CSS as opposed to external style sheets that use the <link rel="stylesheet"> designation.

JavaScript should never be used, otherwise your emails will be marked as spam. While modern developers have moved away from using tables and prefer the use of Divs, HTML emails are still in the dinosaur age and the use of tables will ensure that your emails render well on most email clients. You're welcome to try using <div> tags but research has shown more consistent support from tables.

Working with images

Images are rendered differently on different email clients. Gmail, for example, does not support background images and will ignore any url() attribute in an inline style that points to an image. By Default, most email clients will turn off images. To counter this, use background colors to act as fallbacks to ensure that our message remains readable even with the images disabled. With most users choosing not to display images, always use the Alt attribute to describe the image to ensure that your recipients do not lose out entirely.

When calling images, use absolute url paths as shown below:

<img src= http://www.e-labz.com/images/davgit.jpg alt= "David" />

The layout

If you are designing in Photoshop, you can use the Slice Tool to help you chop up your HTML layout into several components. Be sure to save the final layout as "HTML and Images" under the "Save as Type" dialog box.

What should be the width of your layout? With too many possible email clients to code for every scenario, the consensus in the Web community is to keep layouts fairly narrow by staying under 600px wise.

If you are still a newbie, using a template and modifying it rather than designing from scratch will get you the same results. As long as you have a specific design in mind, you can always turn around any template to fit your specs.

Using CSS

Most email clients have a difficult time rendering CSS and if you can design without it, the better. If you do have to employ some CSS, however, ensure that you specify it inline as opposed to making CSS declarations in the <head> section. For example, if you'll be adding some CSS to table cells, rather than specifying it in the <table> tag, you can instead specify it in the <td> tag. Notice how this has been done in the code below:

<table cellspacing="0"
cellpadding="8" border="0">
<tr>
<td width="100"></td>
<td width="450"></td>
</tr>
</table>

The above code will render more consistently across major email clients. Keeping things simple will ensure your content remains readable across a variety of devices and orientations.

About

David Gitonga is an avid reader and writer and has worked with various companies to design, develop, and maintain their websites. He has worked with websites as an online content marketing strategist in the field of tech, social media, design, and de...

8 comments
ginakhan
ginakhan

I am trying to find an email newsletter template built on DIVS as tables are considered inaccessible for us. Does anyone have any suggestions; also I need to make it work in OUTLOOK :|!

garyoa1
garyoa1

I have html just plain shut off. Used to be most would include a link to plain text. I guess they gave that up since most html mail I get can't be read unless I jump thru hoops to turn it back on. Generally speaking... I'm not into hoops.

Deadly Ernest
Deadly Ernest

who use a mail client that displays ALL mail as plain text only so I can see, at a glance, what the real URL is behind the hot link and to cut out the crap scripts and flash so many load in now.

Kieron Seymour-Howell
Kieron Seymour-Howell

Personally, I use HTML for documents and articles, both to write them and for saving them. It is the most efficient size of document that still looks nice and it has the advantage of working on ANY computer system. I long ago gave up on proprietary document formats because I got tired of creating other versions for various needs. HTML especially when coupled with simple CSS is an extremely flexible and efficient method of saving large documents. All your documents can be formatted at once if you use external style sheets also. I do not understand that why this is not the normal format for storing documents.

NickNielsen
NickNielsen

My personal email client (Thunderbird) is set to display emails as text from all senders except those I specifically allow to display as html. I think I've allowed two, so far. I don't get a lot of business advertising on the accounts synched to that client...that's why I kept the Hotmail account! B-)

ian3880
ian3880

... 'Deadly Earnest' beat me to posting something similar. Business marketing via HTML emails annoy the $^&*^%$ out of me. Total waste of data. Fancy gloss and twizz doesn't in any way improve the message. I have HTML viewing turned off. If I can't get the message in plain text, I delete the email. BUT I still have to pay for all that crap data in my downloads. GRRRRRRRRRR! Yeah - I'll wear the troglodyte tag with pride.

ed
ed

Many of us know how HTML works and about using an external style sheet for formatting multiple documents. This article was only about using HTML for email messages and was describing the limitations email clients (and human readers) sometimes place on its use.

Editor's Picks