Email Newsletter HTML Template 2026

Email HTML — Different Rules From Web HTML

Email HTML is a different discipline from web HTML. CSS Grid and Flexbox are unsupported in Outlook. External stylesheets are stripped. Many email clients block images by default. Media queries work in some clients but not others. The safe path is table-based layout with inline CSS — the same approach email has used since 1999, still required in 2026 because Outlook's rendering engine has not been updated in over a decade. UIXDraft email templates are pre-tested across Gmail, Outlook 2019/365, Apple Mail, and iOS Mail.

Layout

Table-Based Email Layout

All layout built with HTML tables — not divs. Each section is a table row. Multi-column layouts use nested tables. Max-width 600px — the standard email width that renders without horizontal scroll in all major clients. A single-column fallback for mobile: the outer table collapses to 100% width, all columns stack. Inline CSS on every element — no external stylesheets, no head CSS (stripped by Gmail). Background colours on td elements, not div elements — Outlook renders td backgrounds, not div backgrounds.

Dark

Dark Mode Email Support

Apple Mail, iOS Mail, and Outlook 2019+ invert or recolour emails in dark mode. Protection: use @media (prefers-color-scheme:dark) with !important overrides in the head style block (Apple Mail respects head CSS). Set explicit background colours on all tables and cells — emails without explicit backgrounds get inverted by dark mode clients. Use transparent PNGs for logos so they display correctly on any background. Test in dark mode using Email on Acid or Litmus before sending.

Blocks

Modular Content Blocks

Header (logo + nav links), hero (headline + image + CTA button), feature row (icon + text, 2 or 3 column), article cards (thumbnail + title + excerpt + read more link), testimonial block, product showcase, divider, social links footer, unsubscribe footer. Modular blocks are copy-pasted to build different email layouts — a product launch email uses hero + product showcase + CTA. A newsletter uses header + article cards × 3 + footer. Mix and match without re-coding the entire template.

CTA

Bulletproof CTA Buttons

The VML bulletproof button: a table cell with a background colour and a link, wrapped in Outlook conditional VML. This renders as a solid background-colour button in Outlook (which ignores CSS background-color on anchor tags) while showing the standard CSS button in all other clients. The button is the highest-value element in any marketing email — a button that fails to render in Outlook for 30% of recipients is a significant conversion loss. Always use bulletproof buttons in transactional and promotional emails.

Email Client Compatibility Checklist

Gmail (web, iOS, Android): supports limited CSS, no head styles, no media queries
Outlook 2016/2019/365 (Windows): renders with Word engine — use VML for backgrounds and buttons
Apple Mail (macOS, iOS): best CSS support — dark mode, media queries, web fonts
Samsung Mail: supports media queries, limited CSS Grid
Yahoo Mail: strips head CSS, supports inline styles
Preheader text: 40–90 chars visible in inbox preview — add as hidden span after body open
Alt text on all images — 40–60% of recipients view emails with images disabled
Plain text version — required by spam filters and improves deliverability

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I code an HTML email newsletter from scratch?

Use tables for all layout — not divs. Set the email to max-width:600px in a wrapping table. Apply all CSS inline (use an inliner tool like Juice before sending). Use td background-color for section backgrounds. Images: hosted on a CDN with absolute URLs, alt text on every img. CTA button: bulletproof VML button for Outlook support. Test in Litmus or Email on Acid across Gmail, Outlook, and Apple Mail before sending. The UIXDraft email templates are pre-inlined and pre-tested — edit the content and send.

Why does my HTML email look broken in Outlook?

Outlook uses Microsoft Word's rendering engine — not a browser. Word does not support: CSS background-image, border-radius, CSS buttons, max-width on tables, CSS Grid, Flexbox, or web fonts. Fix: use VML for background images and buttons, use tables for layout, set all widths as HTML attributes (not CSS), use border='0' cellpadding='0' cellspacing='0' on all tables. For border-radius: use a PNG image for the button. For background images: use a VML conditional comment wrapping the section.

How do I add dark mode support to an HTML email?

In the head style block: @media (prefers-color-scheme:dark) { .email-bg { background-color:#0d1117 !important; } .email-body { background-color:#1a1f2e !important; } .email-text { color:#f1f5f9 !important; } }. Add class='email-bg' to relevant tables and td elements. Apple Mail and iOS Mail respect these overrides. Outlook 2019+ has its own dark mode detection — test separately. Use data-ogsc and [data-ogsc] selectors for Outlook.com dark mode support. Always test in dark mode before sending — colour inversions can make text unreadable.

What is preheader text in an email and how do I add it?

Preheader text is the preview line visible in the inbox below the subject line — 40–90 characters shown by most email clients. Add it as a hidden span immediately after the body opening tag: . The zero-width non-joiner and non-breaking space characters prevent email clients from pulling other content into the preview. The preheader is shown in the inbox even though it is invisible in the email body.

How many email newsletter HTML templates are in UIXDraft?

UIXDraft includes 180+ HTML/CSS templates including email-optimized designs: modular content blocks, bulletproof buttons, dark mode support, and table-based layouts compatible with Gmail, Outlook, and Apple Mail. One $35 purchase, commercial licence.

HTML Templates for Email Newsletters