almost 2 years ago

There are a few services that enable you to create responsive HTML email if you don't know how (with a price tag):

If you know how to write HTML & CSS, you might think writing a responsive HTML email would be simple. WRONG !!! There is reason why such services exists. How to make sure your email look the same on ALL email clients is the first & most difficult problem you will run into. Have a look at this test page provided by Email on Acid

I attempted to write a simple responsive HTML email with the following feature:

  1. Have an banner image on the top
  2. The rest of the body is just text

I found this tutorial and followed it, the first thing I noticed is that:

Everything should be inside a table tag

Because mail clients like outlook would ignore a few important CSS properties: background-image, float, margin and display.reference here

CSS Style in the header section will be ignored

You have to use inline style for all of the elements. MailChimp is really nice because they provides a tool to convert all styles inside the header section to inline style.

I don't know how to reference image files

You can add the image as attachment but I have no idea how to get a reference id to that attachment. So I had to upload the image to a web server (or to your dropbox and make it public).

Outlook makes my image unresponsive

Depending on how you send the email, outlook may add the width and height of the image file to the image tag's style. This makes the image unresponsive. To overcome this problem, do this:

    <style type="text/css" media="screen">
        body.outlook img {
          width: 100% !important;
          max-width: 100% !important;

Then, in your body tag:

<body class="outlook">

Once the fix is applied, Outlook will not ignore the style in the head section anymore.

Validate your HTML using W3C's validator

Link to W3C's HTMl validator

How to send HTML mail using Mac's Mail app?

  1. Open your HTML file locally in Safari
  2. Press 'command + i' (now the Mail app should pop up with the HTML content in it)
  3. Send it

DO NOT use 'command + a' to select the entire HTML page and copy and paste it into the Mail app. This works, but during this process, certain css attribute will be changed and you are likely to lose the responsiveness of your site!

This is only the beginning of the headaches. After you overcome the compatibility issure, you have to think about spam. Will your mass email pass the spam filter is another tricky topic.

I can see why you may want to pay for those email services now.

← Visualize the relationships of Django models using Django extensions Setup Sublime Text 3 for React.js development →
comments powered by Disqus