Best Practices for Building an Email

November 23, 2017

Building an effective email can be challenging at times and while web development continues to advance, email is still living on older technologies. This guide will outline some of the industry's best practices you should consider when building your email template.

Cascading Style Sheets (CSS)

CSS is a style sheet language and is commonly used to style markup languages, like HTML. While HTML will provide the structure of your email, CSS will provide the colours and design. In order for CSS rules to be applied in an email, you will have to inline the CSS directly into the HTML elements. The Dyspatch editor will automatically inline your CSS for you, so you don't need to worry about this!

It's important to note that not all CSS rules will work with every email client. To view a list of supported CSS rules for a particular email client, visit The Ultimate Guide to CSS.

Images

Adding images to an email can emphasize the message you want to deliver to your customers and can impact their impression on your company's brand. Images are generally hosted on a server, like Amazon S3, and referenced in the HTML of the email using an absolute image source URL.

<img src='https://d1pgqke3goo8l6.cloudfront.net/f8DaygTSNqjlrpQMg6aL_158019.jpg' alt='Autumn Picnic.jpg'/>

It's important to note that most email clients will not display images by default. For this reason, you should always include a descriptive alternative (alt) text.

The typical file image formats you should stick too are JPEG, PNG, GIF. You can also use BMP and SVG, but client support for these formats are not covered as well as the aforementioned three.

Try testing with images disabled to preview the design and structure of the email before loading the images.

Fonts

Adding different styles of fonts to your emails can add an additional element to the overall design of your emails. What's important to consider is not all email clients support all fonts and it's possible the recipient doesn't have the font loaded on their computer.

What you'll want to do is make sure your email uses a web safe font as a fallback. These fonts include Arial, Calibri, Georgia, Impact, Tahoma, and Times New Roman. Having a web safe font maintains the integrity of your design and eliminates the worry of not knowing what will appear in front of your customer.

For more information on webfonts, visit Litmus's Ultimate Guide to Webfont

Videos

We do not recommend adding an embedded video in your email. Most email clients do not support video playback and typically the recipient's mail server will flag your email as malicious content.

If you'd like to include a video in your email, the recommended method would be to capture a screenshot of the video with a "Play Icon" and add a clickable image that links to the external video.

Forms

By now, you'll start noticing a trend with the lack of email client support for most modern HTML browser capabilities. Adding forms to an email is no different as most email clients do not support these. If you want to include a form, the best way would be to create a link that sends your customer to a form hosted on your end to obtain the desired results.

Buttons

When building an email template, it's crucial to display the call-to-action (CTA) where customers will actually interact with it. In the past, this was commonly done through images and with the majority of email clients not showing images by default, this can heavily decrease your click rate.

Building buttons using HTML and CSS will display the CTA even with disabled images. Adjusting the button to match the design of the email is easier because instead of spending time building a new button as an image, all you would need to do is edit a couple lines of code.

If you want to create some bulletproof email buttons, we recommend checking out Buttons.cm and seeing what kind of button you can build.

Preheader

In the simplest form, the preheader is the text that appears after the subject line in an email.

Preheader Examples

Preheaders are often overlooked, but this is a mistake! The preheader is what your customers will see (along with the subject line) and is prime real estate to engage with your customers. Leaving your preheader empty often results in displaying “View in Browser” links or navigation headers from your email content.

Email clients can have certain character limits when showing the preheader. Depending on the email client or mobile device, this can range from 35-140 characters. We recommend limiting the number of characters used to around 60.

Drag and Drop Editor

Creating the perfect emails can be difficult and if you're not familiar with HTML or CSS, this can be a daunting task. Using a Drag and Drop editor will make building templates easier and there are plenty to pick from. Here are a couple options to select from: Beefree, Mosaico.

Further Reading

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support