What this prompt does
This prompt hand-codes a responsive HTML email template for a [email_type] email for [brand_name] that renders consistently across [email_clients]. It works through the brittle realities of email HTML in order: document structure with Outlook conditional comments, a hybrid table-plus-div layout, the major sections, responsive behavior, image handling, inline typography, and tracking. Because email clients ignore much modern CSS, this bulletproof, table-based approach is the only reliable way to survive every inbox.
The variables control compatibility and layout. [email_clients] sets the rendering targets, [table_width] and [column_count] define the ghost-table structure that stacks on mobile, and [mobile_breakpoint] with [mobile_font_size] governs the responsive shift. [image_strategy] and [font_stack] acknowledge that web fonts and unblocked images are unreliable, so it specifies fallbacks, alt text, and a safe font stack. [preheader_length] and [esp_name] shape the inbox preview and tracking compatibility.
When to use it
- Building a transactional or marketing email that must look right in Outlook and Gmail alike.
- Hand-coding a template where modern CSS layout simply will not render reliably.
- Creating a multi-column email that gracefully stacks on mobile via the ghost-table technique.
- Ensuring a CTA button renders with VML in Outlook and border-radius elsewhere.
- Adding a CAN-SPAM-compliant footer with unsubscribe and physical address.
- Wiring UTM tracking and an open pixel compatible with
[esp_name].
Example output
You get a complete, hand-coded email template: a compatibility-focused DOCTYPE with Outlook xmlns and viewport meta, a [preheader_length]-character preheader, a [table_width] centered ghost-table layout with [column_count] columns that stack at [mobile_breakpoint], header/hero/body/footer sections with a bulletproof VML CTA button, responsive rules bumping fonts to [mobile_font_size] and making buttons full-width, image handling per [image_strategy] with alt text and background fallbacks, inline typography using [font_stack], and tracking with UTM parameters and an open pixel for [esp_name].
Pro tips
- Build the layout with nested tables and the ghost-table technique; div-and-flexbox layouts break in Outlook's Word-based rendering engine.
- Inline every style; external and embedded
<style>blocks are stripped or ignored by several of your[email_clients]. - Stick to a web-safe
[font_stack]like Helvetica/Arial; web fonts silently fall back in Outlook and many clients. - Always set width, height, and meaningful alt text on images, since
[image_strategy]must assume images may be blocked by default. - Keep the
[preheader_length]preheader as a real continuation of the subject line; it is prime inbox real estate that most senders waste on boilerplate. - Code the CTA with VML for Outlook and CSS border-radius elsewhere, or the button will render as a plain rectangle in Outlook.
- Add UTM parameters on every link and place the open pixel so click and open tracking stays compatible with
[esp_name]without bloating the markup or tripping spam filters.
