HCP campaign email

The three problems

Outlook renders with Word. Not a browser engine — the Word engine. No flexbox, no grid, no max-width you can trust, no background images without a VML fallback. Layout is nested tables, and that is not nostalgia; it is the only thing that works.

Gmail clips at 102 KB of HTML. Past that it hides the remainder behind a “View entire message” link — and what sits at the bottom of a pharmaceutical email is the safety information and the legal footer, the parts that are required to be there. Every byte of markup is a budget decision. This one lands at 14.7 KB, so there is room for the personalisation blocks a real send would inject.

Apple Mail and Gmail rewrite your text. They detect addresses, dates, phone numbers and bare URLs and wrap them in their own blue underlined anchors, on top of your typography. On an email carrying a regulated footer full of addresses and phone numbers, that is not cosmetic — it changes how approved copy renders.

What I built

Table layout throughout, with MSO conditional blocks giving Outlook fixed widths while every other client follows the fluid path. The call to action is bulletproof: a VML roundrect for Outlook and a padded anchor everywhere else, so it survives images being blocked — which is how a large share of HCP recipients read mail by default. An image button would simply vanish.

The auto-link defence is a block of overrides targeting each client’s own injected selectors — a[x-apple-data-detectors], Gmail’s .aBn, Outlook.com’s rewritten DOM — forcing detected text back to the surrounding colour and weight.

Retina assets are served at 2× and constrained to half their natural width, with a separate mobile crop of the hero swapped by media query, so a phone downloads a phone-shaped image rather than scaling down a desktop one.

Dark mode gets colour swaps only, never layout changes, through both the prefers-color-scheme query and Outlook.com’s [data-ogsc] hook. Clients that invert aggressively are the reason the safety section uses explicit colours on explicit backgrounds rather than inheriting.

The efficacy chart is an image. CSS bars collapse in Word’s engine, and a chart that renders as three stacked rectangles in Outlook is worse than no chart.

The part that shapes everything

The safety section has no known final length. Review can return it longer than it went in, and it cannot be summarised or truncated to fit. So the template is built to accept a block of unknown height rather than a fixed panel — which sounds obvious and is the single most common reason a pharmaceutical email template has to be rebuilt late.

What it took

The unglamorous half of email work is the test matrix, and there is no way around it. Every change is rendered across the client set before it ships, because the one client you did not check is the one the brand’s medical director reads their mail in.