Writing HTML Emails - Revision history

Philip Lacey at 17:49, 5 February 2018

2018-02-05T17:49:02Z

Philip Lacey at 18:38, 19 July 2015

2015-07-19T18:38:30Z

Philip Lacey at 19:57, 9 November 2014

2014-11-09T19:57:30Z

Philip Lacey at 19:33, 30 June 2014

2014-06-30T19:33:38Z

Philip Lacey at 15:53, 28 May 2014

2014-05-28T15:53:50Z

Philip Lacey at 15:52, 28 May 2014

2014-05-28T15:52:25Z

Philip Lacey at 15:50, 28 May 2014

2014-05-28T15:50:46Z

Philip Lacey at 15:49, 28 May 2014

2014-05-28T15:49:28Z

Philip Lacey at 15:47, 28 May 2014

2014-05-28T15:47:57Z

Philip Lacey: Created page with "Writing HTML emails is no small challenge. You need a few basic things # A good understanding of HTML (HTML coders are preferable) # A good sense of design (Graphic designer..."

2014-05-28T15:44:19Z

Created page with "Writing HTML emails is no small challenge. You need a few basic things # A good understanding of HTML (HTML coders are preferable) # A good sense of design (Graphic designer..."

New page

Writing HTML emails is no small challenge.

You need a few basic things

# A good understanding of HTML (HTML coders are preferable)
# A good sense of design (Graphic designers are preferable)
# 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
# A working knowledge of bxp software
# 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. 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. 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:
http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails

Getting Started Guides:

<ul>
<li><a href="http://www.campaignmonitor.com/resources/will-it-work/guidelines/">Campaign Monitor</a></li>
<li><a href="http://kb.mailchimp.com/article/how-to-code-html-emails/">Mailchimp</a></li>
<li><a href="http://www.sitepoint.com/code-html-email-newsletters/">Sitepoint</a></li>
<li><a href="http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/">Reach Customers Online</a></li>
<li><a href="http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908">Tuts+</a></li>
</ul>

CSS Support & General Guides:

<ul>
<li><a href="http://www.campaignmonitor.com/css/">Campaign Monitor | CSS Support Guide</a></li>
<li><a href="http://htmlemailboilerplate.com/">HTML Email Boilerplate</a></li>
<li><a href="https://litmus.com/help/email-clients/">Litmus | Email Clients FAQ's</a></li>
<li><a href="http://www.campaignmonitor.com/resources/will-it-work/">Campaign Monitor | Will it work?</a></li>
<li><a href="http://mailchimp.com/resources/guides/email-marketing-field-guide/">Mailchimp | Email Marketing Field Guide</a></li>
</ul>

You should always inline your CSS in html-email. Here is a list of <a href="http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057">CSS Inlining Tools</a>

Responsive Guides:

<ul>
<li><a href="http://www.campaignmonitor.com/guides/mobile/">Campaign Monitor | Responsive Support Guide</a></li>
<li><a href="http://stylecampaign.com/blog/2012/10/responsive-email-support/">Style Campaign | Responsive Support Guide</a></li>
<li><a href="https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic">Litmus | Responsive How-To Infographic</a></li>
<li><a href="https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources">Litmus | Big List of Responsive & Mobile Resources</a></li>
</ul>

Here is <a href="http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density">a list of devices</a> by resolution and pixel density

Templates & Frameworks:

<ul>
<li><a href="http://tedgoas.github.io/Cerberus/">Ted Goas | Cerberus Responsive Email Patterns</a></li>
<li><a href="http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i">Email on Acid | Responsive Template</a></li>
<li><a href="http://briangraves.github.io/ResponsiveEmailPatterns/">Brian Graves | Responsive Email Patterns</a></li>
<li><a href="http://internations.github.io/antwort/">Antwort | Responsive Layouts</a></li>
<li><a href="http://zurb.com/ink/templates.php">Zurb | Ink Responsive Templates</a></li>
<li><a href="http://www.campaignmonitor.com/templates/all/">Campaign Monitor | Free Email Templates</a></li>
<li><a href="https://github.com/mailchimp/Email-Blueprints">Mailchimp | Email Blueprints</a></li>
</ul>

Responsive Alternate Examples:

<ul>
<li><a href="http://stackoverflow.com/questions/20483059/responsive-order-confirmation-emails-for-mobile-devices/20497625#20497625">Stack Overflow | Fluid Example</a></li>
<li><a href="https://litmus.com/blog/monsters-fluid-layout-stands-out-among-job-search-emails">Email on Acid | Monster's Fluid Layout</a></li>
<li><a href="http://stylecampaign.com/blog/2010/09/fluid-mobile-email-design-part-4/">Style Campaign | Fluid Mobile Email Design</a></li>
<li><a href="http://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook/17677304#17677304">Stack Overflow | Floating Content</a></li>
</ul>

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

