How to build HTML email that works in Gmail and Outlook

Lay it out with tables

Outlook on Windows renders email with Microsoft Word’s engine, which has no flexbox or grid and patchy support for floats. Nested tables with role="presentation" are the layout every client agrees on.

Keep the content column around 600 px wide and let it shrink with width:100%; max-width:600px for phones.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f4f3ef;">
  <tr>
    <td align="center" style="padding:32px 16px;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0"
             style="max-width:600px;width:100%;background:#ffffff;border-radius:12px;">
        <tr>
          <td style="padding:32px;font-family:Arial,Helvetica,sans-serif;color:#17181c;">
            <h1 style="margin:0 0 12px;font-size:22px;">Invoice {{invoice.number}}</h1>
            <p style="margin:0 0 20px;font-size:15px;line-height:24px;">Hi {{customer.first_name}}, your invoice is attached.</p>
            <a href="{{invoice.pay_url}}"
               style="display:inline-block;background:#2f43c4;color:#ffffff;padding:12px 20px;border-radius:8px;text-decoration:none;">
              Pay Invoice
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Put the CSS inline

Gmail keeps <style> blocks in the head in most cases, but other clients and forwarded messages drop them. Inline styles on each element are the safe default. Write with classes if you like, then run a CSS inliner before sending.

Details that break most often

• Fonts: web fonts load in Apple Mail and some others; always end the stack with Arial, Helvetica, sans-serif.
• Buttons: an inline-block link with padding works widely; Outlook ignores border-radius, so the corners show square there.
• Images: host them on https, set width and alt, and never put important text only in an image; many clients block images by default.
• Dark mode: some clients invert colours. Avoid pure-white text on transparent images, and check both modes before sending.
• Preheader: the first text in the body shows as the inbox preview; set it on purpose.

Test before you send

Preview at desktop and mobile width, then send a real test to Gmail and Outlook accounts. Templater’s test sends go only to your own team, so you can check a live template safely.

Questions