Over 60% of email is read on a phone and a third in dark mode. The safe shape for an HTML email, why it is still built with tables, which interactive elements are worth the risk, and the accessibility rules that lift results for everyone.
Cyril Nie
Author
The best-performing emails are usually the simplest. Here are the rules that matter.
Over 60% of emails are opened on phones. And 64% of people will delete an email that looks broken on their phone; another 52% simply won’t engage with it. So design for the small screen first:
One column. Multi-column layouts collapse badly on phones. A single column works everywhere.
600–640 pixels wide. The safe width for every email app.
Buttons at least 44×44 pixels. Big enough for a thumb. Nothing kills clicks like a button too small to tap.
Text at least 14–16px for body, 20–22px for headlines. Below 13px, iPhones auto-zoom and break your layout.
Keep images light. Under 200KB each, under 800KB for the whole email. Slow images lose readers.
The safe email shape
At least 33% of people read email in dark mode. It can turn your design inside out: black text on black backgrounds, white boxes around logos. Use transparent PNG logos, off-white backgrounds instead of pure white, and off-black text instead of pure black. Then actually look at your email in dark mode before sending.
Every image gets alt text that says what it shows.
Strong color contrast — readable on a cheap screen in sunlight.
Links that make sense alone: “Download the report,” not “click here.”
Don’t use color alone to mean something. A red sale price also needs the word “Sale.”
About 15–20% of people have some form of disability. Designing for them makes the email better for everyone else too.
First: try removing the big hero image. Several tests show clicks go up — the email loads faster, feels more personal, and the button moves up. Second: a simple animated GIF showing the product in use earned one brand 109% more revenue than the still photo. Showing beats telling.
Websites moved on years ago. Email did not. Outlook still draws email with the same engine as Word — a word processor. Old-fashioned tables work there. Modern layouts do not. So: put your styles on each piece of the email, not in one block at the top (many apps throw that block away). Skip background images in Outlook and use a plain color instead. And build a layout that works at any width. Then look at your email in Outlook, Gmail, and Apple Mail before you send. Apple Mail shows almost everything correctly, which can fool you into thinking the rest will too.
Click-to-open rates rise by an average of 31.7% when interactive elements are included — but only in the clients that render them, which is why the ranking matters more than the average. Litmus previews across 90+ client and device combinations if you need to check.
Adding something people can play with lifts clicks by about 32%. But email apps handle these things very differently. So the golden rule is simple: build the plain version first. Then add the extra for the apps that can show it.
| Element | Lift | Support |
|---|---|---|
| Animated GIF | 5–8% | Everywhere. Some Outlooks show only the first frame, so make it a good one |
| Hover effects | 5–10% | Wide. Nothing breaks when it is ignored |
| Countdown timer | Varies | Everywhere, because it is really just an image. Use it only for real deadlines |
| One-question poll | 15–20% clicks | Mixed. Fall back to a plain link |
| Collapsible sections | 10–15% | Not in Gmail on the web or Outlook. Show it all open there |
| Full interactive (AMP) | 20–30% | Gmail and Yahoo only, and you have to sign up. Rarely worth it yet |
One warning about timers. If your sale quietly gets extended after the clock hits zero, people learn to ignore every deadline you ever set.
Once you send more than a couple of kinds of email, stop designing each one. Start building from parts. First write down your basics: two or three colors, one font, one button shape, spacing in steps of 8 pixels. Then build the parts once — header, big image, text block, product card, button, footer — each one already working on phones, in dark mode, and with alt text. Then put the parts together into starting points: promo, newsletter, welcome, cart reminder.
Building the full set takes real time — 40 to 60 hours. It pays you back by turning a three-hour email into a 30-minute one that always looks like you. Too big for now? Build one good template instead. That covers most of it. Also pick the right tool for the job. Drag-and-drop builders are 3–5 times faster for a one-off email. Hand-built templates are worth it for the flows that will run for years.
600 to 640 pixels, laid out as a single column. Over 60 percent of opens happen on a phone, and multi-column layouts either shrink to unreadable or reflow unpredictably across the inconsistent rendering engines email clients use.
Because major email clients, Outlook on Windows in particular, use rendering engines that predate modern CSS layout. Flexbox and grid are unreliable, so nested tables remain the only layout method that behaves consistently across the inbox landscape.
Test in it, because several clients invert colors automatically and without asking. Use logos and images that read on both light and dark backgrounds, avoid pure white or pure black backgrounds, and never rely on a transparent PNG with dark artwork.
Discover more insights on similar topics
The complete 2026 guide to email marketing: 16 chapters on list growth, segmentation, automation, deliverability, testing, attribution and AI. Built from 908 sources and 4,798 insights.
Email returns about $36 for every $1 spent — roughly 30 times the next best channel. Here is why it keeps winning, and the six parts every working program is built from.
Apple inflates open rates and Gmail’s scanners click your links. Here are the email metrics that survive scrutiny, the thresholds worth holding yourself to, and why your own last 90 days beat any industry average.