Coding HTML Emails: The Complete Guide
Everything you need for an email that renders the same everywhere
Mailvex · 30 August 2026 · 4 min read
Coding an email differs from coding a website enough to be a separate craft. Email clients do not support modern HTML: layout runs on tables, styles go inline, and Outlook buttons need their own code. Below is everything we covered in separate articles, with links to the detail.
Why email coding is a separate craft
The reason is that email clients evolved apart from browsers. Some use engines a decade old or more, and several strip anything from a message they consider unsafe.
The practical consequence: what looks perfect in a browser can fall apart in an inbox. Checking happens in three or four places, not one.
And one more thing: most emails are opened on phones. So designing for a wide screen and squeezing it down afterwards is the wrong order of work.
Eight rules that do not change
These values are settled by practice and barely change between projects. They work well kept in view while building.
| What | Value | Why |
|---|---|---|
| Email width | 600 pixels | fits the preview pane and a phone |
| Layout | tables, not blocks | modern layout fails in older clients |
| Styles | inline | external stylesheets get stripped |
| Text size | 16 pixels and up | below 13 the system upscales it |
| Button height | 44 minimum, 48 better | the minimum for a thumb |
| Email weight | under 100KB | beyond that mail clients clip the content |
| Padding | on table cells | otherwise some clients drop it |
| Images | with alt text | many clients do not load images |
Outlook: the main difficulty
Classic Outlook for Windows uses a word processor engine rather than a browser one. It ignores media queries, does not understand rounded corners or gradients, and buttons built the ordinary way are clickable only on the text.
The fix is separate VML code — markup only Outlook understands. Other clients ignore it, so one email works everywhere.
A separate matter is support timelines. Industry publications repeat the claim that the engine is switched off in 2026. In fact what ends is support for specific office suite releases, and classic Outlook lives considerably longer.
Dark mode
More than a quarter of emails are opened in dark mode, and clients handle it three different ways: leaving colours alone, inverting partially, or inverting completely.
You can influence this with two meta tags in the head and a media query carrying your own colours. It does not work everywhere, but where it does it gives full control.
Mobile screens
Mobile coding requires not shrinking the desktop version but the reverse order: decide how the email looks on a narrow screen first, then add the wide version.
There is a trap almost nobody writes about: an iPhone forcibly scales any font below 13 pixels while the container stays put. The text stops fitting and the layout shifts.
Email weight and clipping
Mailbox providers clip emails above a certain weight. Everything past that point, including the unsubscribe link and the tracking pixel, never reaches the recipient.
Aim not at the limit itself but at a margin: your sending platform adds its own tracking code after you finish, and a ninety-kilobyte email can cross the line.
Importing a Figma design
A Figma design does not transfer into an email directly: it uses free positioning and modern layout features that email does not have. What is needed is a structural rebuild, not an export.
Checking before you send
Run a checklist before sending: an email cannot be recalled, and a mistake in the main link destroys the whole effort.
The minimum set is opening the email on a phone, clicking every link, viewing it in dark mode and turning image loading off to confirm the point still comes across.
Where to start
Building by hand means holding all of this in your head. A builder takes the technical part over: tables, inline styles, the Outlook fallback, padding on cells and a weight counter appear automatically at compile time.
The Mailvex library holds 160 ready templates across ten industries, all built on blocks compatible with email clients.
Build an email from ready blocks.
Browse templates