Browse by...

Blog Post

Embedding Images in Email

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 emailHere’s the recipe for creating HTML emails with embedded images:Take one HTML page, with your text content and CSSGrab an image you want to send embedded in your emailUse a Base64 encoder to turn your binary photo into a huge text stringReplace your normal image source with that stringSave your file and send as normalWhen 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 resultsThe 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 ClientResultNotesApple MailYesShowed perfectlyEntourage 2008NoAlt attribute and image outline onlyGmailNoAlt attribute and missing-image outline onlyWindows Live HotmailNoA grey block with no alt attributeOutlook 2003NoAlt attribute and missing-image outline onlyEntourage 2007NoAlt attribute and missing-image outline onlyThunderbird 2NoAlt attribute, no missing image outlineYahoo! MailNoAlt 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.

Blog Post

Speed up Template Development with TextMate

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.

Blog Post

Making Certain Fields Required in Your Signup Forms

New! We have a simpler method for adding validation to forms – view it here.One of the more common questions we get asked is if you can make certain fields be required when people sign up to your list through a Campaign Monitor form.We don’t have this functionality built in, mostly because you can create a much better experience for your visitors by taking care of that right there on your form page, rather than sending them off to a generic Campaign Monitor error page.Most of you Campaign Monitor customers are smart cookies who have your own approach to error messages and server side scripting, and are happy to cook something up yourselves. However, sometimes it is just easier if you have something to start you off.So here’s a basic javascript form validation script, which you can examine, copy, tweak or take as you like. It’s based on code from the excellent DOM Scripting book by Jeremy Keith, and should give you enough of an idea to work with.Adding validation to your formThe first step is to take your subscribe form, and add a CSS class to define which fields will be required. You could make as many as you like required, but remember that the less work people have to do, the more likely they are to sign up.<form action="" method="post" onsubmit="return validateForm(this);" class="list-form"><ul><li><label for="name">Name:</label> <input type="text" name="name" id="name" class="required" /></li><li><label for="l133578-133578">Email:</label> <input type="text" name="cm-133578-133578" id="email" class="email required" /></li><li><label for="cm-f-184432">Nickname:</label> <input type="text" name="cm-f-184432" id="Nickname" /></li><li class="sub-button"><input type="submit" value="Subscribe" /></li></ul></form>You can see I’ve added class=”required” to the text fields I want to make compulsory, and class=”email required”> in the case of the email address. I’ve also added an onsubmit parameter to the form tag, which will run our validation function when the submit button is clicked.Now we need to add some javascript into the head of the page with our form on it. Remember, you cannot change the form element names, because that will prevent the form working. You can change the ID of the elements though, if you need to refer to specific fields in your script.<script type="text/javascript">function validateForm(theform) { for (var i=0; i<theform.elements.length; i++) { var element = theform.elements[i]; if (element.className.indexOf("required") !=-1) { element.className = "required"; if (!isFilled(element)) {alert("Please enter your ";element.className += " error";element.focus();return false; } } if (element.className.indexOf("email") !=-1) { element.className = "required"; if (!isEmail(element)) {alert("Please check you have entered a valid email address");element.className += " error";element.focus();return false; } } } return true;}function isFilled(field) { if (field.value.length < 1) { return false; } else { return true; }}function isEmail(field) { if (field.value.indexOf("@") == -1 || field.value.indexOf(".") == -1) { return false; } else { return true; }} </script>Without getting too far into details about exactly how the script works, here’s the outline:The function validateForm runs when the submit button is pressedWe loop through all the elements, looking for the ones with a class of ‘required’ or ’email’When we find a required field, we check to see if it is empty, and if so, trigger an error and addan ‘error’ class to the fieldIf the field is an email field, we also run a simple check to see if it looks like a valid emailWe return ‘true’, if all is well, and the form is sent, or ‘false’ if not, and the submit is cancelledNote: I’ve only used alert messages here (and some CSS styling), which is not the ideal way to notify. You will probably want to write out an error message next to the problem field. I’m also just notifying about one error at a time, which is fine for very small forms, but annoying for anything longer. If you have bigger forms, you’d want to create an array of the errors, and write them all out at once instead. A final note is that the script only deals with text fields – if you have dropdowns for example you need to modify your testing slightly.That’s it! A very simple version of form validation to make sure people can’t leave key fields empty when signing up. Take it, and amend it to work for you or your clients.

Blog Post

Don’t Forget Your Unsubscribe Link

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.

Blog Post

Where Should Your Unsubscribe Link Go?

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

Blog Post

Campaign Monitor Twitter Updates

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

Blog Post

Why Should I Test My Campaign before I Send It?

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 ApplicationsThe 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 EmailMany 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.

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.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free