HTML email template that works in Gmail, Outlook and on phones
Email HTML is stuck in the past: Outlook ignores modern CSS, Gmail strips style blocks in some cases, and phones need a single column. Tell your todo.is agent what the email is for and your brand colours. It codes a responsive, table-based template with inline styles, writes the copy if you want, and sends you a preview and the file.
The prompt
- Create an HTML email template for [EMAIL PURPOSE] from [BRAND NAME]. Brand colours: [COLOURS] and logo attached. Sections: [SECTIONS]. Main button: [CALL TO ACTION AND LINK]. It will be sent with [EMAIL PLATFORM]. Use table-based layout, inline CSS, a 600px max width that stacks to one column on phones, web-safe fonts with fallbacks, alt text on every image, a hidden preheader and a dark-mode-friendly palette. Include a plain-text version, merge tags for my platform, a PNG preview at desktop and phone width, and the .html file.
What to change
- [EMAIL PURPOSE]: E.g. "monthly newsletter", "order confirmation", "product launch announcement", "event reminder".
- [BRAND NAME]: E.g. "Larkspur Tea Co.".
- [COLOURS]: Hex codes, e.g. "#1F4D3A green, #F5EFE6 cream".
- [SECTIONS]: E.g. "header with logo, hero image, 3 product cards, short story, footer with address and unsubscribe".
- [CALL TO ACTION AND LINK]: E.g. "Shop the autumn blends" linking to https://larkspur.example/autumn.
- [EMAIL PLATFORM]: E.g. "Mailchimp", "Klaviyo", "Brevo", "HubSpot", "Gmail by hand". Sets the merge tag format.
Example result
- Larkspur Tea Co.: autumn launch email
- What you got
- • larkspur_autumn_email.html: the template, all CSS inline, about 34 KB
- • larkspur_autumn_email.txt: the plain-text version
- • preview_desktop.png and preview_phone.png: rendered at 600px and 375px wide
- Structure
- • Preheader (hidden, shown in the inbox list): "Three new blends for colder mornings, plus free shipping this week."
- • Header: logo 160px wide on cream #F5EFE6, alt text "Larkspur Tea Co."
- • Hero: full-width image of a teapot and leaves, then the headline "Autumn is steeping" in Georgia, falling back to Times New Roman
- • Button: "Shop the autumn blends", a bulletproof button (a table cell with background #1F4D3A and white text), so it shows in Outlook even with images off
- • Product cards: three cards side by side on desktop, stacked on phones: Spiced Pear Black, Smoked Maple Oolong, Ginger Root Rooibos, each with image, one line and a link
- • Story: two short paragraphs from the founder about this season's harvest
- • Footer: address, *|UNSUB|* unsubscribe and *|UPDATE_PROFILE|* links, and "You're getting this because you joined at larkspur.example"
- How it's built
- • Nested tables with role="presentation" for layout, because Outlook for Windows uses Word to render email
- • A media query for screens under 600px stacks the cards; clients that ignore it still show a readable 600px layout
- • Text colours chosen so the email stays readable when Apple Mail or Outlook switch to dark mode
- • Every image has width, height and alt text; the email still makes sense with images blocked
- • Greeting uses *|FNAME|* with a fallback: "Hi *|FNAME|*" shows as "Hi there" if no name is saved
- Before you send
- • Send a test to Gmail, Outlook and an iPhone, and click every link
- • Host images in your email platform's file manager so they load from a public URL
- • Keep the total size under about 100 KB so Gmail doesn't clip the message
How to do it with todo.is
- Copy the prompt and fill in the purpose, brand, colours, sections, button and platform.
- Attach your logo and any product photos in todo.is (or send them to your agent).
- Your agent codes the template, renders desktop and phone previews and writes the plain-text version.
- Download the .html and import it into your email platform's code editor.
- Ask for changes, or for variations ("same template for a holiday sale").
Tips for a better result
- Gmail clips messages over about 102 KB. Keep the HTML lean and images hosted, not embedded.
- Outlook for Windows ignores many CSS features, including background images on divs and border-radius. Tables and inline styles are still the safe choice.
- Use a real text headline, not text baked into an image: many people read email with images off.
- Always include a plain-text part and a working unsubscribe link; it helps deliverability and is required for marketing email in many countries.
- Ask your agent to save the template in your workspace so next month you only send new content.
HTML email template: FAQ
- Why do HTML emails still use tables? Several popular email clients, especially Outlook on Windows, don't support modern layout like flexbox or grid. Tables render consistently almost everywhere.
- What width should an HTML email be? About 600 to 640 pixels for desktop, with a media query that stacks content into one column on phones.
- Can I use this template in Mailchimp or Klaviyo? Yes. Import the .html in the code editor of your platform. The prompt asks for merge tags in your platform's format, like *|FNAME|* for Mailchimp or {{ first_name }} for Klaviyo.
- Can todo.is send the newsletter for me? With Google connected, it can save a Gmail draft or send a one-off email after you approve. For marketing lists, send it through your email platform so unsubscribes are handled.
JavaScript is required to use the todo.is app.