Follow Doug Orleski on:  

Designing a visually appealing email takes time – often requiring a designer or marketing team to go through multiple rounds of edits. Every detail is thoroughly thought out and the preview link is sent to the appropriate parties for approval. It's finally ready for delivery, but when you click send, you get emails from a few people later that day saying it's not rendering correctly. How could this happen? What went wrong?

All that time spent working on the design and content was for naught if you can't get your emails displaying properly. And sometimes you may not even realize it until after your message is out the door. In light of this, here we have some tips on how to make sure your email renders correctly across multiple email service providers (ESPs).

1. Add a Background Color to Images

You can add a background color to image modules in the body of your email via the CSS declarations – simply insert the desired hex code. Note that the color won't be visible when the image is uploaded. But if a user's email service provider isn't loading images or the recipient has that function turned off, the the background color will appear in place of the image instead of just blank white space. This allows your email to still maintain its structure and the user is less likely to delete it because they see more than just white space.

2. Keep Your Email Width to 600 Pixels

The farther the width of your email expands beyond 600 pixels, the more likely it is that your email will show up with a horizontal scroll bar. And if a user has to use the horizontal scroll, he or she is probably going to choose not to interact with your email. It's just not user friendly. 

A width of 600 pixels will make sure the full content of the email is visible in the ESP's display box. You can make the length of your emails as long as you want, but keep in mind that too much content may also prompt less engagement and fewer clicks. Try to keep your primary message above the fold.

An Email Width of 600 Pixels

3. Test Across Multiple Email Service Providers

HubSpot has a feature that allows you to check out how your email will look across multiple ESPs before actually sending it. This function enables you to notice any red flags before you put something on display that you might want to take back upon further examination.

HubSpot Email Display Testing Tool

Here's how to use to this tool:
  • On the left-hand side of your portal's screen, select the eye symbol for Preview.
  • Click on the "test in email clients" link (as pictured above).
  • You will come to a screen with every imaginable email client. The 4 most popular will be preselected for you.
  • Check the corresponding box(es) of the email client(s) you would like to test out.
  • You will then have small previews of how your email will appear on the selected ESPs.

4. Use Inline Bullet Points

If you've chosen to use creatively styled bullet points, the HTML might break down on some email clients, which ultimately will cause alignment issues. You can reduce the chances of this happening by using inline alternatives – one of which is simply using a hyphen as your bullet point and then manually hitting the return key and continuing to do so until your bulleted list is complete. It's not as visually appealing, but it increases the probability of the emails displaying properly.

Other Quick Tips to Get Emails Displaying Properly

  • Include a link so the email can be viewed as a web page. Not all email clients support HTML, so giving your recipient the option to view it this way can spare your email from immediately going in the trash. This feature is also built into some email or marketing automation platforms (HubSpot included).
  • Use JPEG image files. Sometimes PNG files will not be displayed correctly.
  • Preview and test A LOT!

There are a large number of email clients these days, so there are a lot of requirements that need to be met to make sure your email displays the way you want it to. Some block images by default, others don't display HTML. You have to take the best steps you know to make sure everything will be rendering as intended, and if it's not, you need to have fail-safes in place to ensure it still looks presentable and professional.

We hope these tips help! If you have any other ideas, feel free to leave them in the comments below.

Download Now: 8 Ways to Power Up Your B2B Technology Company Website

About the Author

Doug Orleski | Graphic Designer
Doug Orleski, Graphic Designer

Doug Orleski has been a Design Specialist at PMG since 2013. He’s an Adobe extraordinaire, with specialties in Photoshop, InDesign and Illustrator. He’s a big picture thinker – no, seriously, he thinks in pictures, so when he’s not grappling with shifting to word-based work, he’s writing about techniques in streamlining design, customization techniques and optimal image selection.

 Tags: Website & Graphic Design

Subscribe to Our Blog!

New Call-to-action

DesignRush Accredited Agency 2019 BadgePMG has been recognized as a 2019 Top Digital Marketing Agency in Massachusetts by DesignRush.

Have any thoughts on this blog post topic? Let us know!

Simply post a comment below to add to the conversation.