Foundation for E-mails

It had been awhile since I went through the painful process of developing HTML e-mails. I generally try to avoid it when possible (because Microsoft Outlook*). I was recently tasked to create one for a client and I decided to give Foundation for Emails a try. It makes the process infinitely less painful because it assists with standard compatibility gotchas, allows you use SASS/external stylesheets (which it will automatically inline for you when it compiles), real-time previews plus a bunch of useful Gulp plugins.

It has been on my radar for quite awhile, but I finally got a chance to try it. It is way better than developing HTML e-mails by hand. I have used Foundation 6 for web sites before (props for Equalizer and Interchange, plus non-painful vertical menu support), but this was the first time I tried it for e-mails.

Oh yeah, it’s also free (as in beer and speech).

Notes on Foundation

  • If you are not a developer, you should try one of the services that offer visual builders and templates, like MailChimp. Foundation for Emails is not for you.
  • If you know how to code HTML and CSS but not SASS (or are terrified of the command line), the CSS version will work for you. Just remember to use their web inliner on your markup when you are done, else you are going to have a bad day.
  • If you are cool with SASS and know command line, you’ll definitely want the SASS version.
    • Automatic, real-time inlining (gulp-inline-css) and SASS compiling (gulp-sass).
    • Real-time previews via BrowserSync.
    • Image compression (gulp-imagemin)
    • Handlebars templates (which I don’t use) but also this convenient markup that they call Inky.
    • Built-in support for hosting images on AWS S3/CloudFront, SMTP credentials (I haven’t figured out how to get it to send a test e-mail yet), and Litmus testing (which I will never use because it is $79/month).

Note on Testing

I haven’t figured out how to get the SMTP to work yet. If you don’t have money to burn on something like Litmus or GetResponse to test your e-mails, you’ll have to test them yourself. If you don’t feel like fussing with sending e-mail from your text machine (thanks to port 25 issues or draconian spam filtering), you can paste your code into this site and have it send you an HTML message:

  • PutsMail – Test your e-mails before sending them.
WP Engine Managed WordPress Hosting

A Note on Phone Numbers

  • If you have any phone numbers in your e-mail (ex: 1-800-555-1212), you’re going to want to change them so that Gmail et al do not convert them into ugly blue links:
    1. Make the phone number a proper hyperlink:
      <a href="tel:18005551212">1-800-555-1212</a>
    2. Either inline the proper color and text decoration, etc that you want or assign them to a CSS class. For example, I wanted the phone number to match the body text (which was #333) and not to look like a hyperlink, so:
      <a href="tel:18005551212" style="color: #333; text-decoration: none;">1-800-555-1212</a>

You can obviously make CSS classes to do this too if you have several. I only had one so I inlined it.

*Surprisingly, Google gave me more grief while I was testing than Outlook 365 for Mac did (which shockingly rendered the F4E compiled output perfectly on the first try). #Google blocked me because it said my “app is less secure,” despite the version of OpenSSL that is installed on my laptop having been released yesterday. I bet that I have a newer version of OpenSSL installed than 99.999% of Windows users.

Gmail Blocks Outlook as Less Secure App

Leave a Reply

Your email address will not be published. * Denotes required field.
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Tip: Do you want an image (avatar) next to your posts? Sign up for a free Gravatar account. It only takes 5 minutes - simply click the "Create Your Own Gravatar" button, provide your e-mail address and upload a photo to associate with it.