Not all graphic emails

Currently, I’m working in digital politics. And there is a tendency in this industry to send bright, colorful graphic emails once in a while.

I am all for that, but I noticed that sometimes those graphic emails are just text, and that really bothers me. I firmly believe in looking for opportunities to use html and text whenever possible in an email, for a few reasons:

  1. If you are sending an all graphic email and a user does not have images automatically download in their email account, or if a user is using a screenreader, they aren’t going to see your image. They are going to see your html and text though
  2. Images can be heavy and can really load down your email. If a user is looking at your email on their phone (and you can bet about half of them probably are), they might be in for a slow experience. And if their cell reception is a little slow, they probably aren’t going to wait around for your image to load.
  3. What if there’s a last minute typo that got missed? I’ve seen this happen MANY times (one time I misspelled Swarovski on a digital banner ad, and even when it was pointed out I couldn’t see the mistake). If you’ve got a graphic email, the graphic has to go back to the designer. If you’ve got an html & text email, you can fix it on the fly up until the moment you hit send.

So here’s the email I made to share with my colleagues. It was based on a design I saw in my email inbox, I can not remember who sent it but I have seen numerous of a similar design. Still, my apologies to the original designer. Here’s what it looks like:

Before you send a graphic email, you might want to think about if you actually need an image--or if basically you are just using colorful text. And I made you this template to make it easier"

And here’s the html for it. As with any code you find on the internet, please test it with Litmus and live devices before you hit send:

<center>
    <! — [if (gte mso 9) | (IE)]>
    <table cellspacing=”0″ cellpadding=”0″ align=”center” border=”0″ width=”400″ >
        <tr>
            <td>
<! – [endif]>
<table cellspacing=”0″ cellpadding=”0″ align=”center” border=”0″ width=”100%” bgcolor=”#ffffff” style=”max-width: 400px” >
    <tr>
        <td style=”padding: 20px;”>
            <p style=”color:#142445; font-size: 22px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-align: center; line-height: 140%;”>Before you send an <br><span style=”color:#48ACEC;”> all image email</span> </p>
        </td>
    </tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ align=”center” border=”0″ width=”100%” bgcolor=”#48ACEC” style=”max-width: 400px”>
    <tr>
        <td style=”padding: 20px;”>
            <p style=”color:#142445; font-size: 22px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-align: center; line-height: 140%;”>You might want to think about if you <span style=”color: #ffffff;”>actually need an image</span> </p>
        </td>
    </tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ align=”center” border=”0″ width=”100%” bgcolor=”#142445″ style=”max-width: 400px”>
    <tr>
        <td style=”padding: 20px;”>
            <p style=”color:#48ACEC; font-size: 22px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-align: center; line-height: 140%;”><span style=”color:#ffffff;”>Or if basically you are just using</span> colorful text </p>
        </td>
    </tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ align=”center” border=”0″ width=”100%” bgcolor=”#ffffff” style=”max-width: 400px” >
    <tr>
        <td style=”padding: 20px;”>
            <p style=”color:#142445; font-size: 22px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-align: center; line-height: 140%;”><span style=”color:#48ACEC;”> And I made you this template</span> to make it easier </p>
        </td>
    </tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ align=”left” border=”0″ width=”100%” bgcolor=”#ffffff”>
    <tr>
        <td style=”line-height: 20px;”>&nbsp</td>
    </tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ align=”center” border=”0″ width=”100%” bgcolor=”#ffffff” style=”max-width: 400px”>
    <tr>
        <td align=”center”>
            <p align=”center”>
                    <a href=”URL?refcode={{refcode}}” style=”font-family: sans-serif; font-size: 18px; background-color: #cb0015; border-top: 1px solid #cb0015; border-bottom: 2px solid #cb0015; width: 200px; margin: 12px auto; border-radius: 4px; text-align: center; color: white; text-decoration: none; padding: 12px 5px 11px; font-weight:700; display: block; text-transform: uppercase; letter-spacing: 0.075em;”>DONATE</a></p>
        </td>
    </tr>
</table>
<! — [if (gte mso 9) | (IE)]>
    </td>
</tr>
    </table >
<! – [endif]>
</center>