Gmail, Outlook and phone mail apps each show HTML a little differently. These habits keep your Certain email templates looking the same everywhere.

Build it so it holds up

• Keep it narrow. About 600 pixels wide reads well on screens and phones.
• Use common fonts. Arial, Helvetica, Georgia and Verdana show everywhere. Other fonts get swapped for a default.
• Use the alignment buttons in the editor to center text or images, instead of spaces or blank lines.
  
• Put key details in text. Dates, links and the registration code shouldn't live only in an image, because some readers block images.
• Add alt text to images so readers see a description when images are blocked.

If you edit the HTML yourself

Click Source in the editor toolbar to see and edit the HTML. These are the fixes that solve most Gmail and Outlook differences:

• Put styles inline. Gmail ignores styles set in a style block or by class name. Put colors, padding and fonts directly on each element, or use HTML attributes such as bgcolor.
• Remove HTML comments. Regular comments can make the email display wrong. Keep only Outlook's own conditional comments if your code uses them.
• Center with HTML, not CSS. Classic Outlook for Windows ignores CSS centering. Wrap your content in a table that's 100% wide, with a cell set to align center, and put your fixed-width table inside it.
• Turn off table borders. Classic Outlook adds borders to tables and cells unless each one has border: 0 set inline.

Test before you send

Send the email to yourself on Gmail and Outlook, and open it on a phone. Fix any differences before it goes to registrants.

When you need more

Changing fonts or layout beyond what the editor offers takes custom HTML and CSS. Contact Certain Professional Services for custom design work. If emails look different for only some people, see Why does my email look different for some recipients?

Next step: Send a test to two different email apps.