Straight to your inbox
Get the best email and digital marketing content delivered.
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.Subscribe
Get quick and actionable how-tos to help you be a better marketer.
We have updated results for embedded image/data URI support in email – view our latest post. In a recent post we discussed our (poor) results from testing embedded images in email. A couple of people pointed out a different method we could use that may produce better results. So we’ve run through our tests again, this time with the image as a Base64 encoded attachment to the message. Here’s how it went. Embedding as an attachment Rather than having the image src be the encoded data, this time we define the email as a multipart/related file, and place the encoded image in a separate section of the email. Then in the body of the message, we refer to the image via its identifier which is specified for each attachment. Results for embedded attachment cid method This time around, we did see some better results. The image was rendered by default in the desktop clients at least, but still not in webmail clients. Apple Mail Yes-Image displays inline and as attachment Entourage 2008 Yes-Image displays inline and as attachment Gmail No-Image will not display Windows Live Hotmail No-Image will not display Outlook 2003 Yes-Image displays inline and as attachment Outlook 2007 Yes-Image displays inline and as attachment Thunderbird 2 Yes-Image displays inline and as attachment Yahoo! Mail No-Image will not display Although the images did show up ok in desktop clients, in webmail clients they did not at all, even after clicking ‘display images’ or equivalent. Additionally, in the desktop clients the images are shown inline, but also as attachments on the bottom of the email. If you have just one image, it might be ok, but with most newsletters you will have an email that ends with a messy jumble of individual image attachments. Imagine the Threadless newsletter for example. The increased initial download size, and hence slower speed, the failure to show for increasingly popular webmail clients and the hassle of attachments still seem to indicate that embedded images are not the way to go in most cases. Our recommendation is still to have the understanding that your images may not display, and design your emails accordingly. Please note that Campaign Monitor itself does not support embedding images in this way at all, we tested outside of our application. Thanks to everyone who commented and suggested this additional test, we appreciate the feedback.
We have updated results for embedded image/data URI support in email – view our latest post. With the well known growth in image blocking by email clients, some customers have been looking for alternatives to linking web based images into HTML emails. Some years ago, image embedding used to the standard way images were included in emails. It differs from linked images in that the image itself is actually encoded, and included inside the message. So once you have downloaded the email, you are not reliant on a web connection to view the images, because you have it all locally. It sounds perfect, except for a big increase in email size vs downloading just the HTML and then the images afterwards. We get asked fairly often why we don’t allow image embedding to work around image blocking. Our position (‘It is not worth it for the cost in filesize) has been based on testing done some years ago, before image blocking was so common. So we though it was time to update our test results. Testing embedded images in email Here’s the recipe for creating HTML emails with embedded images: Take one HTML page, with your text content and CSS Grab an image you want to send embedded in your email Use a Base64 encoder to turn your binary photo into a huge text string Replace your normal image source with that string Save your file and send as normal When you have added your encoded image, you end up with an HTML document which looks something like this: You will notice you have an enormous text file if you are encoding any kind of photograph. I took this file, and sent it out to a bunch of the major email clients, to see if they would render it. Embedded images test results The results were almost uniformly bad. Of all the email clients we tested, only Apple Mail showed the photo at all (and it shows linked images by default anyway). Email Client Result Notes Apple Mail Yes Showed perfectly Entourage 2008 No Alt attribute and image outline only Gmail No Alt attribute and missing-image outline only Windows Live Hotmail No A grey block with no alt attribute Outlook 2003 No Alt attribute and missing-image outline only Entourage 2007 No Alt attribute and missing-image outline only Thunderbird 2 No Alt attribute, no missing image outline Yahoo! Mail No Alt attribute and missing-image outline (Classic & New) So based on our results, it is clearly not worth using embedded images in your emails. All you will be doing is forcing people to download encoded images that they will not be able to view. Instead, the best course is to follow our normal design guidelines and design your emails knowing that some people will not see your images. That means making sure your copy stands alone, and that it is visible high enough for people to see if images are blocked. Don’t forget to link prominently to a web version too, especially if your images are particularly important. Update See our follow up post in which we tested with a different method of embedding, with somewhat better results.
Part of creating the 33 new HTML templates for Campaign Monitor and MailBuild was to also come up with an easy way to test these designs without having to leave the comfort of my development environment. Since most email clients render HTML email better with inline CSS, maintaining an organized yet easy to update template becomes next to impossible (especially when building 33 of them). It just so happens that TextMate has an incredibly useful plugin architecture called “bundles” that could deal with this problem rather easily. Here’s a quick demo with the details below. So what we did was create a bundle that does exactly that. Create your email like you would any other webpage with a linked stylesheet or inline style. Run one of the bundle commands and it automatically runs through adding all of the CSS styles inline keeping it easy for you to update. Even better, you can email an HTML multipart email directly from within TextMate! Testing has never been this easy. If all of this sounds too good to be true, hop on over to our TextMate bundle resource page. Be warned in advance though, this is definitely one of the most developer targeted resources we’ve ever thrown up. And of course, if you haven’t got access to lots of different email clients, our design and spam test tool can run it through more than 20 of the most popular clients with a single click.
Just a super quick tip today to make sure your beautiful designs aren’t let down at the last moment. We review all the campaigns that go out through Campaign Monitor, making sure that everything is ok and also trawling for gallery entries. Often I will see a fantastic design that has been well planned, constructed and laid out with delicious graphical touches. “A candidate for the gallery!”, I think to myself as I scroll through the rest of the email. Moments later I am disappointed to see that the email ends with our default unsubscribe link, hanging off the bottom like a dag on a sheep. Clipped to preserve the guilty, here are a couple of examples: It’s such a pity to bring down a well crafted design by letting Campaign Monitor automatically add some text at the bottom. It’s very easy to put an unsubscribe link exactly where you want it, and style it any way you like. Simply insert the tags ‘<unsubscribe>’ and ‘</unsubscribe>’ around the words you would like to become an unsubscribe link in the HTML source of your campaign. <unsubscribe> Unsubscribe from future emails</unsubscribe> It’s that simple. You can even have a “style=” attribute in the unsubscribe tag, and those inline styles will be applied to the eventual unsubscribe link. The default unsubscribe link is our ‘unsubscribe of last resort’ – we’d much prefer to see you all integrating it into your layouts in a sensible and appropriate fashion.
A while back we pointed to a Ruby gem for hooking into the Campaign Monitor API. It was created by Jordan Brock. On the Ruby Plus website we’ve spotted a new screencast which runs through how simple it is to use the Campaign Monitor gem to connect through your Rails application. As the author, Bala Paranj, points out, the existing Ruby gem does not include our recent API updates for creating and sending campaigns, but it is a great place to start. You can register for free at Ruby Plus and then download the screencast episode.
Have you ever seen an HTML page or email where everything looks fine, except instead of apostrophes there are odd question marks, or square blocks? You might also see other characters replaced similarly. Most commonly, this occurs when importing HTML that has been created by Microsoft Word. For generating HTML, Word uses a specific character set called “Windows Latin 1” that has special characters like ‘smart quotes’ and trademark symbols. When you view the email on your own machine, those characters will show up, but then when imported into Campaign Monitor they might disappear or be converted into incorrect characters. Character encoding makes the difference The reason is that Campaign Monitor sends in UTF-8 encoding (which covers a wide number of languages), and the special characters are not in the same location in UTF-8 as they are in Windows Latin 1. So what to do about it? Well the first (and most thorough) option is to just not use MS Word to generate HTML. Word tends not only to cause character problems, but also adds vast amounts of unnecessary HTML to even simple pages. If you view the source you will see rampaging hordes of span tags and CSS with oddly named classes everywhere. It can also tend to break tags that Campaign Monitor uses like <unsubscribe></unsubscribe> by inserting other tags inside them. There are much better options for simple HTML creation out there, even at little or no cost — look at tools like NVU, Coffee Cup (free and paid) and First Page. Of course, you can go right up to tools like Dreamweaver if you have the need. Another alternative is to do some ‘find and replace’ work in notepad or similar to remove Word’s smart characters and replace them with the correct unicode characters. Some common ones to look out for are: For “ Left double quotes: Use “ For ” Left double quotes: Use ” For ’ Apostrophe: Use ’ That way you can have the typographically correct characters show up in your email. Character encoding can be a tricky area, and you have to keep an eye on it in your HTML, in your subscribe form pages and in the subscriber lists your import. Always keep in mind that Campaign Monitor will send in UTF-8 no matter what, so you want to import everything in UTF-8 to begin with, so no conversion occurs. For more information on HTML and character encoding, read The Definitive Guide to Web Character Encoding at SitePoint.
Having reviewed many, many thousands of email campaigns sent through Campaign Monitor and MailBuild, we’ve noticed that a lot of designers like to try and hide the unsubscribe link away, to make it like a little game of ‘find the link’ for their subscribers. We’ve always encouraged people to do the opposite, make it easier for people who don’t want your emails to unsubscribe than it is to hit the ‘spam’ button and cause you trouble. The always helpful Mark Brownlow agrees with us in his post “Time to move the unsubscribe link? recently. If it’s there in the preview pane, then more people are likely to use it instead of reporting you as spam. Less spam reports means a better sender reputation and less chance of ending up on a blacklist The best way to find out of course is to measure it – does having the link at the top actually lead to a significant increase in unsubscribes? A reduction in spam complaints? If more people do unsubscribe, does that leave you with a more responsive and passionate subscriber base? We’ve posted before about working with your subject lines, and you can also experiment with positioning your ‘key action’ links, use of images in your newsletter and the ‘introductory’ text above your headers. There’s no end to the possible layouts, all it needs is some creativity and a willingness to make small changes. We’d love to hear about any changes you have found useful, so leave us a comment.
Just like last year, the biggest story out of SXSW Interactive seems to be Twitter. Some of the Freshview team are Twitter users already, but now we’re also trialling a Campaign Monitor Twitter stream. The Twitter newsletter is actually sent using Campaign Monitor – so we are closing the circle! The plan is to tweet about tips for using Campaign Monitor, updates, application status and other things of interest to web designers. We might even let slip a few hints about upcoming features. Following the Twitter user CampaignMonitor will also let you respond to our posts there and participate in some snap polls we’re planning. If you are looking for a good Twitter client, we can recommend Twitterific and Snitter. twitter.com/CampaignMonitor
Since there are a wide variety of tools people use to read their email, it’s a good idea to test your campaign in several different environments before you send it. The two main types of applications people use to read their email include desktop applications, such as Microsoft Outlook Express, and web based email such as Hotmail and Yahoo!. Each of these environments render HTML emails differently and should be tested for every campaign you send. Desktop Email Applications The most common desktop email applications include Microsoft Outlook, Outlook Express and Thunderbird for the PC. On the Mac, you should be testing with Mac Mail and, depending on your target audience, Eudora. To make testing more complicated, they all come in various versions across multiple platforms. The most common problem caused by desktop applications involves the images in an email not being displayed, so it’s a good idea to check your campaign in at least a few of these applications. Web Based Email Many users also have email accounts through services such as Hotmail, Yahoo and Gmail. Using Hotmail as an example, when you view an email it is surrounded by various parts of the Hotmail interface, such as the navigation and banner ads. Some web based email accounts will even modify your email by removing any stylesheet elements you have included, so it’s a good idea to check that your email will still be displayed appropriately despite these issues. Here’s a great article to check out on designing your emails for these different email environments. The quickest way to test your campaign through Campaign Monitor is by using the Test Campaign Design tool, pictured above. This feature allows you to quickly send a preview of your campaign to any email address. If you want to send your test email to a number of addresses simultaneously, just separate them by a comma. This feature also comes in handy for sending iterations of a design to a client for approval.
Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.Subscribe
With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.Try it for free