Troubleshooting & General Guides:

<ul>
<li><a href="http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries">Email on Acid | Yahoo Media Query Bug Workaround</a></li>
<li><a href="http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122">Stack Overflow | Colspans and Rowspans in HTML Email</a></li>
<li><a href="http://templates.mailchimp.com/development/css/outlook-conditional-css">Mailchimp | Outlook Conditional CSS</a></li>
<li><a href="https://litmus.com/blog/update-banning-blue-links-on-ios-devices">Litmus | Banning Blue Hyperlinks</a></li>
<li><a href="http://stackoverflow.com/a/21485767/1435513">Stack Overflow | Webfonts in HTML Email</a></li>
</ul>

You'll need to use <a href="http://msdn.microsoft.com/en-us/library/hh846327%28v=vs.85%29.aspx">VML</a> to get background images working in Outlook (Except <a href="http://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook/13259519#13259519">in the body tag</a>). Here are some VML links:

<ul>
<li><a href="http://backgrounds.cm/">Campaign Monitor | Bulletproof Backgrounds</a></li>
<li><a href="http://buttons.cm/">Campaign Monitor | Bulletproof Buttons</a></li>
</ul>

</div>

== 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. 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.

== 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.

@@ Line 133: / Line 133: @@
-== 3. Work it into BE ==
+== 3. Work it into bxp ==
 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.
@@ Line 141: / Line 141: @@
-In BE every form has a unique Id number.  This number is used in the name of every field.
+In bxp every form has a unique Id number.  This number is used in the name of every field.
@@ Line 153: / Line 153: @@
-BE uses a -- notation to let it know to perform a replacement.
+bxp 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.
+Using the field mapping work out the field name need.  Into your HTML at the appropriate places put --strCDA_22_field_1_22-- bxp then knows when using this to perform the replacement.
@@ Line 189: / Line 189: @@
-Give us a shout on support@allnone.ie and let us help you.
+Give us a shout on support@bxpsoftware.com and let us help you.

← Older revision		Revision as of 18:38, 19 July 2015
Line 196:		Line 196:
	[[Category:Module Specific:Communications Centre]]		[[Category:Module Specific:Communications Centre]]
	[[Category:Topic:Communications]]		[[Category:Topic:Communications]]
		+	[[Category:Topic:Marketing]]

← Older revision		Revision as of 19:57, 9 November 2014
Line 190:		Line 190:

	Give us a shout on support@allnone.ie and let us help you.		Give us a shout on support@allnone.ie and let us help you.
		+
		+
		+
		+	[[Category:Module Specific:Form Management]]
		+	[[Category:Module Specific:Communications Centre]]
		+	[[Category:Topic:Communications]]

@@ Line 30: / Line 30: @@
 [http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails]
@@ Line 39: / Line 40: @@
 * [http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/]Reach Customers Online
 * [http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908]Tuts+
