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:
- Have an banner image on the top
- 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:
<head>
<style type="text/css" media="screen">
body.outlook img {
width: 100% !important;
max-width: 100% !important;
}
</style>
</head>
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
How to send HTML mail using Mac's Mail app?
- Open your HTML file locally in Safari
- Press 'command + i' (now the Mail app should pop up with the HTML content in it)
- 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.
