How to Care for Your Email Template

Water daily, direct sunlight, and lots of love. Okay, just kidding, but I really do LOVE to code and design email templates, and there’s lots you can do to care for your email template to make sure you’re getting the most out of it!

Emails thrive better in some environments than others. As an email designer, I do my best to code templates that will work well across all email clients, browsers, and apps. If you’ve ever tested your emails to different combinations of browsers, email clients, and apps, you may have noticed your emails display differently depending on where it’s being rendered. You may have also noticed that some email clients are more difficult to work with than others.

So what can you do to take proper care of your email template?

Copy and paste with caution

Copying and pasting content is a common practice, but it can introduce some pests into your email code. It’s best to type directly into the editor, or to only copy and paste from plain text sources which will strip out any extra code picked up in the copy process.

For example, when I copy some text from one of our blog posts into the editor, extra tags are being added into the code. Note <h1></h1><p></p> below. While these are common HTML tags, different email clients may handle these tags differently than the browser where you’re creating the message.

<div>
<h1>5 Essential Design Tips for the Non-Designer</h1>

<p>As a writer, I can't believe I'm saying this: <em>Visuals are the foundation of your business</em>. Consistend, empowering branding helps to draw in prospects and keep customers coming back for more. It's your first opportunity to make an impression.</p>

<p>It's your brand identity.</p>
</div>

Here’s another example of the code when I copy it from our blog, then paste it into a plain text editor. I’m using TextEdit with Plain Text formatting selected, as opposed to Rich Text formatting:

<div>5 Essential Design Tips for the Non-Designer<br />

As a writer, I can't believe I'm saying this: <em>Visuals are the foundation of your business</em>. Consistend, empowering branding helps to draw in prospects and keep customers coming back for more. It's your first opportunity to make an impression.<br />
It's your brand identity.</div>

The extra code is not being embedded into the editor and will yield better results across a wider variety of email clients and browsers.

Keep it simple

Overdoing your message can cause your engagement to wilt. Keeping things simple will allow for you to have a clear, concise message.

Avoid overemphasis – don’t confuse or distract your reader by adding too many font sizes and styles, like underlines and bold text, throughout your message.

Use a simple color palette – try to keep the font colors to a minimum to avoid distraction. Pick a headline color, font color, and link color and stick with those colors throughout your message.

Limit the number of images you use.In some cases image-heavy emails work, but too many images may not only be distracting, they may also impact load times. If your message doesn’t load within a couple seconds you risk losing the attention of your readers. Another thing to remember is that some email clients will block images by default, so relying on images to convey your message isn’t recommended.

Make sure your images aren’t too wide – most of our templates are 600 pixels wide. If you upload an image that’s wider than 600 pixels, consider using the Optimized or Thumbnail option for the best results. If you have columns in your email, make sure the width of the image isn’t “breaking” the width of the column.

Avoid using too many links.In many cases you will want a clear call to action within your message. Offering too many links can actually prevent your subscribers from taking action.

Test your messages

Test your email in a variety of different environments. Create test accounts with free email services, and check to see how your email renders in those clients and different browsers. There’s also services, like Litmus, which will run dozens of tests at once to save you some time.

These are some of the most popular email clients, and I suggest trying to test to these if possible:

Desktop Email Clients

Remember, not everyone will be using the same version and rendering may vary from version to version

  • Outlook
  • Apple Mail

Webmail

The browser being used may also affect rendering – always test a variety of browsers like Chrome and Firefox

  • Gmail
  • Outlook.com
  • Yahoo!

Mobile Apps

While all of our email templates are designed to be responsive, some email apps will display a mobile friendly version

  • Mail App for iPhone
  • Gmail App for iPhone
  • Gmail App for Android

Need help cultivating your email template?

Did you know we have a team of email design experts who can help you troubleshoot rendering issues, and even design custom templates to match your brand? Let us help you grow your brand!

2 Comments

  1. Tim

    12/27/2015 3:50 am

    Great article

  2. Roy Reveltas

    1/6/2016 4:30 am

    We missed few important points. Firstly, “take care on what” – what is the best editor to use? Imho, Dreamweaver. Use its’ Design View, Code Validation and Error Highlighting features. They’re extremely capable in v.2015.1.
    Secondly, we’re talking about Responsive, but it is not the latest and the best way of coding emails. Hybrid is, and I wish you touched upon the subject and at least mentioned that in your services. My clients are moving templates to Hybrid and we’re coding all new templates only Hybrid way. It supports all email apps, native or 3rd-party.
    Thirdly, unless it’s an article paid by Litmus, you should mention Email on Acid. They’re cheaper yet very capable option. AWeber is very cost-effective solution, so Email on Acid fits the workflow well.