We Are Hiring

How to Keep Your Email Looking Great in Any Inbox


Posted on

HTMLRenderingv3Have you ever dealt with the frustration of working for hours on an email only to find out it looks completely different on one email client than it does on another?

We understand how frustrating this can be, but we assure you, it’s not your fault! Every email client, like Gmail, Outlook, and Yahoo!, renders HTML and CSS differently. This means that you can create an email that looks perfect for your Gmail users, but looks different for Yahoo! users.

In addition to email clients, many other things can affect how an email is displayed, including browsers, rendering engines, and mail exchange servers. Our email support experts have compiled some best practices that you can follow in order to keep your messages looking good across the different email clients and platforms:

 Layout

  • By applying and avoiding certain layout elements, you can ensure your email will remain consistent from client to client:
    • Avoid using padding and margins
    • Always use inline CSS
    • Avoid BR, HR, and height tags
    • Use tables to create your general layout
    • Set a “doctype” in your code
    • Set wrapper reset styles in “wrapper div”
    • Be aware of text and font changes across devices

Backgrounds

  • Many browsers and email clients have issues supporting compound CSS values, make sure you:
    • Use more basic or older background HTML tags
    • Always offer reset background colors to defer to

Images

  • Depending on the images you choose, the way they are displayed can often change:
    • Avoid PNG images
    • Always provide image dimensions
    • Give all images “alt” attributes
    • Be aware that Outlook adds pixels to the end of each image
    • Avoid “float” tags

Videos

  •  Many email clients can’t support video rendering:
    • Avoid videos all together

To learn more about how you can follow these best practices, and for more explanation for why they should be used, read our comprehensive article from Ryan on our support team: HTML Rendering: The Do’s and Don’ts of Cross-Platform Email Design.


Warren is a Marketing Copywriter at SendGrid, specializing in email and content best practices.

2 thoughts on “How to Keep Your Email Looking Great in Any Inbox

  1. Pingback: 12 Social Media Photos That Have Defined SendGrid's 2014

  2. Pingback: Embedding Images in Your Emails. The Facts.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>