Email Development Tips and Tricks

Email marketing is still an extremely popular – and effective – tool for communicating with loyal customers as well as staying in contact with potential prospects. Actually, 80% of marketers claim email is best for customer acquisition. Even further, email marketing statistically has a $44 return on investment (ROI) for every $1 spent. That’s incredible!

But, what you may not know is the process to develop email marketing campaigns – especially custom email templates – can be difficult and tedious. And this isn’t the fault of a client, or really anyone directly for that matter, but more regarding the status of email delivery and the tools, or email clients, used to do so. For most of our clients, they don’t worry about how much of the behind-the-scenes “magic” occurs – as we manage that process for them from start to finish.

I personally always enjoy seeing the finished product because I know the value it brings to our clients. As a developer, the process can be tedious. Creating your own email template is something that most web developers will have to tackle at some point in their career, and it can seem like a rather daunting task. Why? Well, there is no standardization between the 30+ major email clients. Each email client will render your template differently. And, they all function differently as well.

Email template development is not for the faint at heart and takes some understanding from both the coding and user perspective. However, there are a few email development tips and tricks I’ve learned along the way that help.

Getting Started

Long story short, email clients are old-school and are still using coding standards from the late 90s (looking at you, Outlook). Because these email clients do not support important CSS selectors (such as position and display), or even some of the newer technologies in terms of animation and even video, most developers have to get “basic” and build templates using tables.

While using a table for anything other than tabular data is frowned-upon, it’s important to note that by using tables in an email template, developers are able to make their email layouts creative and consistent. This also helps bypass some of the pitfalls of unsupported CSS. Fortunately, many modern mobile mail clients also accept media queries. This provides some flexibility in your email template and allows it to be built responsively, ensuring you can build a consistent user experience on many different device sizes.

Let’s Talk About Images.

Images are an effective way to grab a subscriber’s attention and can help convey a campaign’s ideas and emotions. Therefore, they are a great tool to enhance your email template. Using the right image type in your layout is important to complement your email campaign goals.

The 3 most predominant image formats used for emails are JPG, GIF, and PNG. JPGs are best used for static photos and can be compressed down to a smaller image size. The caveat is this can distort the image and make it look grainy/blurry, especially if it is compressed again. GIFs are wonderful for simple graphics, small animations, and basic transparency. However, it is limited to 256 colors and transparent image outlines can look jagged. PNGs are great for full transparency and have the best quality, but this can lead to bloated image sizes and slow response speeds in the email browser.

Background images are also a great way to add flavor to your email template. You can set a background and place content over it, and even if the image is disabled the text is still readable. Background images are not terribly difficult to implement, but you do have to ensure you add the proper background HTML attribute. And because Outlook has to be difficult with background images, there is a workaround using VML called Bulletproof Backgrounds.

But What About Fonts?

With the popularity of Google Fonts, Adobe Typekit, and others, many websites utilize web fonts from these services. Therefore, it makes sense to want to use the same web fonts in your emails, right? Unfortunately, not all email clients are alike. While many email clients now support the use of these web fonts, there are still others that will not render them. That can definitely be problematic when you’re trying to make sure your email presence is consistent with your website!

If you do decide to use a web font, you’ll want to ensure you set a web safe fallback font for your subscribers that don’t have web font friendly email clients. Web safe fonts are the default fonts found on most devices and operating systems, and include Arial, Times New Roman, Courier, Verdana, Georgia, and a few others.

Testing is key.

The best way to ensure your email will render successfully is to test the heck out of it, on multiple email clients. The easiest way to do this is to use a service such as Litmus, which helps you identify broken links and images, and any weird glitches. Litmus is the industry standard and is definitely recommended if you need to test multiple emails on several different platforms. It’s a great tool, especially for clients that put heavy reliance in their email marketing efforts. Their pricing starts at $99/month.

If you’re looking for a free service, you can utilize PutsMail, a free testing service offered by Litmus. This allows you to send up to 10 emails for testing to an email address of your choice.

In Conclusion

Developing and customizing your own email templates can be invaluable in a successful email campaign, and knowing some basics can help your email look professional and polished in every email client. While it may seem frustrating, or at least the process in development can be, it’s worth the effort.