HTML Email

Client Guide to Email/Litmus

View on Google Docs

Variations from Web standards

Its easiest to frame email standards in terms of what should be done differently from typical web HTML. Following web standards for an HTML email is a recipe for disaster.

CSS

Tables

In case you forgot:

Media Queries for Changing Visibility

The below is tested and known to work across email clients. Note that this is an example of your source file, not the built HTML that will appear in the delivered email where .mobile will be inlined into the HTML.

<style>
    .mobile {
        float: left;
        max-height: 0;
        overflow: hidden;
        width: 0;
    }

    @media all and (max-width: 500px) {
        body[style] .mobile {
            float: none !important;
            max-height: inherit !important;
            overflow: hidden !important;
            width: auto !important;
        }
        body[style] .desk {
            display: none !important;
        }
    }
</style>
<table class="desk">
    <tbody>
        <tr>
            <td>
                Visible on Desktop
            </td>
        </tr>
    </tbody>
</table>
<div class="mobile">
    <table class="mobile">
        <tbody>
            <tr>
                <td>
                    Visible on Phones
                </td>
            </tr>
        </tbody>
    </table>
</div>

Testing

Legal Junk