A wild west of tables, spacer GIFs and font tags

I used to have nightmares about HTML emails. You had to get into the IE5, y2k frame of mind, banish most semantic best practices and aims for elegant script. However, there are tools to make the task significantly easier.

The first stop has to be the Campaign Monitor Blog, a superb resource for the latest news in all things email. A particularly useful resource is their CSS support guide which outlines what you can and (crucially) cannot expect popular email clients to support. The view is dismal, there’s not even support for CSS background images in Outlook 2007 and 2010.

Building

Get yourself a good template from which to build your email. Check out the HTML Email Boilerplate for a nicely commented example. Don’t be afraid to nest tables. It’s often the only control you have over spacing and alignment.

Remember to build a separate text-based version of each email template, this can be a text file with URLs in the place of link text and some basic text spacing. Also remember to clearly mark content place-holders, for example, instead of putting in a dummy name, I prefer to use %%FIRST-NAME%% which is easier to spot in tests. Sending emails containing dummy content is hugely embarrassing!

Testing

You can’t rely on regular browser testing; even online email clients behave in different ways in each browser. The best start is to validate your HTML to iron out any incorrect table nesting, missing tags and absent alt attributes. This can avoid silly mistakes from turning into hour-long head-scratchers. The next tip isn’t free, but is completely worthwhile; unless you have the full suite of email clients available (Outlook 2003, 2007, 2010, Apple Mail, Android Gmail, etc) I’d stump up a month’s subscription to Litmus.

Sending

OK, you’ve built and tested a glorious email template that’s all ready to be sent. Unless you are really geared up for it, I’d recommend a third party service for sending your emails. Mailchimp offers a reasonably priced package along with spam filter testing and best practice guides. Also remember that response can vary depending on your subject line and the time you send your email. No-one notices an email added to their unread stack on Monday morning or when they’re leaving the office on a Friday afternoon.

http://www.txt2re.com/

Analysing your current site

The Webpage Analyser and Yslow for Firefox are inevitable starting points. Expect a low grade from YSlow, which by default will score heavily designed sites and those without CDNs poorly. You can tweak the configuration to suit the constraints of a given project. For instance, if your client hasn’t access to a Content Delivery Network, set YSlow to ignore that rule. Google Page Speed is another good add-on for Firefox, and Speed Tracer is a similar tool with a nice interface, available as an extension for Chrome.

While a greater number of users are on broadband, many will have only 1 or 2 megabit connections, far slower than the 10MB you may have at the office. This is why it’s always worth emulating different connection speeds, to see exactly what your users are experiencing. Firefox Throttle is a very handy extension which allows you to throttle your connection speed, even for locally hosted sites.

Once you’ve got some idea of the page load speed, you’ll need some suggestions for how to improve that YSlow score. Yahoo maintains a comprehensive set of rules, which is well worth a read.

I’m not going to argue the case for this structure, since there are as many ways to write CSS as there are Web developers, each fiercely defended by its respective author. We find the above layout highly readable during development and I’m sure we’re not the only ones.

PSPad to the rescue

While PSPad doesn’t offer some of the complex functionality in Eclipse and other Web development IDEs, it is fast, stable and minimalist – and freeware. There are plugins for HTML tag completion, a built-in FTP client, clever multi-language highlighting – and best of all – definable language auto-completion.

The difficulty in automating the above CSS layout is that properties require a different number of tabs depending on their length (‘color’ requires five tabs before its value, ‘position’ four tabs, ‘text-decoration’ one tab). PSPad lets you define these once and automates it from there on with Ctrl + Space.

Try it out: auto-tab your CSS values

If you’d like to try it out, download PSPad then grab my PSPad CSS definition file, unzip and copy into ‘C:\Program Files\PSPad editor\Context’ (created for version 4.5.4)

Dynatrace currently only supports Internet Explorer, but it has a lot going for it. Check out the introductory video on their site, or download and dive in.

Image optimisation

Of all the optimisation tools I’ve tried, Smush.it is the fastest and most effective. Yahoo! have been led the way with their excellent Exceptional Performance series, and Smush.it is a really nice addition to the YSlow toolbox.

You may be surprised at how much smush.it can shave off your page weight, and any saving this easy to make has to be worth doing. If you don’t already have it installed, download YSlow, select Tools, then click the ‘All Smush.it’ link.

Shrink JPG, PNG and GIF images (the original image size must be below one megabyte) without losing any loss of visual quality – the tool is completely lossless. There’s even a Smush.it WordPress plugin.

Smush.it locally hosted files

One caveat I’ll make to its ease-of-use is that Smush.it is (unsurprisingly) unable to work its magic on locally hosted sites, which may be a problem for developers who develop on a local webserver before publishing to a remove site.

A simple method to sidestep this (without having to upload each image separately to the Smush.it site) is the following (using FileZilla):

1. Upload your images into a temporary directory on your web server
2. Drag to select all files and choose ‘Copy URL(s) to clipboard’
3. Create a blank HTML file within your temporary directory and paste the URLs into its body
4. Bulk replace the filepaths with ‘<img src=”‘ and append ‘ />’ to each line
5. Visit your newly created HTML page in Firefox and use the YSlow Smush.it tool to optimise all images
6. Download your optimised files as a zip and drag to replace your unoptimised files