The Essential Guide to Email Rendering for Marketers

If you’re committed to sending pretty emails instead of plain ones, this article is worth reading. You’ll learn how to ensure your marketing emails render properly on various devices and platforms. (If you’re thinking, “What is email rendering?” it’s how emails display on different email platforms.)

At this point in the technosphere, there are thousands and thousands of variations of screens that people use to read an email. Those screens have different sizes and pixel densities, or the number of pixels in an inch, that you need to account for if you want to ensure that your precious emails are displaying as intended.

Oh, and I haven’t even mentioned the part about how many different email rendering engines there are. And each one has its own tricks to play on you because there are no universal standards for rendering email—unlike the web, where most things look pretty much the same most of the time. Outlook’s rendering engine infamously adds in extra white space. Gmail clips your messages once they reach a certain size (which isn’t all that generous, by the way). Apple Mail turns addresses and phone numbers into blue links. Some email clients won’t even display bullets; it’s a very wacky world out there.

Generally speaking, you can use sites like caniuse.email to avoid embarrassing email rendering issues. We won’t cover all the ins and outs of fixing these things because there’s too much nuance. Fear not, though, because I do have some great tips that will help you solve ~90% of email rendering woes.

Tonight we’re gonna code like it’s 1999

It’s hard to imagine coding a <table> on a modern HTML webpage. Sure, there are still “tables” on the web, but developers build them using divs, which are much more flexible than tables. Email is a whole different story. If you look under the hood of a solidly developed email, it would look a whole lot like a webpage from 1999. While using the <table> element is pretty counterintuitive everywhere else, most email is just one big table.

Pro Tip: When it comes to CSS, you’ll want to write most of your styles inline, avoiding shorthand selectors.

Do:
style=”font-size: 22px; font-family: Arial, sans serif; line-height: 26px; background-color: #2E8B57;
color: #ffffff;”

Don’t:
style=”font: Arial, sans serif 22px/26px; background-color: #2E8B57; color: #ffffff”

Be wise with width

While you can get up to about 640px width without breaking too much sweat, try to keep it closer to 600px. Wider emails are more “widely” accepted these days, but a lot can go wrong if your recipient’s email client doesn’t like your 641px email.

Emoji in your subject lines 

We’ve all seen subject lines using emoji. They can undoubtedly increase open rates and convey some charisma. Use emoji strategically though, so your recipients don’t become “blind” to them. They don’t always render, so keep them to the beginning or the end, and be sure your subject line has the same meaning without emoji.

Double the image dimensions…

Remember that different screens have different pixel densities? Well, you’ll need to double the dimensions of your images for those superior screens. So if you have room for a 400px image in your 600px email, you’ll need to make it 800px wide and then use CSS to set the image size, like so:

<img src=”https://www.example.com/marvelous-image.jpg” width=”400″ height=”” style=”height: auto; max-width: 400px; width: 100%;” border=”0″ alt=”You’ll Marvel at This :)”>

… But be careful about file size

Compress your images. You can very easily have a 3MB image that’s 800px wide. That’s bad, bad, bad. The recipient’s ISP is more likely to mark it as spam, and it will take too long to load anyway if it magically makes it into their inbox. Photoshop does a fantastic job of compressing images, and there are lots of free tools available online. If you’re a Mac user, I highly recommend a free utility called ImageOptim that removes some metadata and further trims file size. So my go-to image workflow is Photoshop > ImageOptim > add to email.

Some notes on file types

If you’re using photography, shy away from PNGs because they’re much larger than JPGs. If you’re using illustrations with only a few colors, PNGs are likely a better choice. Technically, legacy clients support some PNGs but throw caution into the wind on this one. Similarly, if you’re going for a GIF, you’re taking some chances due to bloated file size on GIFs that look like video, like this:

via GIPHY

That bear, while adorable, commands 652KB of space and is about as low-resolution as you can get in a GIF, meaning there are better versions with commensurately larger file sizes.

This simple little GIF is 208KB, less than a third of the size of our friend Chair Bear. It’s not as endearing, though. Just pick your battles carefully… and optimize accordingly 🙂

via GIPHY

Alt text is your friend

The case for using alt text, or text that appears when an image fails to display, is pretty clear. First of all, doing so ensures that your emails are more accessible. ISPs favor accessibility, and not accounting for it can detract from your reputation as a sender.

Second, what happens if your images don’t display? Well, that’s when alt text shows up. So if you don’t have any alt text to show for it, your recipient may not have a great experience. You can skip it on design elements like spacers and dividers, though.

Pro Tip: You can even style your alt text to retain a consistent look and feel by adding inline style to the <img> tag. Building on the example above, here’s what it might look like:

<img src=”https://www.example.com/marvelous-image.jpg” width=”400″ height=”” style=”height: auto; max-width: 400px; width: 100%; font-size: 18px; line-height: 20px; background-color: #2E8B57; color: #ffffff;” border=”0″ alt=”You’ll Marvel at This :)”>

When in doubt

Finally, if there’s ever doubt, split-test! You’ll find out what works best from the data. 🙂

Now, let’s hear from you. What’s the biggest concern you have about email rendering?

Need help with email marketing? Check out how we increased leads for a software company with email marketing.