blog.vrypan.net
archive about
archive about
— #en #howto

A super-minimal, almost "plain-text" email template for Mailchimp.

How I created a very simple email template for Mailchimp that resembles a lot plain text emails, to send my daily digest.

Yesterday, I was setting up the daily digest email for notes.vrypan.net and I was looking for a way to send a plain text RSS-driven campaign from Mailchimp. It turns out, there's no way to do this.

So, I decided to create my own email template, that would be as close to a plain text email as possible.

Why would you want to use such a plain template for your newsletter?

For one, the syntax is so simple, that any mail client will display it correctly. The more complicated is the HTML code behind your email, the higher the possibility some of the recipients will not be able to see it the way it's supposed to.

I also like that recipients to see my emails the way they sees all other "normal" emails: using the font faces and sizes and colours each one is used to.

Anyway, if you want to go this way, here is a basic template you can use as is, or modify to your likes. (Instructions on importing templates to Mailchimp.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- NAME: VERY PLAIN TEXT -->
        <meta name="viewport" content="width=device-width">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>*|MC:SUBJECT|*</title>
        <style>
            img {max-width: 100%; height: auto;}
        </style>
</head>
    <body>
        <p mc:edit="header">Header section</p>
        <div mc:edit="body"><p>Here is your mail body.</p></div>
        <div mc:edit="footer">
        <br><br>*|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|* *|END:IF|*<br><br>
        <a href="*|UNSUB|*">unsubscribe</a> | 
        <a href="*|UPDATE_PROFILE|*">edit preferences</a><br>
        <br>
        *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
        </div>
    </body>
</html>

If you add images in your email, I would advise leaving "width", "height" and "keep proportions" empty. I'm not 100% sure this is the perfect way to do it, but it helps mobile clients scale down the image to fit the width of a small screen (and the css included in the template makes sure a big image will not ruin your email layout.) I'm open to suggestions on this.

Image settings in Mailchimp