To code an HTML email that works across clients, build a readable, table-based baseline first. Make it fluid so it fits narrow screens, add media queries or other enhancements only where clients support them, and test the delivered message in the clients your audience actually uses. The realistic goal is reliable rendering and readability, not pixel-identical output everywhere. Recipients’ email clients can transform, strip or rewrite your code, and you can’t control that.
This guide gives working code patterns for each stage, explains when to choose responsive or hybrid layout, and covers CSS placement, accessibility and QA.
As an Amazon Associate I earn from qualifying purchases.
Start with a resilient baseline
Litmus recommends building a meaningful baseline for clients with limited support, then layering enhancements on top (progressive enhancement). Practically, that means the email should still be readable if every media query, web font and background image is ignored: content in logical order, text in real text (not baked into images), and links that are obviously links.
A minimal skeleton looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your email title</title>
</head>
<body style="margin:0; padding:0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px; width:100%;">
<tr>
<td style="padding:24px; font-family:Arial, sans-serif; font-size:16px; line-height:24px;">
<h1 style="margin:0 0 16px;">Hello</h1>
<p style="margin:0;">Readable even with no enhancements.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>The details that matter here: a lang attribute and a title (both feed accessibility), real headings and paragraphs, and role="presentation" on layout tables so they aren’t announced as data tables. The 600px width is a conventional choice, not a rule.
#1 Best Overall
Responsive vs. hybrid: which layout approach to use
Two patterns dominate, and Litmus’s guidance frames the choice around how clients treat media queries.
Responsive (media-query) email
You design a fixed-width desktop layout and use media queries to adjust it on small viewports. A basic Litmus-style example combines a viewport meta tag, a max-width media query, a table forced to full width, and images constrained to their container:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 600px) {
.responsive-table { width: 100% !important; }
.responsive-image { height: auto; max-width: 100% !important; }
}
</style>Litmus uses a 600-pixel breakpoint in its demonstration; treat that as an example, not a universal requirement. Nothing guarantees the same breakpoint or selectors behave identically in every client, so verify against your own audience mix. The catch: where a client ignores or strips media queries, none of this applies and users get the desktop layout.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
- Funny email developer design featuring stacked CSS style boxes and the phrase “Email Coding Is” for anyone who builds HTML email layouts.
- Perfect for HTML email coders, front end developers, email marketing teams, CRM specialists, programmers, and anyone who laughs at layout headaches.
- Dishwasher and microwave-safe for everyday convenience and easy cleanup
- Features glossy finish with accent colors on interior, handle, and rim of two-tone designs
- Perfect for morning coffee, tea, or hot cocoa at home or the office
Hybrid (fluid) email
Hybrid email makes tables and images fluid by default, so the layout adapts without depending on media queries. Because some desktop environments (notably Microsoft Outlook clients) don’t respect max-width well, hybrid builds use Microsoft conditional comments to wrap content in a fixed-width table for those clients only:
<!--[if mso]>
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
<div style="max-width:600px; margin:0 auto;">
<img src="https://example.com/hero.jpg" width="600" alt="Spring sale: 20% off"
style="display:block; width:100%; max-width:600px; height:auto; border:0;">
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->This is helpful when clients strip or ignore media queries. The cost is complexity: multi-column hybrid layouts that need to stack on small screens get harder to build and more fragile, so weigh maintenance effort alongside compatibility.
Decision table
| Question | Responsive (media queries) | Hybrid (fluid) |
|---|---|---|
| Depends on client applying media queries | Yes | Largely no |
| Small-screen text and images stay fluid | Only where queries apply | Fluid by default |
| Multi-column complexity | Simpler to reason about | Harder and more fragile |
| Needs Outlook-specific conditional code | Often less | Yes, to constrain width |
| Best fit | Audiences on clients that support queries; complex layouts | Audiences where queries may be stripped; simpler single-column designs |
Many teams combine the two: a fluid base with media-query enhancements on top, which matches the progressive-enhancement approach.
Rank #3
- Are you familiar with html5? Then get this "HTML5 HTML Logo Web Programmer Nerd Funny" featuring HTML logo. Perfect for computer programmer, developer, software developer and technician who does computer programming language, coding and gaming on internet.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
Where to put your CSS: inline, embedded or linked
CSS can be written inline on elements, in a <style> block, or in an external stylesheet. Inlining became standard because some email clients strip embedded styles or external stylesheets. An inline example:
Recommended Free Tools
<a href="https://example.com" style="color:#245; font-size:18px; font-weight:bold;">
Read the guide
</a>Embedded CSS, on the other hand, can reduce code, file size and maintenance work in clients that support it, and media queries must live in a <style> block anyway. A sensible approach:
- Put core presentation (fonts, colors, spacing, widths) inline so the baseline survives style stripping.
- Keep media queries and other enhancements in an embedded
<style>block. - Don’t rely on linked stylesheets as universally safe.
- Use an inliner in your build process rather than hand-editing, and check the output in previews.
For context on how entrenched inlining is: Litmus reported that 85.9% of surveyed marketers inline CSS in its 2018 State of Email Workflows report. That is a historical, survey-specific figure, not a current estimate. Decide based on your audience’s client mix and your test results, not blanket rules.
Rank #4
Make images and buttons behave
- Always set
alttext. Describe the purpose of the image; usealt=""for purely decorative ones. - Constrain images:
max-width:100%; height:auto;keeps them from overflowing narrow screens, and awidthattribute gives clients that ignore CSS a sensible size. - Use
display:blockandborder:0on images to avoid stray gaps and borders. - Build buttons from text links styled with padding on a table cell or the anchor, so the call to action still works with images blocked.
Accessibility in email code
Accessibility is limited by what clients preserve, but it remains the sender’s job to design for it. Use meaningful structure: headings, lists, a lang attribute, image alternatives, ARIA-related attributes where useful, visible focus states, keyboard-usable links, and support for user preferences such as reduced motion and color scheme where clients honor them.
The Email Markup Consortium’s 2026 report expanded its accessibility criteria from 20 to 37 core HTML/CSS features, including semantic elements, headings, lists, lang, image markup, ARIA attributes, focus states, reduced-motion preferences and color-scheme support. That number counts the features the report assesses; it is not a score, a percentage of accessible email, or a claim that every client supports every feature.
The same report is blunt about the ceiling: Email Markup Consortium, 2026: “Senders cannot fully work around email client limitations and produce fully accessible HTML messages.” Client software may strip or alter semantic markup. The takeaway isn’t to give up on semantics; it’s to use them, keep the content understandable when they’re lost, and test.
Best Value
- A funny HTML Developer job title design for web page builders, markup specialists, email template developers, website coders and content publishers. Perfect for anyone who writes the markup by hand and picks exactly the right tag for the job every time.
- A great design for a hardworking member of your site team which reads "Don't Panic I'm A Professional HTML Developer". When a page has to work on an ancient email reader and a new phone at once, they make both look right. Ideal gift for web coders.
- Hardcover journal with 240 line-ruled pages (120 sheets)
- Built-in elastic closure and ribbon bookmark
- Includes an expandable inner storage pocket and a pen holder
A small example combining several of these practices:
<h1 style="margin:0 0 16px; font-size:28px;">Your order has shipped</h1>
<ul style="margin:0 0 16px; padding-left:20px;">
<li>Order #1234</li>
<li>Arrives in 3–5 days</li>
</ul>
<a href="https://example.com/track" style="color:#0b3d91; text-decoration:underline;">Track your package</a>Descriptive link text (“Track your package”, not “Click here”) and sufficient color contrast cost nothing and survive in every client.
Test in the clients that matter
Even clients with strong standards support have quirks, so test the delivered message, not just the source file. Older Litmus material on HTML5/CSS3 support, such as its 2014 claim that about half the then-total market and 3 of the top 5 clients supported them, shows how quickly such figures date; don’t treat it as current share. Litmus’s own 2022 media-query guide warns that its information may not be up to date.
A practical QA workflow:
- Pull your list’s client and device breakdown from your email platform’s analytics, and rank clients by share of opens.
- Build the baseline and check it with styles and images disabled.
- Send real test messages (not just browser previews) to the top clients on desktop and mobile.
- Use a rendering-preview tool to cover additional clients and versions you can’t access directly.
- Check narrow-screen fit, image blocking, dark mode and the accessibility basics above.
- Re-test after any template change and periodically as clients update.
Look up current, feature-specific compatibility data for any specific CSS property you plan to use rather than relying on a generic support chart.
Quick Recap
Common mistakes to avoid
- Fixed-width tables and images with no fluid fallback, which overflow on mobile.
- Putting all critical styling in a
<style>block when your audience includes clients that strip it. - Assuming a breakpoint or selector from a tutorial works everywhere.
- Delivering key content only as images.
- Treating accessibility as optional because clients can strip markup.
- Choosing a complex hybrid multi-column layout without budgeting for the extra testing.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
