e-Resistible: A Guide to the Perfect Email Design, Part 3

e-Resistible: A Guide to the Perfect Email Design, Part 3

Published: September 23, 2013 by LoSasso
Categories: Creative services, Data, Website development

Click here to read part 1

Click here to read part 2

If you already have an established email design, it’s important to figure out how you can improve the design to increase click-through rates. There are key technical things to keep in mind when designing an email for optimal viewing—some of which have plagued email designers for years.

One thing to keep in mind is image blocking. Studies show that 67% of major desktop clients and 80% of mobile devices block images by default. Why? Image blocking is used to block spam emails—if images aren’t enabled by default, it will, hopefully, discourage spammers. Unfortunately, a number of legitimate parties send these emails as well. Luckily for us, there are some ways to work around image blocking.

1. Style your Alt text and put background colors into your tables. Make sure the text is bold and visible where the picture typically should show up, so the recipient knows what they should be looking at.

Playstation uses HTML to re-create a "Transformers"-themed eBlast

2. Code your main text and calls to action in HTML. This way, even without the image, the call to action is visible. Furthermore, HTML-code in emails helps with deliverability. Spam emails tend to be all images, so emails overloaded with images often end up in the junk folder.

3. Re-create an image with HTML tables. Although these may seem like extreme measures, the image will look so cool with images turned off, that the viewer is motivated to turn them on.

4. Convert images to HTML. There are apps that convert each pixel of an image into a corresponding HTML cell. Unfortunately, there are some limitations—this makes the email extremely code-heavy, causing load times to increase. There are other options, however, such as coding only the logo image or part of the header.

So what about size of the email? According to best practices, the best width is 500-600 pixels. This is because the email will be read on a variety of devices with varying screen sizes. The recommended width ensures the majority of consumers will be able to view the email in its entirety.

Heat maps are a helpful way to analyze click-through behavior

When reviewing your current email design, assess each section of your email template from top to bottom and ask yourself the questions that we’ve laid out in this three-part series. Also, analyze your click maps and consider using other helpful tools like heat maps—which point out the areas of your email where consumers are spending the most time.

Use programs like Litmus to find out which email clients your subscribers use and customize your email design with that in mind. You should also thoroughly test every change you make to your template. For example, your new design might look great in Outlook but terrible in Gmail. Regularly testing your email on mobile devices will give you a good idea of where improvements are needed.

This concludes our three-part series on email design. We hope you learned a thing or two and we encourage you to leave a comment if you have any additional tips for designing and tracking a rock-solid email campaign.

- Katie Stipanovich