 |
| HTML email example |
Solution described here requires only some knowledge of HTML and CSS. But you have to notice that creating an html email can be a very hard work to get it working on most email clients. Some popular clients like GMail or Outlook have lack of support for several CSS definitions. Though there are several guidelines that help to achieve cross-email client support. So if your layout isn´t too wicked it won´t be magic to create an individual mass mailing.
Create HTML template
At first you have to create the HTML template code representing you mailing. You can use any editor of your choice e.g. notepad++, dreamweaver or any other.
Please consider the very helpful guidelines to create markup of emails http://www.campaignmonitor.com/resources/category-archive/cat/designing-and-building-emails/ as well as comparison of css support on different mail clients http://www.campaignmonitor.com/css/.
Respecting that guidelines for email creation we'll use tables for layout and limit it to a width of 550px.We also respect recommendation of rendering links with an additional span.
Our example HTML email template:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="550">
<img alt="MES QUE UN CLUB" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk83N6VzI6biK85s0wvv16W-_Cwvedd1q3S_MBPnYMXn1F4eml2YdpHLKQ0HxCGwOSzpPIL_cSlxYtmBCQATulEU5_yOj9qm_2FMB1OzBD5uJSzXCiWVyCgXfOKTgbkep1YVKiuHhhvPg/s1600/title.JPG" width="550" height="310" />
</td>
</tr>
<tr>
<td width="550" style="padding: 20px 0px 20px 0px;">
<table>
<tr>
<td width="128" valign="top"><img alt="Logo FC Barcelona" src="http://www.vflnet.com/infos/spain/fc_barcelona/fc_barcelona.gif" /></td>
<td width="422" style="font-family: Verdana, Arial, sans; padding: 0px 0px 0px 10px;">
<p style="color: #08468D; font-size: 0.85em; line-height: 1.5em;">Dear {{FirstName}} {{LastName}},<br><br>Sit augue vel lectus! Cursus, purus vel pid pulvinar amet enim placerat aenean tempor pulvinar, proin, mid ac nisi parturient! Nisi elementum porttitor, porta, aliquet enim a? Sociis placerat platea! Proin facilisis dignissim nec sit et! Ridiculus egestas, magna, lorem, proin duis? Cras <a href="http://www.fcbarcelona.com/" style="color: #A61F51;"><span style="color: #A61F51;">nascetur sed penatibus</span></a> turpis enim, nascetur nisi, tortor ac odio. Lectus, lacus, lectus, porttitor, amet proin eros, adipiscing magna ridiculus amet, aenean! In. Sed magnis augue amet, dictumst elit! Turpis adipiscing placerat nascetur pellentesque? Dolor eu nisi? Natoque mid et pulvinar, cursus ac, hac in! Facilisis elementum, nec, integer odio, nisi porttitor aliquet etiam cursus ultrices? Odio. Mid augue enim integer nascetur? Et! Sociis arcu aenean nec mattis nascetur dictumst eros cras nascetur a quis porttitor mattis.<br><br>Yours sincerely<br>Micha
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="550" align="center" style="font-family: Verdana, Arial, sans; padding: 10px 0px 0px 0px; border-top: 1px solid #08468D; color: #08468D;">
<p style="font-size: 0.6em;">individual HTML mail template example created by mmrotzek.de</p>
</td>
</tr>
</table>
</body>
</html>
|
| Preview in web browser |
Notes on creating email HTML template
- Images have to be linked to a web published source. Either you upload your referenced images to your web space or use a service where you can reference them like flikr or picasa.
- You can use http://kuler.adobe.com to create a color theme. In this example used color theme has been generated by uploading barca logo to kuler. Here´s a screenshot:
Send individual emails
Preparing HTML template
There is a great service for preparing your created mailing template to ensure maximum cross email client compliance on http://premailer.dialect.ca/. It will cleanup your definitions e.g. it transforms css definitions to inline style attributes. They´re offering an API too.
After a cleanup with that service our example mailing html code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="550">
<img alt="MES QUE UN CLUB" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk83N6VzI6biK85s0wvv16W-_Cwvedd1q3S_MBPnYMXn1F4eml2YdpHLKQ0HxCGwOSzpPIL_cSlxYtmBCQATulEU5_yOj9qm_2FMB1OzBD5uJSzXCiWVyCgXfOKTgbkep1YVKiuHhhvPg/s1600/title.JPG" width="550" height="310">
</td>
</tr>
<tr>
<td width="550" style="padding: 20px 0px;">
<table><tr>
<td width="128" valign="top"><img alt="Logo FC Barcelona" src="http://www.vflnet.com/infos/spain/fc_barcelona/fc_barcelona.gif"></td>
<td width="422" style="font-family: Verdana, Arial, sans; padding: 0px 0px 0px 10px;">
<p style="color: #08468D; font-size: 0.85em; line-height: 1.5em;">Dear {{FirstName}} {{LastName}},<br><br>Sit augue vel lectus! Cursus, purus vel pid pulvinar amet enim placerat aenean tempor pulvinar, proin, mid ac nisi parturient! Nisi elementum porttitor, porta, aliquet enim a? Sociis placerat platea! Proin facilisis dignissim nec sit et! Ridiculus egestas, magna, lorem, proin duis? Cras <a href="http://www.fcbarcelona.com/" style="color: #A61F51;"><span style="color: #A61F51;">nascetur sed penatibus</span></a> turpis enim, nascetur nisi, tortor ac odio. Lectus, lacus, lectus, porttitor, amet proin eros, adipiscing magna ridiculus amet, aenean! In. Sed magnis augue amet, dictumst elit! Turpis adipiscing placerat nascetur pellentesque? Dolor eu nisi? Natoque mid et pulvinar, cursus ac, hac in! Facilisis elementum, nec, integer odio, nisi porttitor aliquet etiam cursus ultrices? Odio. Mid augue enim integer nascetur? Et! Sociis arcu aenean nec mattis nascetur dictumst eros cras nascetur a quis porttitor mattis.<br><br>Yours sincerely<br>Micha
</p>
</td>
</tr></table>
</td>
</tr>
<tr>
<td width="550" align="center" style="font-family: Verdana, Arial, sans; border-top-color: #08468D; border-top-width: 1px; padding: 10px 0px 0px; border-top-style: solid; color: #08468D;">
<p style="font-size: 0.6em;">individual HTML mail template example created by mmrotzek.de</p>
</td>
</tr>
</table>
</body></html>
To create individual emails based on a template we need Thunderbird email client and the Mail Merge add-on.
Note: In your Thunderbird preferences you have to enable composing of HTML messages.
- compose a new message
- as recipient fill-in
{{FirstName}} {{LastName}} <{{Mail}}> - select a subject
- copy your clean HTML mail template code
- activate message body by clicking on it and select
Insert > HTML... - in the opening dialog paste your code
- select
File > Mail Merge - on opening dialog you can select options to fill you placeholder by contact from address book or by a special csv file (refer to add-on documentation for details)
- in this example we´ll use a csv file (note: replacement with a csv file has no limits, you can use any custom placeholder you like)
FirstName,LastName,Mail Lionel,Messi,messi@fcbarcelona.com Charles,Puyol,puyol@fcbarcelona.com Josep,Guardiola,pep@fcbarcelona.com
As result three individual emails are generated by the add-on.
This example uses the 'Save As Draft' option for test purposes, because we don´t want to send emails to fc barcelona players ;). If you want to generate and send the mails use 'Send Now' or 'Send Later' option.
No comments:
Post a Comment