HAE Teaser Emails: Three OCE Emails for CSL Behring

The Challenge

Ahead of the Andembry launch, CSL Behring wanted to warm up doctors in Saudi Arabia and the UAE with three teaser emails on hereditary angioedema (HAE). Reps send each one from OCE Personal, the platform they use to reach doctors.

The design arrived as PDFs. Email is not a web page. Outlook on Windows draws messages with Word’s engine, Gmail strips most of what makes the web easy, and neither loads custom fonts. The emails had to look like the design and hold up in all of them.

What We Built

Three emails at 700 px wide, each in a ZIP ready to upload to OCE. The hero artwork is one image. Everything under it is real HTML text: the red line, the greeting, the body, the “Stay tuned” badge, the references and the full legal footer.

Tables and Inline Styles

The layout is all tables, with the styles written into every cell, because mail clients drop or ignore stylesheets. Outlook on Windows gets its own fixed-width table through conditional comments, and every line height is locked so Word’s engine can’t stretch it. Below 620 px the email goes full width and the text reflows. We tested from 500 to 900 px with no sideways scroll.

The Font You Can’t Load

The design is set in Univers Condensed, a licensed font no mail client will load. The first build used Arial, which runs 9% to 20% wider, so lines broke in different places from the design. The client spotted it, and they were right.

The fix was a font stack that starts with Univers and falls to Arial Narrow, the closest condensed face already installed on most machines. Then every size was tuned until each line matched the width measured off the design. Lines now break on the same words. One line in email 3 that used to wrap now fits on one line, as designed.

Matching the Design by Measurement

We didn’t match spacing by eye. One script renders the PDFs at 1400 px. Another finds each block by its colour: red for the red line, yellow for the badge, white for text. It then builds the email, screenshots it, compares, adjusts the padding and goes again, until every block lands within about a pixel of the design.

When the Picture Doesn’t Show

The images are embedded in the file, so each package is self-contained and needs no hosting. Some clients don’t show embedded images, though. So the hero cell has a navy background and a styled alt text in bold white. If the picture drops, the doctor still reads the headline in its place, and the rest of the email is live text that renders as normal.

The Details That Matter

Dark mode in some clients repaints backgrounds on its own. It can’t repaint the pixels of an image. So every navy background is also painted with a one-pixel image of that colour, and the approved colour stays put.

OCE runs every template through a Mustache processor before it sends. Our build uses its own short placeholders for the references and contact links and swaps them all out at build time, so nothing reaches OCE with a brace Mustache could misread. Links carry names so clicks show up in the platform’s reports, as the OCE guide asks.

Each ZIP holds exactly the two files OCE requires, by the names it requires: index.html and a 220x280 thumbnail.jpg. The handover listed what we tested ourselves, what came from published support tables, and what still needed the client’s call. The “Stay tuned” badge has no link because the artwork shows no destination, and we didn’t invent one.

These emails opened the campaign. The next step was the doctor registration page for the Andembry launch event.