How to Keep Your Email Looking Great in Any Inbox

Have 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

For additional design tips, check out this Q&A with SendGrid designer, Jason Walker: Design Email Best Practices to Boost Engagement.