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):
Code Layout: Compression: High Options: Compress colors: No Compress font-weight: No Lowercase selectors: No Case properties: Lowercase Remove unnecessary backslashes: Yes Remove last ; : Yes
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:
- Coda 2
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.
If you’re coding in an editor, try:
While you might not need all the tricks that each template has pre-loaded, it’s a good starting point and you can always delete what you don’t need.
Don’t forget that you can create your own responsive email templates using the Canvas template builder in Campaign Monitor. While it’s super-easy to use these templates in your account directly, it’s also possible to export ready-to-use templates, for use on practically any platform.
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.