Email is one of the most powerful and creative marketing tools for any business today. With the variety of email clients running on different rendering engines and an endless number of updates rolling out every day, building a perfect email can become a challenge. The lack of standard rules for HTML emails across email clients narrows down a designer’s choice of techniques and makes it even more essential to have an email expert managing your communications. 

At Goose Digital, we stay on top of the latest platform modifications and new techniques to build responsive and flexible email templates for our clients. We’ve highlighted a few tips to share with you!

1. Take Advantage of Outlook Conditional Code

If you have ever built an HTML email, you know the pain of making it render properly on Outlook. So why exactly does Outlook cause so many display issues?

Outlook 2000-2003 uses Internet Explorer (IE) as a rendering engine and the version of IE will vary based on what is installed on a specific device. Outlook 2007 and later versions use a corresponding Microsoft Word version to render HTML emails and this often leads to gaps in email representation compared with other email clients like Apple Mail or Gmail.

To workaround some of these issues and target all or a particular Outlook version we recommend using the conditional comments found through this link, where Microsoft Office and the number associated within the conditional tag indicates the targeted Outlook version.

Outlook Conditional Code

2. Create a Perfect CTA Button

The most important thing for promotional emails is a strong Call to Action (CTA), which drives recipients to do a desired marketing asset. The CTA is usually set as a button which should stand out in your email. Sometimes marketers try to make these buttons look artistic and different, but don’t forget the more complicated these buttons are made with CSS coding, the more likely they are to display incorrectly in email clients such as Outlook.

Perfect CTA Button

A great work around is to make these buttons with images, and not code. Although some email clients do not allow images to be displayed by default, the value of setting a standout CTA is much more important.

Image buttons also have some problems in the often troublesome dark mode. Image colour doesn’t get changed by most email clients (although some email clients reverse the image color), so if you do choose black or gray colors as it best reflects your branding or message, the button won’t stand out in dark mode.

In such cases, we recommend making custom button codings with the Bulletproof Email Buttons tool. This web service offers solid button codes which are displayed properly even on Outlook.

Don’t underestimate the impact of your CTA design! Even the slightest difference in the button design can significantly impact your click through rate and the success of your email message.

3. Polish up your email with a Background Image

Thanks to the progress of CSS3, the flexibility and creativity of web design has been significantly improved and simplified; we now often see web pages with beautiful full screen background images which are relatively easy to code. Unfortunately, it is not the case for building emails.

Layouts with a background image in the body part should be avoided for email, because it is impossible to set background images properly across all email clients – especially Gmail and Outlook including iPhone Outlook apps.

Another option, if you are willing to accept display errors on some email clients, is to use the Bulletproof background images tool. While most email clients accept the codes from this web service, Outlook will ignore the margins and paddings. Be careful to use transparent PNG images in the background, as black background color will show up in dark mode.

Polish up Background Image

This layout should be used only for B to C emails, not B to B as Outlook on desktop is still commonly used for many businesses worldwide.

4. Add Videos to Your Emails

Embedding video in email campaigns has become increasingly popular and no surprise since 87% of video marketers say video has increased traffic to their website. Video is a tremendous method to communicate your message to the end user. According to Campaign Monitor it also has a great impact on email KPIs:

  • Increases open rates by 19%.
  • Increases click-through rates 65%
  • Reduces opt-outs by 26%

In spite of all these undeniable facts, more than half of email clients still do not allow video to play right inside the email. Clients like Outlook, Gmail and Yahoo! Mail simply don’t meet the technical requirements and will display a fallback visual. But there are alternatives you can use to share your videos:

  • Utilize animated GIFs as they create a better level of interaction than a regular image while being an excellent replacement for a video. Another bonus is that GIFs are well-supported by most email clients. Keep in mind that Outlook 2007, 2010 and 2013 will display only the first frame of the animation. Another option is to add an animated play button to a still frame.
  • Implement a static image with a play button and include a link to a page that contains the video

 All of these options will allow you to benefit from the power of video in attracting your recipients’ attention.

video-in-email1     video-in-email2    

5. Use the Right Image Formats

As web technology has improved, new image formats such as SVG and WebP have emerged. However, SVG is mainly used for company logos or flat icon materials and both this image format and WebP are supported in only 48% of email clients. For this reason, JPEG, PNG and GIF formats should be used for email. 

PNG is a great option when working with dark mode. PNG icon data with transparency won’t be affected by background color changes and can be jazzed up with background color and transparency as below.

image-formats

Now that you have all these great tips, what’s next?

As you can see, building a great email requires a lot of consideration, including who your target audience is, what devices and email platforms they are using to view your emails, and how to handle the tricky dark mode. The best thing to ensure your emails display the way you want them to is test. At Goose, we use email pre-deployment tools such as Litmus and Email On Acid to make sure all the emails we send will render properly across all platforms.

If you are looking for help to make your emails look and perform better, we’d love to help! Please contact us with any questions.