HTML emails are a touchy subject for web developers, and for good reason. While communication technology has been evolving so quickly, emails have seemed to be regressing. Not only do many email clients offer little support for anything but rudimentary HTML and CSS, but the prospect of these clients adding support for updated languages like HTML5 and CSS3. Creating emails that look and render well for everyone is more about making concessions and being creative with what you have then it is about building complicated sites. There are a few things to always keep in mind while building these emails.

Use Tables

Unfortunately you're reading that correctly. Many email clients have a hard time with the use of divs that we're all used to. It's time to go back to the 90s and use that old-school table design that you said you would never touch again unless you wanted to display a table of data. You'll want to set your table up something like this.

    <table>
        <tbody>

        <tr>
            <td>Text</td>
        </tr>

        </tbody>
    </table>

Inline Styles

You'll have to use inline styles in order to make sure your styles are being read correctly by every email service and client. Keep these as simple as possible, for example, use width="100px' instead of creating a style for it as style="width:100px". Unless you want to be attaching images to your emails (and it's doubtful that that is true), you'll want to connect all images including html or background-image styles to your publicly accessible server to make sure the images are always available to everyone. Nothing can ruin an HTML email supported by images quite like the image paths not being accessible.

An example of a styled table cell would be:

    <table>
        <tbody>

            <tr style = "background-color:#5A004D;color:#ffffff;text-align:center;font-size:25px;">
                <td height="60px">Join Us For</td> <!--Styled Cell-->
            </tr>

        </tbody>
    </table>

Note how all of the styles are inline and they are kept to simple changes like fonts and colors. This will ensure your email will always show up as you want it to.

Don't make your emails too wide

Some mobile email clients can have as tiny of a width as 200px. You don't have to be as extreme as making your width at most 200px, but try not to make the entire email larger than 600px wide. You could also create a responsive design for your email to counter varied screen widths, but that won't be covered in this post.

Watch your tags

Many services like Gmail and Yahoo! mail will strip out your html tags that could conflict with their page. Any tags like DOC, HTML, HEAD, or BODY may be taken away, so don't rely on these to keep your structure functional. This is one of the biggest reasons why inline styling in your email is essential; there is a much smaller chance of your styles being wiped out. One way to know for sure how your code will react to different clients, is to test it on a service like Litmus. You can upload your snippet and it will give you a huge gallery with views of your email on different clients, browsers, and operating systems. There are lots of services that do this same thing so do your research to find the one that suits you best.

Email Setup

Here's a simple example of what an HTML email that is set up to work in most clients would look like.

    <table width = "500px" style="border-collapse:collapse; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;">
        <tbody>
            <td rowspan="7" width="50px" style="background-color:#5A004D;"></td>
            <td rowspan="7" width="10px" style="background-color:#BCED2B;"></td>
            <tr style = "background-color:#5A004D;color:#ffffff;text-align:center;font-size:25px;">
                <td height="60px">Join Us For</td>
            </tr>
            <tr style = "background-color:#BCED2B;color:#000000;text-align:center;font-size:15px;">
                <td height="30px">Our 10th Annual</td>
            </tr>
            <tr style = "background-color:#BCED2B;color:#000000;text-align:center;font-size:25px;">
                <td height="30px">Thanksgiving Party</td>
            </tr>
            <tr style = "background-color:#5A004D;color:#ffffff;text-align:center;font-size:25px;">
                <td height="50px">During our</td>
            </tr>
            <tr style = "background-color:#5A004D;color:#ffffff;text-align:center;font-size:25px;">
                <td height="40px">Community Open House</td>
            </tr>
            <tr style = "background-color:#5A004D;color:#ffffff;text-align:center;font-size:25px;">
                <td height="40px">November 7, 2012, 1:30-3pm</td>
            </tr>
        </tbody>
    </table>

To Summarize

If there's one thing you have to remember about writing HTML emails, it's about coding like it's 1997. Don't do anything that wouldn't have been possible then, and your email should look fine in the majority of email clients.