Tags

, , , , ,

Email clients such as Outlook and Gmail have their own ways of rendering HTML. Most importantly you have to use inline styles on every element and cannot link to an external stylesheet or have a stylesheet in the head. So rather than having a simple declaration in the head like,

<head>
<style>
body {margin: 0; padding: 0; font-size: 100%; 
   line-height: 1.5; font-family: Arial, Helvetica, sans-serif;}
article, aside, figcaption, figure, footer, header, nav, 
   section {display: block;}
h1, h2, h3, h4 {margin: 1em 0 .5em; line-height: 1.25;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.2em;}
h3 {font-size: 1.0em;}
ul, ol {margin: 1em 0; padding-left: 40px;}
p, figure {margin: 1em 0; }
a img {border: none;}
sup, sub {line-height: 0;}
table, tr, th, td {font-family: Arial, Helvetica, sans-serif;}
</style>
</head>

You need to style each element like,

<p style="margin: 1em 0;">
Please find this email as our invitation for you to join us at a new and
 exciting event to be held on 
<strong>Saturday 28<sup style="line-height: 0;">th </sup>November 2015,
</strong> from 6pm to 10pm.
</p>

At this point you may well be losing the will to live but there is a great solution. Premailer will take transform your HTML content into an email friendly version together with hints and warnings. It is best to keep it simple and the simple style-sheet above is OKish.

Premailer can suck in content from an web-page so when I have time I might create a suitable page template in WordPress. Then I can create my FormidablePro emails as posts and use Premailer to process them to create content for the email actions.

— Update 2015-10-03 —

I had a bright idea in the night. Could I simply write an HTML email in Outlook and then copy and paste it or save it to get the HTML. The answer is “no”, Outlook uses a complex Office XML/HTML mark-up.

Advertisement