vrypan — Panayotis Vryonis
My blog is a digital scrapbook of ideas, thoughts and personal events. My digital home is www.vrypan.net.
notes@vrypanThe Letterrss

#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

Let me send you my newsletter.

The Letter is a newsletter I send out whenever I have something to say or share. It may take a few days, weeks or months for the next one. It's not your typical "newsletter" but you'll probably find it interesting and insightful at times.

Don't worry, I hate spam as much as you do.

Share this post:           HN