Difference between revisions of "Writing HTML Emails"

Revision as of 20:57, 9 November 2014

Writing HTML emails is no small challenge.

You need a few basic things

1. A good understanding of HTML (HTML coders are preferable)
2. A good sense of design (Graphic designers are preferable)
3. A knowledge of how HTML works in Email program including Dedicate Email Programs ( Outlook, Thunderbird ) Web Based Browsers ( GMail, Hotmail, etc.) and text only email browsers
4. A working knowledge of bxp software
5. Some knowledge of mail merge and the idea of field replacement

These things challenge many companies and when you become experienced in their delivery you can become a BPO for these types of processes.

The project would follow the major following steps.

1 1. Make it pretty

Start with a graphic designer and a plan to create an attractive looking email. Don't worry about the code or the engine, just get it looking wow.

2 2. HTML code it up

This is the process of converting the design to an HTML page. There are many websites with guidelines on how this is best accomplished.

Here are some of them: [1]

2.1 Getting started guides

Getting Started Guides: (from the stackoverflow link above)

• [2]Campaign Monitor
• [3]Mailchimp
• [4]Sitepoint
• [5]Reach Customers Online
• [6]Tuts+

2.2 CSS guides

CSS Support & General Guides:

• [7]Campaign Monitor | CSS Support Guide
• [8]HTML Email Boilerplate
• [9]Litmus | Email Clients FAQ's
• [10]Campaign Monitor | Will it work?
• [11]Mailchimp | Email Marketing Field Guide

2.3 Inline tools

You should always inline your CSS in html-email. Here is a list of [12]CSS Inlining Tools</a>

2.4 Responsive Guides

Responsive Guides:

• [13]Campaign Monitor | Responsive Support Guide
• [14]Style Campaign | Responsive Support Guide
• [15]Litmus | Responsive How-To Infographic
• [16]Litmus | Big List of Responsive & Mobile Resources

Here is [17]a list of devices by resolution and pixel density

2.5 Templates

Templates & Frameworks:

• [18]Ted Goas | Cerberus Responsive Email Patterns
• [19]Email on Acid | Responsive Template
• [20]Brian Graves | Responsive Email Patterns
• [21]Antwort | Responsive Layouts
• [22]Zurb | Ink Responsive Templates
• [23]Campaign Monitor | Free Email Templates
• [24]Mailchimp | Email Blueprints

2.6 Alternate Responsive Examples

• [25]Stack Overflow | Fluid Example
• [26]Email on Acid | Monster's Fluid Layout
• [27]Style Campaign | Fluid Mobile Email Design
• [28]Stack Overflow | Floating Content

Also the Ted Goas Responsive link above has an excellent fluid example.

2.7 Troubleshooting Guides

Troubleshooting & General Guides:

• [29]Email on Acid | Yahoo Media Query Bug Workaround
• [30]Stack Overflow | Colspans and Rowspans in HTML Email
• [31]Mailchimp | Outlook Conditional CSS
• [32]Litmus | Banning Blue Hyperlinks
• [33]Stack Overflow | Webfonts in HTML Email

You'll need to use [34]VML to get background images working in Outlook (Except [35]in the body tag). Here are some VML links:

• [36]Campaign Monitor | Bulletproof Backgrounds
• [37]Campaign Monitor | Bulletproof Buttons

2.8 HTML Editing Tools

If you're looking for free HTML editing tools

• [38] About.com The 10 Best Free Web Editors for Windows

3 3. Work it into BE

The hard part is now over. Your images are on a web server, you have responsive HTML which is cross email browser compatible. All we need to do now is customise it for use record by record.

We now need to set up something similar to a mail merge process as you can do with Excel and Word. i.e. the data in the Excel spreadsheet is populated into the Word document.

In BE every form has a unique Id number. This number is used in the name of every field.

We need to get the field name for the field which contains the data we want to put in the email. Most commonly this is the first name of the customer.

Main Menu > Form Management > Form - Field Mapping > Field Mapping - Manage > Choose the form > You now see the field name for each field.

The name will appear as strCDA_X_field_Y_Z. X is the unique form Id. Z is the unique question Id. Every question also gets a unique number. If the question is a complex type and is made up of sub parts. Y represents the sub part. So if our form is ID 22. We are looking at the third question which is a complex - name block made up of Title, Firstname, Initial, Surname and in our mail we want the first name to be used our field would be strCDA_22_field_1_22. Each field is uniquely named and the field mapping gives you the field names.

BE uses a -- notation to let it know to perform a replacement.

Using the field mapping work out the field name need. Into your HTML at the appropriate places put --strCDA_22_field_1_22-- BE then knows when using this to perform the replacement.

4 4. Add the HTML to the outcome and test

Go into the outcome to send the email

Main Menu > Form Management > Form - Outcome Manager > Outcome - Edit > Choose your Form > Choose the Outcome > External Communications > External Body > Paste in your HTML here.

Fill out the other External mail fields and test the process on yourself.

If you have built this properly, you should get your stunning looking email with proper replacements come straight back to you.

5 Getting help

All n One are more than happy to help you with any part of this process but we will charge for different aspects.

We are not a graphic design team but we know some really good people who are. Have a chat with us, we can make some recommends based on your pricing and requirements.

We can set up the replacements for you, this will usually take 1 to 2 hours support and will include testing that it works.

We can provide support and suggestions on the contents of the emails, again this can be used as a learning experience for your own in house HTML development teams if you need.

Give us a shout on support@allnone.ie and let us help you.