Transactional email templates: best practices for design and delivery

What makes an email transactional

A transactional email is sent because of something the recipient did, or something that affects their account: a purchase, a booking, a password reset, a change of address, a delivery update, an invoice or a security alert. People expect it, often within seconds, and they act on it.

That changes the design brief. A marketing email competes for attention; a transactional email has the attention already and must not waste it. Success means the customer finds the information quickly, trusts that the email is genuine, and can do the one thing it asks.

Anatomy of a good transactional template

1. A recognisable sender. Your brand as the sender name (for example “Example Ltd” or “Example Ltd Orders”), from an address on your own domain.
2. A specific subject line. Say what happened and include the reference: “Your order A1042 is confirmed”, not “Thank you!”.
3. Preheader text. The preview line after the subject. Use it for the next most useful fact, such as the delivery date.
4. A headline that states the purpose. The reader should know why the email arrived within a second.
5. The key details. Order number, amount, date and time, address: laid out so they can be scanned, not buried in paragraphs.
6. One primary action. Track the order, reset the password, confirm the appointment. One button, clearly labelled.
7. Help and contact. How to get support, in the email itself.
8. A footer with your business details. UK companies must show their registered name, company number, place of registration and registered office address in business emails.

Design and layout

Build to a standard width

Design at 600 to 640 pixels wide. That fits the reading pane in desktop clients, and a single media query lets the layout fill the screen on a phone. A wider template is either shrunk or scrolled sideways, and both make it harder to read.

Use one column

Single-column layouts read naturally on phones, where most transactional email is opened, and avoid the column-collapsing problems that multi-column designs bring. Give elements generous spacing so buttons and links are easy to tap.

Lead with the key information

Put what the customer needs first: the order is confirmed, the code is 482913, the appointment is on Tuesday at 10:30. Everything else is secondary.

Have one clear call to action

Make the main action a proper button, at least 44 pixels tall, with a label that says what happens (“Reset your password”, “Track your order”). Secondary links can be plain text.

Stay on brand, but keep it simple

Use the same logo, colours and tone across every template, so customers recognise genuine emails from you, which also helps them spot phishing. Resist heavy imagery: a transactional email should still make sense with every image blocked.

Write plainly

Short sentences, everyday words, no internal jargon or system codes. If something needs action, say exactly what and by when.

Built to render everywhere

Email clients don’t render HTML like browsers. Desktop Outlook on Windows uses a word-processor engine, Gmail removes some styles, and every phone app behaves slightly differently. Build defensively:

• Use tables for layout and inline CSS for styling. Keep a small <style> block only for media queries and dark-mode tweaks.
• Use web-safe font fallbacks. A custom web font is fine where it’s supported, but always list Arial, Helvetica or similar after it.
• Make buttons from padded table cells with a link inside, not images, so they display even with images off.
• Give every image alt text and fixed dimensions, and host images on HTTPS. Many inboxes block images until the reader allows them.
• Keep images light. Compress them, use PNG for logos and JPEG for photos, and supply them at twice the display size for sharp screens.
• Add a static fallback for animated GIFs. Some versions of Outlook show only the first frame.
• Keep the HTML under about 100 KB. Gmail clips larger messages and hides the rest behind a “View entire message” link, which can hide your footer.
• Send a plain-text version too. A multipart email with a plain-text part is more accessible and looks less like spam.

Dark mode

Many people read email in dark mode, and clients handle it differently: some leave your colours alone, some invert them fully, and some only partly. To stay readable:

• Use logos with a transparent background and a light outline or padding, so they don’t vanish on a dark background.
• Avoid text that is part of an image; it can’t adapt.
• Declare color-scheme support and add prefers-color-scheme styles where they’re supported.
• Check contrast in both modes, not just light.

Accessibility

• Set the language (<html lang="en">) and use real headings and paragraphs, so screen readers can navigate.
• Mark layout tables with role="presentation", so they aren’t read out as data tables.
• Keep text contrast at 4.5:1 or more, and body text at 14 to 16 pixels.
• Write link text that makes sense on its own, such as “View your invoice”, rather than “Click here”.
• Don’t rely on colour alone to show status: write “Payment failed”, don’t just show red.

Personalisation

Templates should be built around fields that are filled in for each message: name, reference, amounts, dates, addresses, links. Plan for missing data: a greeting should still read well if the first name is blank (“Hello” rather than “Hi ,”), and long values such as addresses shouldn’t break the layout.

Never put passwords in an email. Make links that act on an account, such as password resets, single-use and short-lived, and show only partial details for sensitive information: the last four digits of a card, not the full number.

Keep marketing out

It’s tempting to add offers to emails with high open rates. In the UK, a genuine service message doesn’t need marketing consent under PECR, but once you add promotional content the ICO may treat the whole email as direct marketing. That means it needs consent or a valid soft opt-in, and an unsubscribe link, and it can’t be sent to people who have opted out. It also distracts from the purpose of the email and can make it look less trustworthy.

If you do include anything beyond the transaction, keep it small, relevant to what the customer just did, and below the main content.

Getting delivered

