ActiveManage Docs ← Back to activemanage.co.uk

E-mail Designs

Email Designs vs Templates

ActiveManage separates the design of an email (the visual wrapper: logo, header band, footer, fonts, colours) from the template (the specific message: subject, body content, recipient logic). Knowing the difference saves hours when you decide to rebrand.

Side-by-side view: left shows a 'Design' with a branded header and footer, right shows three Templates (Welcome, Password Reset, Order Confirmation) all using the same design wrapper

Designs

A design is reusable HTML/CSS that defines the look of every email. Typical design elements:

  • Logo block at the top
  • Colour palette (header band, link colour, button colour)
  • Font choice and base size
  • Footer with company address, unsubscribe link and social media icons
  • Responsive media queries for mobile

You can have multiple designs for different purposes — e.g. “Transactional” (minimal, clean) and “Marketing” (full-width hero images).

Templates

A template embeds content inside a design. It defines the subject line, the body content (with merge tokens like {{user.firstName}}), and the recipient logic.

How They Combine

When the platform renders an email, it loads the template, substitutes tokens, then wraps the body inside the chosen design. The template can override the default design if needed.

Worked Example

A SaaS rebrand: the company changes from blue to green. By updating only the Default design's primary colour, every transactional email (Welcome, Password Reset, Invoice, Booking Confirmation, ~30 templates) updates simultaneously. Without the design/template separation that would be 30 individual edits.

Other Examples

  • Multi-brand tenant: Brand A uses Design A; Brand B uses Design B; templates are shared but each tenant gets the right wrapper automatically.
  • Seasonal campaigns: A festive-themed marketing design used in December, switched back to standard in January.
  • Plain-text design: A minimal “no wrapper” design used by templates that should look like a personal email rather than a corporate broadcast.

Creating a New Email Design

This article walks you through creating a new email design from scratch. We'll cover the design editor, common pitfalls of HTML email, and an example of a complete design.

Email design editor split view: left pane shows source HTML/CSS, right pane shows live preview with header, sample content area, and footer

Step-by-Step

  1. Navigate to Architect Panel → Email Designs and click New Design.
  2. Give it a name (e.g. “Transactional 2026 rebrand”) and an internal description.
  3. Paste your HTML into the source pane. The editor highlights syntax and warns about email-incompatible CSS (flexbox, grid, web fonts via @import).
  4. Use the placeholder {{content}} to mark where the template's body will be injected.
  5. Add merge tokens for global values like {{site.name}}, {{site.address}}, {{user.firstName}}, {{unsubscribeUrl}}.
  6. Click Preview. Send yourself a test by clicking Send Test — render quirks usually show up here, not in the in-browser preview.
  7. Save. Templates that reference this design will pick up the new look on next send.

Email HTML Gotchas

  • Use tables for layout — Outlook on Windows still uses Word's rendering engine.
  • Inline CSS — Many clients strip <style> blocks. Use the editor's “Inline styles” button to move styles into style= attributes.
  • Avoid web fonts — Most clients don't fetch them. Use system font stacks like -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif.
  • Max width 600px — Anything wider gets cropped in Gmail's column view.

Example: A Minimal Transactional Design

  • Header: 64px logo centered on a 1px-bottom-border line
  • Content area: 32px padding, system font stack, 16px body, 1.6 line height
  • CTA button: blue background, white text, 12px padding, 4px radius
  • Footer: muted grey 12px text with company address and unsubscribe link
Tip: Always test new designs in Litmus or Email on Acid before going live. Outlook, dark-mode Gmail and Apple Mail can each surprise you.