Speed up your email campaigns with 6 essential code & workflow tips

When designing and coding email newsletters from scratch, a good part of the battle is finding ways to reduce your email payload and thus reduce email load times. Writing less and cleaner HTML & CSS code in the process is an upside to this, too.

To help us find out ways to meet both these goals, we asked pro email marketer Becs Rivett to share her tips for speeding up your emails – and the workflow that goes into coding them. Becs has worked for several large eCommerce retailers and agencies and like a the trooper she is, confesses to “eat, sleep, and dream about every aspect of email marketing”.

Alongside our tips, we’ll list some of the tools that can help you along the way, as well as the custom settings you can use to produce your best email campaigns yet.

Send faster emails

First of all, I’d like to start with some of the techniques that you need to embrace in order to create and send email campaigns that load speedily in the inbox. Small payloads and fast load times are especially important on cellular data connections, which are quite frequently spotty and on some carriers, are charged by the megabyte. Here’s a few tips to get your newsletter loading in a snap.

Shrink down image sizes

It’s very easy for image file sizes to spiral out of control. In the age of HDPI and Retina screens, we are having to make the images much bigger, pushing file sizes up considerably.

For high-speed internet connections this is usually acceptable and you won’t notice any difference, but when your internet is slow, your pictures are going to load really slowly. Some email recipients may even ignore the email completely, if they can’t see what the email is about in a reasonable amount of time.

Selecting the right file type is really important to ensuring that images remain high-quality, even when you’re keeping file sizes to a minimum. To help you decide which file type is right for your image, check out this Litmus post (hint = JPEG and PNG are great in most instances).

The second step is to squeeze the file size down with image shrinking tools, without compromising the quality of the images.

For JPEGs, JPEGmini offers both a web-based and desktop app which allow you to compress 20 images/day for free. Purchasing a license will allow you to go beyond this and is very affordable.

For PNGs, I find TinyPNG very useful – especially as it supports image transparency. It has both an online compression tool and a plugin for Photoshop.

If you’re using GIFs, the are online tools which will shrink the file, but at the expense of the number of colors used. Reducing GIF file sizes can be more successfully achieved when exporting files from an image editor such as Adobe Fireworks, which provides a variety of export options.

Use fewer images

This might sound a little obvious, but what many people don’t think about is that each individual image in an email campaign requires a separate request to the server where the image is hosted. These requests can add to load times – and be easily reduced by using images only where necessary (eg. not for heading text).

Minify your HTML file

Minifiying code is a common practice when working for the web, so why aren’t we doing the same for our email files?

This strategy is particularly useful if you have long, complex emails with lots of nesting – every indent, every line break, in fact every bit of code increases your document’s file size. Gmail and Yahoo clip emails over 100kb (not including image file sizes) so keeping your files lean is useful.

Once you’ve got your final version of your email ready, create a minified copy. If you do need to make any changes, do so in the original file, minify and overwrite the old minified copy on your server, or on your email service of choice.

To minify both whole HTML documents or just snippets of code, I recommend the HTML Minifier.

Send faster emails… Faster!

Perhaps just as important as the time it takes for your subscribers to open their email is how long it takes for you to code them. After all, it’s Friday afternoon here and at times like this, it’s that one email job that comes between a hard-working email coder and a friendly drink with colleagues.

So, let’s get moving.

Sort and tidy your HTML & CSS

This may seem a little pedantic, but there is nothing nicer than an email developer handing over beautiful code – that is, HTML and CSS that is indented properly and uses styles and attributes in a clear and concise manner.

The ultimate aim of sorting and tidying code is to create consistency. It helps others troubleshoot code and apply changes. It’s so important to make it easy for someone else to read your code if you regularly have to collaborate with others, but it also makes it much easier to read and comprehend, should you need to return to it at a later date.

The HTML Tidy project set out to help us all with HTML formatting; you put your file in and it spits it out, tidied and sorted. The project seems to have gone quiet over the past few years, but it remains incredibly useful, nonetheless.

I like to sort my HTML attributes for the consistency I mentioned earlier, however I’ve been unable to find an online tool that allows you to do this. If you’re not bothered about that, then try HTML Tidy, but try changing the following settings from the default for a nicer layout:

Under "Pretty printing"
Indent: Yes
Wrap: 200

HTML tidy will only format your HTML file, so to format your CSS code, you might want to try CleanCSS. I have noticed that it breaks any media queries (ie. it removes colons and brackets) so best to process everything within the media query separately, rather than the whole stylesheet at once. We would recommend the following settings for HTML email (listed as they differ from the defaults):

Use shortcuts in your editor

How many times I have started to type out <table width=”100%” cellpadding=”0″ cellspacing=”0″… when it’s already in the document. Then, there’s the basics – like meta tags – which I’ve had to ultimately copy and paste from elsewhere. It’s simply much easier to take your most used code sections and create keyboard shortcuts or snippets from them – and it usually results in much less human-error in the long run, too.

Thankfully, there’s a few tutorials out there about how to set up email-specific shortcuts in your code editor of choice:

If you’re a Campaign Monitor customer, there’s the Coda 2 Clip for Campaign Monitor Email Templates. Check it out if you code templates for use in the email editor.

Use templates and frameworks

When you’re creating emails from scratch, it’s good to start them from a solid foundation, featuring some of the defaults that you use every time. Using templates and frameworks, you can get up and running quickly, without having to know all the email client-specific workarounds off by heart.

Well, there you have it! For further reading, I recommend you compare these suggestions to those presented by Stig and Nicole in 6 steps to coding bulletproof email templates. So, what shortcuts do you have for reducing your email newsletter file sizes? Or, what shortcuts do you recommend for speeding up your email coding workflow? Let us know in the comments below.

Isn’t minifying the file a bad idea since it would violate RFC2822 regarding point 2.1.1. “Line Length Limits”, which states that:

“Each line of characters MUST be no more than 998 characters […]”

and

“[…] SHOULD be no more than 78 characters […]”.

I’m not sure how your software handles minified files or any other sending software of our costumers would.

Jimmy

I completely disagree with minifying the html, terrible idea!!!

Rest of the article is really useful though, good read :)

Ben Carver

I personally don’t minify… whatever I gain in kb’s I lose in the ability to quickly make edits and changes.

Elliot Ross

re: minifying – there’s a weird bug that happens in Outlook (I know, unexpected right?) where if you have more than around 500 characters without a line break in the code, maybe 512 would make sense, it inserts a character.

That character could be in your copy, or in a bit of html, but either way, it’s going to be a pain in the arse.

Ros Hodgekiss

Thanks folks – on the minifying, this excellent article was posted today, which discusses the issues that come about when tabs and spaces are removed. Recommended reading – and lots to learn here for me!

Jon Sakas

I think its worth mentioning that minifying and tidying (aka formatting) are the opposite of each other when it comes to HTML and CSS. You can’t have both.

HTML formatting is built into Dreamweaver, and there are a number of plugins for Sublime. HTML Tidy seems a bit dated to me, it still has options to uppercase tags and attributes.

Steven Sayo

In regards to the minify HTML, I have previously used that specific one and it destroyed the functionality of the email design when uploaded to the mailing server.