Costs
Part of A field guide to email design that survives every inbox
Design practices that keep email layouts from breaking on mobile
Email design practices that keep layouts from breaking on mobile: the viewport tag, a stacking media query, Outlook conditional comments, Gmail's 102 KB clipping limit, dark mode, preheaders and testing tools.
What to take away
- Add a viewport meta tag, build one fluid column, and stack columns with a 600px media query.
- Wrap Outlook desktop layouts in conditional comments, and keep each message's HTML small, around 102 KB, the clipping point that third-party tests report for Gmail.
- Test in Gmail app, Apple Mail and Outlook at 320, 375 and 414 CSS pixels, with dark mode on and images blocked.
Email design best practices create messages that stay readable on a phone and in every client that opens them. Most mobile breakage has three causes: a missing viewport tag, fixed-width tables, and Outlook desktop ignoring modern CSS. The techniques below address each cause directly.
Start with the viewport tag and one column
Put <meta name="viewport" content="width=device-width, initial-scale=1"> in the head of the message. Without it, many phones render the email at desktop width and shrink it, so text becomes unreadable. Build one column, and set the outer table to width="100%" with max-width:600px. Mark layout tables with role="presentation".
Step sequence:
- Add the viewport meta tag in the head.
- Set the outer table to
width="100%"andmax-width:600px. - Add a media query
@media (max-width:600px){ .stack { display:block; width:100% !important; } }. - Test at 320px, 375px and 414px wide.
For example, two 300px columns side by side need 600px of width. On a 360px phone they overflow and force horizontal scrolling. With the stack class, the media query turns each column into a full-width block that fits the screen.
Use fluid-hybrid tables and conditional comments for Outlook
Outlook desktop for Windows renders email with the Word engine, and it ignores max-width on many elements. The fluid-hybrid technique wraps the 600px layout in a fixed-width table inside <!--[if mso]> conditional comments. Other clients read the max-width version, while Outlook reads the fixed width, which stops the layout collapsing into a narrow column.
Buttons need the same care. Rounded buttons for Outlook use VML shapes inside <!--[if mso]> blocks, while other clients use a padded link styled as a button. Background images also need VML in Outlook, so a plain CSS background can disappear there.
Keep the message under the reported Gmail clipping limit
Gmail is widely reported to clip any message whose HTML is larger than about 102 KB and to show a "View entire message" link instead. Google does not publish that figure, so test each template. Everything after the clip, including the unsubscribe link at the bottom, stays hidden until the reader taps through. Check the HTML size of each template before sending, trim unused inline CSS, and keep the unsubscribe link and material terms high in the message.
Handle dark mode on purpose
Apple Mail and iOS Mail apply @media (prefers-color-scheme: dark) overrides, so a dark background can replace light colors. Gmail app and Outlook invert colors on their own. Give logos a transparent background or a light backing shape, set explicit text colors on every block, and check each client in both themes.
Preserve the preheader and live text
Preview text appears beside the subject in the inbox. Add a hidden preheader of about one line, using display:none and max-height:0, so the reader sees a sentence that matches the subject rather than the first link in the body. Keep the sender, offer, price, deadline and unsubscribe as live text, not inside images, so they survive blocked images.
Test in the clients people actually use
Test Gmail app, Apple Mail on iPhone, Gmail on Android, and Outlook desktop for Windows. Preview tools such as Litmus and Email on Acid render one upload across many clients. Can I Email (caniemail.com) lists which CSS properties each client supports, so check it before using flexbox or grid in a template.
Test at 320px, 375px and 414px widths, with images blocked, with text zoomed larger, and with the dark theme on. Record which client breaks and which line causes it, then fix that line rather than adding a general override. Start with the email design questions worth asking.
Control shared modules
A shared module spreads a layout fault to every template that uses it. Version each module, name an owner, and run the test set above before a change goes out. Keep the previous version available so a broken module can be rolled back in one step.
Measure task completion, errors and support contacts after a template has been live long enough to collect data. Equivalent meaning and action matter more than pixel-perfect sameness across clients.
Best-practice evidence map
| Practice | Evidence | Owner action |
|---|---|---|
| Order | Linearized message | Correct structure |
| Resilience | Failure-state matrix | Preserve task |
| Variation | Extreme content samples | Bound or reflow |
| Module | Owner and test record | Approve or retire |
Common questions
What makes an email design resilient?
Meaning, identity, structure, action, and help remain available across relevant clients, devices, themes, data states, image conditions, accessibility settings, and destinations.
Should every email use the same module system?
Use shared modules where requirements align, but allow governed variants for different tasks, risks, languages, content, and accessibility needs.
Can best practices replace testing?
No. They guide design decisions. Production-like tests reveal whether the actual code, content, data, client, device, and destination work together.