A perfect template is no use in a spam folder. Gmail and Yahoo (since 2024) and Microsoft’s consumer mail (since 2025) all set firm requirements for anyone sending in volume, and authenticated mail does better at every provider.

• SPF lists the servers allowed to send for your domain.
• DKIM signs each message so it can’t be altered on the way.
• DMARC tells inboxes what to do with mail that fails those checks, and sends you reports. Start with a monitoring policy and move to quarantine or reject once you’re confident.
• Use a sending subdomain for system email, for example mail.example.com, so its reputation is separate from your staff mailboxes and marketing.
• Use a monitored reply-to address. Customers reply to order and booking emails; a “no-reply” address frustrates them and gets ignored.
• Keep complaints low. Google asks bulk senders to stay under a 0.3% spam rate. Clean, expected transactional mail helps your whole domain.

Test before you send

• Preview in the clients your customers use: Outlook on Windows, Gmail on web and phone, Apple Mail and Outlook on iPhone.
• Check with images turned off, in dark mode, and at phone width.
• Click every link, and check that personalised fields fill correctly, including when data is missing.
• Send test messages to real inboxes at the major providers, and check they arrive in the inbox rather than spam.

Measure what matters

Open rates are no longer reliable: Apple’s Mail Privacy Protection loads images automatically, so many emails show as opened when they weren’t. For transactional email, track:

• Delivery and bounce rates, split into hard bounces (bad addresses to clean up) and soft bounces (temporary problems).
• Time to inbox, especially for passcodes and password resets, which are useless if they arrive late.
• Spam complaints.
• Clicks on the main action, and the outcome you care about, such as appointments confirmed or fewer calls to your contact centre.

Test one change at a time, such as the subject line or the button wording, and compare the results.

A starter template

A minimal responsive transactional template with a preheader, a single-column card, a button that works in Outlook, dark-mode support and a UK company footer. Replace the example details with your own.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Your order A1042 is confirmed</title>
<style>
  @media (max-width: 620px) { .container { width: 100% !important; } .pad { padding: 24px 20px !important; } }
  @media (prefers-color-scheme: dark) {
    .bg { background: #111318 !important; } .card { background: #1f2430 !important; }
    .text { color: #e6e9ef !important; } .muted { color: #9aa3b2 !important; }
  }
</style>
</head>
<body class="bg" style="margin:0; padding:0; background:#f2f4f7;">
<!-- Preheader: the preview line shown after the subject in most inboxes -->
<div style="display:none; max-height:0; overflow:hidden;">Arriving Thursday 13 November. Track your parcel any time.</div>
<table role="presentation" class="bg" width="100%" cellpadding="0" cellspacing="0" style="background:#f2f4f7;">
  <tr><td align="center" style="padding:24px 12px;">
    <table role="presentation" class="container" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:600px;">
      <tr><td style="padding:0 0 16px;">
        <img src="https://example.com/logo.png" width="140" height="36" alt="Example Ltd" style="display:block; border:0;">
      </td></tr>
      <tr><td class="card pad" style="background:#ffffff; border-radius:8px; padding:32px 40px;">
        <h1 class="text" style="margin:0 0 12px; font:bold 24px/1.3 Arial, Helvetica, sans-serif; color:#111827;">Your order is confirmed</h1>
        <p class="text" style="margin:0 0 20px; font:16px/1.6 Arial, Helvetica, sans-serif; color:#374151;">Hi Sam, thanks for your order A1042. It will arrive on Thursday 13 November.</p>
        <!-- Button: a padded table cell, so it works in every client including Outlook -->
        <table role="presentation" cellpadding="0" cellspacing="0"><tr>
          <td style="border-radius:6px; background:#0b5cad;">
            <a href="https://example.com/orders/A1042" style="display:inline-block; padding:14px 28px; font:bold 16px Arial, Helvetica, sans-serif; color:#ffffff; text-decoration:none;">Track your order</a>
          </td>
        </tr></table>
        <p class="text" style="margin:24px 0 0; font:14px/1.6 Arial, Helvetica, sans-serif; color:#374151;">Questions? Reply to this email or call 0344 000 0000.</p>
      </td></tr>
      <tr><td class="muted" style="padding:20px 8px; font:12px/1.6 Arial, Helvetica, sans-serif; color:#6b7280;">
        Example Ltd, registered in England and Wales, company number 01234567.<br>
        Registered office: 1 High Street, Anytown, AB1 2CD.<br>
        You're receiving this because you placed an order with us.
      </td></tr>
    </table>
  </td></tr>
</table>
</body>
</html>

How everymessage helps

• Delivery you can see. Detailed reporting on every email: submitted, delivered and bounced.
• Set up properly from the start. We help you put SPF, DKIM and DMARC in place for your sending domain.
• Templates with personalisation, filled from your data for each customer, in single sends or bulk runs of millions.
• Journeys across channels. With Workflow, send an email and follow up by SMS or a call if there’s no response, or if the email bounces.
• Branded landing pages. Our AI branding tool turns any web form or PDF into a page in your own brand, so the link in your email lands somewhere that looks like you.

Find out more about business email with everymessage.

Frequently asked questions