⟨ BLOGPLAYBOOKSCREATIVE STUDIO

HTML email designed to survive Outlook

An announcement email engineered to render everywhere: table-based layout, inline styles, 600px, bulletproof buttons, with markup ready to paste into Klaviyo.

PlaybookDesignImage GenerationKlaviyoRUN BY THE DESIGN AGENT →

The problem this solves

Email HTML is where modern front-end knowledge goes to fail. The announcement that looks perfect in the design tool and in your own inbox arrives at a meaningful chunk of your list - the corporate inboxes running desktop Outlook - as a broken stack of misaligned blocks, invisible buttons, and stretched images. The recipients most likely to be on legacy clients are frequently the enterprise contacts you most wanted the announcement to impress.

Building email that survives everywhere is a genuinely archaic craft: table-based layout, inline styles on every element, a 600-pixel discipline, and buttons constructed so they stay clickable when background images are stripped. Almost nobody on a marketing team holds this knowledge anymore, because it is useless anywhere else. So teams either gamble with a fragile template, flatten the whole email into one image that spam filters and screen readers punish, or send plain text and concede the design entirely.

How the mission runs

  1. Take the announcement brief. The agent works from the announcement in your thread: what is being announced, the single action recipients should take, and the tone. Email rewards one job per send, so if the brief carries three competing calls to action, the agent proposes the hierarchy before building.
  2. Generate the header image. Image Generation produces the email's header visual in your brand style, iterated at draft quality and rendered at final quality within email-safe dimensions and file weight. The design assumes images may be blocked by default, so the layout communicates even before the header loads.
  3. Build the bulletproof markup. Design constructs the email the way deliverability demands: table-based structure, fully inlined styles, a 600-pixel layout that degrades gracefully on small screens, live-text headings, and buttons built to remain visible and clickable in clients that strip backgrounds. The craft constraints are the feature.
  4. Publish the preview link. The finished email publishes as a live preview link posted in the thread, so stakeholders review the real markup in a browser rather than a screenshot. Copy or layout revisions land against the same link until the announcement is approved for staging.
  5. Hand off to Klaviyo. The final markup is prepared as ready-to-paste HTML for your Klaviyo template, with a short checklist covering subject line, preview text, and a recommended test send to a desktop Outlook seat before the real send. The send itself remains entirely your action.

The prompt

This is the exact objective the agent receives. Swap the obvious placeholders for your own domain, segment or channel and run it as-is from the console, Slack, or the API.

⟨ THE MISSION PROMPT · PASTE AND RUN ⟩

Design the announcement email for this thread - table-based layout, inline styles, 600px, bulletproof buttons, generated header image - published as a preview link, with the markup ready to paste into Klaviyo.

What comes back

A production-ready announcement email: bulletproof table-based HTML with inline styles at 600 pixels, live-text headings, buttons that survive image-blocking and background-stripping clients, and a final-quality branded header image - published as a browser preview link and delivered as paste-ready markup for Klaviyo, with a pre-send checklist. Sending stays in your hands, on your list, on your schedule.

Make it yours

  • Build the announcement as a two-email arc: the announcement and a follow-up nudge in the same visual system, both delivered as paste-ready markup.
  • Produce a plain-text twin alongside the designed version, written to carry the same message for recipients and clients where minimal email performs better.
  • Turn the result into a reusable house template: the same bulletproof skeleton with swappable header, body, and button content documented for future sends.

Frequently asked questions

What exactly makes the email survive Outlook?

The construction techniques email clients cannot break: nested table layout instead of modern CSS positioning, styles inlined on every element, a fixed 600-pixel body, and buttons built from table cells so they render even when images and backgrounds are stripped. It is unglamorous engineering applied deliberately.

Can I edit the copy after the markup is built?

Yes, and the safe path is through the thread: request the wording change and the agent updates the markup and the preview link together, keeping the inlined styling intact. Hand-editing bulletproof HTML is where table layouts quietly break, so letting the agent apply copy changes protects the rendering.

Does the agent send the email?

No. The mission ends with approved markup staged for pasting into your Klaviyo template and a checklist that includes a test send. The actual send to your list is always a human action in your own account, which keeps list safety and timing entirely under your control.

Go deeper

⟨ RUN IT INSTEAD OF READING IT ⟩

This mission runs minutes after signup.

Open a workspace, paste the prompt, and the Design Agent carries it end to end on your plan's monthly credits - evidence attached.

⟨ RELATED PLAYBOOKS ⟩