Recently, in the How to Code Background Colors in HTML Email Newsletters tutorial, we saw the importance of choosing suitable colors that don’t overpower the content of your newsletters. There are many ways to set the colors, some of which may require you to get at your newsletter’s underlying HTML markup. As was pointed out by a reader, “not all rich-text capable e-mail agents fully support HTML so that, in particular, the designer cannot depend upon the availability of support for CSS. And, of course, some e-mail agents eschew support for HTML altogether in part because it is a security exposure.” For both these reasons, it behooves you to select the right tool(s) for composing and sending your newsletters. I’ll show you a few good choices that will further your efforts.
Working with MS Outlook
According to Microsoft by the Numbers, Outlook.com has over 400 million active users and over 1.2 billion people use MS Office. That’s about one seventh of the world’s population! With that many users, chances are that many of you are among them.
While there is no denying that MS Outlook is a feature-rich email client, it can be frustrating for more sophisticated users. Not that I’m saying that writing an HTML newsletter automatically makes someone an expert in all things email, but, where Outlook is concerned, you will have to get a bit creative to work with the source code.
You see, since Outlook 2007, Outlook only supports Microsoft Word as the HTML message editor. I remember that previous versions of Outlook used Internet Explorer as the HTML engine. It made it easy to show and edit the source code. Unfortunately, that is no longer the case.
If you’ve ever worked with HTML documents in MS Word, you’ll know that it generates a lot of superfluous code. In fact, I had co-worker whose sole job was to clean up HTML documents that were polluted by Word code! Therefore, you would be wise to create your newsletters in a separate editor and then use Outlook for sending them.
Part of an HTML Document in MS Word
<body lang=EN-CA link="#0563C1" vlink="#954F72" style='tab-interval:36.0pt'>
<div class=WordSection1>
<p class=MsoNormal style='mso-layout-grid-align:none;text-autospace:none'><span
style='mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:
Calibri;color:black'><o:p> </o:p></span></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><span lang=FR-CA style='mso-ansi-language:FR-CA'>This is my newsletter!<o:p></o:p></span></p>
<p class=MsoNormal><span lang=FR-CA style='mso-ansi-language:FR-CA'><o:p> </o:p></span></p>
<p class=MsoNormal><a name="_MailAutoSig"><span lang=FR-CA style='mso-fareast-font-family:
"Times New Roman";mso-fareast-theme-font:minor-fareast;mso-bidi-font-family:
Calibri;mso-bidi-theme-font:minor-latin;color:black;mso-ansi-language:FR-CA;
mso-fareast-language:EN-CA;mso-no-proof:yes'>Robert Gravelle<o:p></o:p></span></a></p>Sending HTML Documents to Outlook
Once you’ve created your newsletter in the HTML editor of your choice, you have to insert the code into an Outlook email. There is no way to paste HTML markup into an email even if it’s in HTML format; instead, you have to use a program that can send emails via Outlook. Outlook and Background Images
While you’re designing your newsletter, bear in mind that Outlook does not support background images. Therefore, you’ll have to expend a bit of effort to approximate the effect.
For instance, you can layer an image one on top of another in MS Word by selecting a text wrapping style other than “In Line with Text.” Click on the image to get the contextual Picture Tools | Format tab. Then look toward the right of the Ribbon, in the Arrange group, click on Text Wrapping and choose “Square” or “In Front of Text.” You should then be able to drag your graphic wherever you want it, and when you right-click, the shortcut menu should give you the ability to change the layering order using Bring to Front, Bring Forward, Send to Back, Send Backward, etc. Once you’ve got your email looking just right, you can simply cut and paste the entire document into a new Outlook email. Since Outlook uses Word as the rendering engine, the contents will make the journey from one program to the other without the slightest alteration. Making changes in Word will obviously alter the email source to the hideous Word format alluded to above, but if you’re using Outlook, it will change the markup no matter what editor authored the original file.
Notepad++
Another program that can work well with Outlook is Notepad++. It features a “Send via Outlook” command:
Just be prepared for possible format alterations as Outlook converts your pristine HTML into its own style.
Using Specialized Email Newsletter Software and Sites
Once you’ve authored your newsletters so that they will display fairly consistently across various browsers and mail clients, you may want to take care to send them using an application that doesn’t butcher the source code. Here are a few choices, some of which offer free packages:
- AWeber: They have everything you need to make your emails look great, including hundreds of free templates and stock photos. Pricing: From $19/month for unlimited emails to up to 500 contacts.
- Benchmark: Send email campaigns to up to 2,000 of your subscribers for $0 per month. There are also plans from $9.95/month for sending up to 600 emails.
- FreshMail: FreshMail templates help make your emails look extremely professional, complete with full-sized images, beautiful Google Fonts-powered text, and detailed layouts that go far beyond your standard email. Pricing: Free for sending up to 2,000 emails to 500 contacts; from $17/month for unlimited emails to 1,000 contacts.
- GetResponse: Their email designer lets you preview how your message will look on computers and phones while you’re laying out your design and adding in your text. You can also import images from Flickr, Facebook, and iStock. Pricing: From $15/month for unlimited emails to 1,000 contacts.
- SendinBlue: SendinBlue is an app that’s designed to integrate with your site. It does so via WordPress, PrestaShop, and Magento plugins, as well as an API that you can use to integrate it on your own. You can design your own email templates or import an HTML page to send as an email. Pricing: Free for sending up to 9,000 emails per month; from $7.37/month for sending up to 40,000 emails.
Conclusion
Due to the sheer number of email clients and devices, HTML email newsletters face many of the same challenges as Web pages. While a visually appealing newsletter may be designed in just about any email editor, getting it to look consistently good on the receiver’s end is not so simple. In future articles we’ll explore some concrete techniques for writing your HTML newsletters.
