HTML Email Template Design: Build Emails That Look Good in Gmail and Outlook

Order confirmations, enquiry auto-replies, newsletters and invoices all look more professional with a well-designed email template. But HTML email template design is different from web design: email clients like Gmail and Outlook support only limited HTML and CSS. Here's how to design emails that render reliably.

Why email HTML is different

• Many clients strip <style> blocks or external CSS
• Outlook on Windows uses Word's rendering engine, with limited CSS support
• Flexbox and Grid aren't reliable
• JavaScript doesn't run
• Images are often blocked until the user allows them

Core rules

1. Use tables for layout

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr><td align="center">
    <table role="presentation" width="600" style="max-width:600px;width:100%;">
      <tr><td style="padding:24px;font-family:Arial,sans-serif;font-size:16px;color:#1a1f36;">
        Hi Rahul, thanks for your enquiry!
      </td></tr>
    </table>
  </td></tr>
</table>

2. Inline your CSS

Put styles directly on elements (style="..."). Tools can inline CSS automatically.

3. Width around 600 px

Centre a 600 px container; it scales down on mobile with width:100%.

4. Web-safe fonts

Arial, Helvetica, Georgia, Verdana, or system fonts with fallbacks.

5. Bulletproof buttons

Use table-cell or padded link buttons instead of images:

<a href="https://example.com/track" style="background:#1B6FD8;color:#ffffff;padding:14px 24px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:bold;">Track your order</a>

6. Images

• Always set alt, width and height
• Don't put important text only inside images
• Host images on your domain with HTTPS
• Keep total email size small

Mobile-friendly design

• Single-column layout
• Font size 16 px for body text
• Large buttons (44 px tall or more)
• Media queries help where supported, but design to work without them

Dark mode

Many email apps apply dark mode automatically. Test that your logo is visible on dark backgrounds (use a version with a subtle outline or light background) and avoid pure black text on transparent images.

Essential email types for businesses

• Enquiry auto-reply: confirms receipt, sets expectations, gives WhatsApp/phone contact
• Order confirmation: order details, delivery estimate, support contact
• Shipping update: tracking link
• Invoice/receipt
• Newsletter. See email marketing tools

Deliverability matters as much as design

• Send from your own domain with SPF, DKIM and DMARC. See business email setup
• Include a plain-text version
• Avoid spammy subject lines and image-only emails
• Add your business address and an unsubscribe link for marketing emails

Testing

Send test emails to Gmail (web + app), Outlook (desktop + web), Apple Mail and Yahoo, on desktop and mobile. Email testing services can show previews across many clients.

FAQs

Can I use a page builder for emails?

Email builders in tools like Mailchimp or Brevo generate compatible HTML for you, often the easiest route.

Why do my website emails go to spam?

Usually missing domain authentication or sending through the web server without SMTP. See contact form not working.

Joboo Web designs branded enquiry and order emails for the websites we build. Ask us.