Lots of compatibility issues occur when HTML developers deal with HTML-formatted emails generated using server side languages like PHP, PERL, JAVA, etc. in their projects.

From time to time you’ll find the odd gobbledygooked message in your Web-based email app, but generally speaking HTML-formatted messages render flawlessly on the Web.  On the other hand, desktop mail clients such as Outlook on Windows, Mail.app on OS X, and the rainbow flavors of desktop Linux (Ubuntu, Centos, and so on) routinely have rendering issues with HTML-based email.

Despite the incredible advances in modern software, why does this continue to happen?

The answer is quite simple: certain mail clients ignore certain HTML tags.  Now there’s no universal rule as to which ignores what, but the more you code the more you’ll learn, so for now let’s take a look at one case with Outlook.

For many users, email ‘stationery’ conjures up late 90s memories of Incredimail and a general, unsavory n00bishness.  But for marketing purposes a well-designed mail template, consisting of a stylish background image, thoughtful font selection, layout and copy equates to sales.  Perhaps thousands of people – from prospective clients to the media – will view mail on this template and associate it with your corporate brand, so perfection is key.

Now let’s focus on the background image.  Many HTML developers will begin by putting CSS styles in the header of the HTML email directly, or when that fails try working around the problem using div tags and inline CSS.  But either way the results are borked.  Why?  Because Outlook ignores the CSS property “background-image”.

After so much trial and error, the solution we finally decided on was a pure table-based layout with inline CSS – with the CSS being restricted to each individual table cell since Outlook does not ignore those.  We’ve found this not only renders properly in Outlook, but all the other major desktop and Web clients, too.

And here’s how good it can look.

For your reference, here are few examples of HTML tags that are compatible with almost all desktop and Web-based mail clients.

<table cellspacing="0" cellpadding="0" bgcolor="#6b6f7a">
    <tr>
        <td width="55" height="53" valign="top">
            <img src="http://domainname/media/mail/header_01.jpg" alt="" width="78" height="53" />
        </td>
        <td style="font-family: Arial,sans-serif;" width="546" bgcolor="#ffffff"></td>
        <td style="border-bottom: 1px solid #ffffff; padding: 0pt 15px; background-color: #b6d354; color: #ffffff; text-transform: uppercase; height: 43px; vertical-align: middle; font-size: 12px;"></td>
    </tr>
</table>

CSS style property -

word-wrap: break-all;

With the absence of a background tag, images can be used inside the

<table>

and

<td>

tags.

Happy HTML email  coding!!