@@ Line 49: / Line 54: @@
 * [http://www.campaignmonitor.com/resources/will-it-work/]Campaign Monitor | Will it work?
 * [http://mailchimp.com/resources/guides/email-marketing-field-guide/]Mailchimp | Email Marketing Field Guide
 <p>You should always inline your CSS in html-email. Here is a list of [http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057]CSS Inlining Tools</a></p>
 <p>Responsive Guides:</p>
@@ Line 63: / Line 76: @@
 <p>Here is [http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density]a list of devices by resolution and pixel density</p>
 <p>Templates &amp; Frameworks:</p>
@@ Line 76: / Line 92: @@
-<p>Responsive Alternate Examples:</p>
@@ Line 84: / Line 101: @@
 * [http://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook/17677304#17677304]Stack Overflow | Floating Content
 <p>Troubleshooting &amp; General Guides:</p>
@@ Line 102: / Line 123: @@
 * [http://backgrounds.cm/]Campaign Monitor | Bulletproof Backgrounds
 * [http://buttons.cm/]Campaign Monitor | Bulletproof Buttons

← Older revision		Revision as of 15:53, 28 May 2014
Line 19:		Line 19:
	== 1. Make it pretty ==		== 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.	+	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'''''.

@@ Line 37: / Line 37: @@
 * [http://kb.mailchimp.com/article/how-to-code-html-emails/]Mailchimp
 * [http://www.sitepoint.com/code-html-email-newsletters/]Sitepoint
-* [http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/">]Reach Customers Online
+* [http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/]Reach Customers Online
-* [http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908">]Tuts+
+* [http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908]Tuts+

@@ Line 14: / Line 14: @@
 The project would follow the major following steps.
@@ Line 33: / Line 34: @@
 <p>Getting Started Guides: (from the stackoverflow link above)</p>
 * [http://www.campaignmonitor.com/resources/will-it-work/guidelines/]Campaign Monitor
 * [http://kb.mailchimp.com/article/how-to-code-html-emails/]Mailchimp
 * [http://www.sitepoint.com/code-html-email-newsletters/]Sitepoint
-* [http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/">Reach Customers Online
+* [http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/">]Reach Customers Online
-* [http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908">Tuts+
+* [http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908">]Tuts+
-</ul>
 <p>CSS Support &amp; General Guides:</p>
@@ Line 62: / Line 62: @@
-<p>Here is [http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density]a list of devices</a> by resolution and pixel density</p>
+<p>Here is [http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density]a list of devices by resolution and pixel density</p>
 <p>Templates &amp; Frameworks:</p>
@@ Line 108: / Line 108: @@
 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.
@@ Line 128: / Line 135: @@
 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.

@@ Line 27: / Line 27: @@
 Here are some of them:
-[[[http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails]]]
+[http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails]
@@ Line 33: / Line 34: @@
 <ul>
-* [[[http://www.campaignmonitor.com/resources/will-it-work/guidelines/]]]Campaign Monitor
+* [http://www.campaignmonitor.com/resources/will-it-work/guidelines/]Campaign Monitor
-* [[[http://kb.mailchimp.com/article/how-to-code-html-emails/]]]Mailchimp
+* [http://kb.mailchimp.com/article/how-to-code-html-emails/]Mailchimp
-* [[[http://www.sitepoint.com/code-html-email-newsletters/]]]Sitepoint
+* [http://www.sitepoint.com/code-html-email-newsletters/]Sitepoint
-* [[[http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/">Reach Customers Online
+* [http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/">Reach Customers Online
-* [[[http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908">Tuts+
+* [http://dev.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908">Tuts+
 </ul>
@@ Line 43: / Line 44: @@
-* [[[http://www.campaignmonitor.com/css/]]]Campaign Monitor | CSS Support Guide
+* [http://www.campaignmonitor.com/css/]Campaign Monitor | CSS Support Guide
-* [[[http://htmlemailboilerplate.com/]]]HTML Email Boilerplate
+* [http://htmlemailboilerplate.com/]HTML Email Boilerplate
-* [[[https://litmus.com/help/email-clients/]]]Litmus | Email Clients FAQ's
+* [https://litmus.com/help/email-clients/]Litmus | Email Clients FAQ's
-* [[[http://www.campaignmonitor.com/resources/will-it-work/]]]Campaign Monitor | Will it work?
+* [http://www.campaignmonitor.com/resources/will-it-work/]Campaign Monitor | Will it work?
-* [[[http://mailchimp.com/resources/guides/email-marketing-field-guide/]]]Mailchimp | Email Marketing Field Guide
+* [http://mailchimp.com/resources/guides/email-marketing-field-guide/]Mailchimp | Email Marketing Field Guide
-<p>You should always inline your CSS in html-email. Here is a list of [[[http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057]]]CSS Inlining Tools</a></p>
+<p>You should always inline your CSS in html-email. Here is a list of [http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057]CSS Inlining Tools</a></p>
 <p>Responsive Guides:</p>
-* [[[http://www.campaignmonitor.com/guides/mobile/]]]Campaign Monitor | Responsive Support Guide
+* [http://www.campaignmonitor.com/guides/mobile/]Campaign Monitor | Responsive Support Guide
-* [[[http://stylecampaign.com/blog/2012/10/responsive-email-support/]]]Style Campaign | Responsive Support Guide
+* [http://stylecampaign.com/blog/2012/10/responsive-email-support/]Style Campaign | Responsive Support Guide
-* [[[https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic]]]Litmus | Responsive How-To Infographic
+* [https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic]Litmus | Responsive How-To Infographic
-* [[[https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources]]]Litmus | Big List of Responsive &amp; Mobile Resources
+* [https://litmus.com/blog/our-favorite-responsive-and-mobile-email-resources]Litmus | Big List of Responsive &amp; Mobile Resources
-<p>Here is [[[http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density]]]a list of devices</a> by resolution and pixel density</p>
+<p>Here is [http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density]a list of devices</a> by resolution and pixel density</p>
 <p>Templates &amp; Frameworks:</p>
-* [[[http://tedgoas.github.io/Cerberus/]]]Ted Goas | Cerberus Responsive Email Patterns
+* [http://tedgoas.github.io/Cerberus/]Ted Goas | Cerberus Responsive Email Patterns
-* [[[http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i]]]Email on Acid | Responsive Template
+* [http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i]Email on Acid | Responsive Template
-* [[[http://briangraves.github.io/ResponsiveEmailPatterns/]]]Brian Graves | Responsive Email Patterns
+* [http://briangraves.github.io/ResponsiveEmailPatterns/]Brian Graves | Responsive Email Patterns
-* [[[http://internations.github.io/antwort/]]]Antwort | Responsive Layouts
+* [http://internations.github.io/antwort/]Antwort | Responsive Layouts
-* [[[http://zurb.com/ink/templates.php]]]Zurb | Ink Responsive Templates
+* [http://zurb.com/ink/templates.php]Zurb | Ink Responsive Templates
-* [[[http://www.campaignmonitor.com/templates/all/]]]Campaign Monitor | Free Email Templates
+* [http://www.campaignmonitor.com/templates/all/]Campaign Monitor | Free Email Templates
-* [[[https://github.com/mailchimp/Email-Blueprints]]]Mailchimp | Email Blueprints
+* [https://github.com/mailchimp/Email-Blueprints]Mailchimp | Email Blueprints
@@ Line 78: / Line 79: @@
-* [[[http://stackoverflow.com/questions/20483059/responsive-order-confirmation-emails-for-mobile-devices/20497625#20497625]]]Stack Overflow | Fluid Example
+* [http://stackoverflow.com/questions/20483059/responsive-order-confirmation-emails-for-mobile-devices/20497625#20497625]Stack Overflow | Fluid Example
-* [[[https://litmus.com/blog/monsters-fluid-layout-stands-out-among-job-search-emails]]]Email on Acid | Monster's Fluid Layout
+* [https://litmus.com/blog/monsters-fluid-layout-stands-out-among-job-search-emails]Email on Acid | Monster's Fluid Layout
-* [[[http://stylecampaign.com/blog/2010/09/fluid-mobile-email-design-part-4/]]]Style Campaign | Fluid Mobile Email Design
+* [http://stylecampaign.com/blog/2010/09/fluid-mobile-email-design-part-4/]Style Campaign | Fluid Mobile Email Design
-* [[[http://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook/17677304#17677304]]]Stack Overflow | Floating Content
+* [http://stackoverflow.com/questions/17674172/equivalent-to-float-in-outlook/17677304#17677304]Stack Overflow | Floating Content
@@ Line 89: / Line 90: @@
-* [[[http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries]]]Email on Acid | Yahoo Media Query Bug Workaround
+* [http://www.emailonacid.com/blog/details/C13/stop_yahoo_mail_from_rendering_your_media_queries]Email on Acid | Yahoo Media Query Bug Workaround
-* [[[http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122]]]Stack Overflow | Colspans and Rowspans in HTML Email
+* [http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122]Stack Overflow | Colspans and Rowspans in HTML Email
-* [[[http://templates.mailchimp.com/development/css/outlook-conditional-css]]]Mailchimp | Outlook Conditional CSS
+* [http://templates.mailchimp.com/development/css/outlook-conditional-css]Mailchimp | Outlook Conditional CSS
-* [[[https://litmus.com/blog/update-banning-blue-links-on-ios-devices]]]Litmus | Banning Blue Hyperlinks
+* [https://litmus.com/blog/update-banning-blue-links-on-ios-devices]Litmus | Banning Blue Hyperlinks
-* [[[http://stackoverflow.com/a/21485767/1435513]]]Stack Overflow | Webfonts in HTML Email
+* [http://stackoverflow.com/a/21485767/1435513]Stack Overflow | Webfonts in HTML Email
-<p>You'll need to use [[[http://msdn.microsoft.com/en-us/library/hh846327%28v=vs.85%29.aspx]]]VML</a> to get background images working in Outlook (Except [[[http://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook/13259519#13259519]]]in the body tag</a>). Here are some VML links:</p>
+<p>You'll need to use [http://msdn.microsoft.com/en-us/library/hh846327%28v=vs.85%29.aspx]VML to get background images working in Outlook (Except [http://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook/13259519#13259519]in the body tag). Here are some VML links:</p>
-* [[[http://backgrounds.cm/]]]Campaign Monitor | Bulletproof Backgrounds
+* [http://backgrounds.cm/]Campaign Monitor | Bulletproof Backgrounds
-* [[[http://buttons.cm/]]]Campaign Monitor | Bulletproof Buttons
+* [http://buttons.cm/]Campaign Monitor | Bulletproof Buttons