Most email template design problems are not creative problems. They are structural ones. A layout that looks perfect in your builder preview can collapse in Outlook, stretch awkwardly in Gmail on Android, invert into an unreadable mess in dark mode, or show up as a stack of grey boxes when images are blocked.
This guide covers the eight layout rules that decide whether your email survives real inboxes. They are design rules, not tool rules, so they apply whether you build in Mailchimp, Klaviyo, Brevo, HubSpot, Beefree, or hand-coded HTML. For each rule you will also find the rendering failure it prevents and how to fix it if you have already shipped a broken template.
Why Email Rendering Breaks in the First Place
Web design and email template design are different disciplines. A browser renders modern CSS consistently. Email clients do not. Your email may be parsed by Apple Mail (WebKit), Gmail (which strips styles and ignores much of your head), Outlook on Windows (which still renders through Microsoft Word’s HTML engine), Yahoo, Samsung Mail, Superhuman, and a long tail of mobile apps that each apply their own rules.
That means three constraints shape every decision below:
- Layout support is limited. Flexbox and CSS Grid are unreliable. Tables and stacked blocks are still the safe foundation.
- Styles get stripped or overridden. Gmail ignores much of what lives outside the body. Dark mode engines rewrite your colours without asking.
- The reading context is hostile. Roughly half of opens happen on a phone, often one-handed, often in a preview pane a few hundred pixels wide.
Design for the worst client, not the best one. Everything else becomes an upgrade.
Rule 1: Default to a Single-Column Layout
Single column is the most reliable structure in email. It stacks naturally, needs no media queries to survive, and reads cleanly at any width. Multi-column layouts depend on either media queries (which Gmail on Android partially honours and some clients ignore) or hybrid ghost table techniques for Outlook.
When multi-column is acceptable
- Product grids of two columns maximum, with each cell at least 260px wide.
- Icon plus text rows where the icon is small and the text can wrap under it without looking broken.
- Footer link groups, where a stacked fallback is still perfectly readable.
Three or four columns of content on desktop almost always produce 90px-wide slivers of text somewhere. If you need a grid, build it as repeated two-column rows instead of one wide row.
The common failure
Columns that refuse to stack in Outlook or Gmail app, producing squashed text and cropped images. The fix is to use table-based columns with fixed pixel widths, then use a media query to force each cell to width:100%; display:block; below 600px, and accept that Outlook desktop will keep the side-by-side view (which is fine, because Outlook desktop is wide).
Rule 2: Respect Safe Width Limits
The industry standard container width is 600px, and it remains the safest choice in 2026. It fits Outlook’s reading pane, most webmail viewports, and scales down cleanly on mobile.
| Element | Safe value | Why |
|---|---|---|
| Main container | 600px (640px maximum) | Fits reading panes without horizontal scroll |
| Content area after padding | 520 to 560px | Leaves 20 to 40px of breathing room each side |
| Smallest target viewport | 320px | Older and compact phones, split-screen views |
| Full-width images | 1200px exported, 600px displayed | Crisp on retina screens without huge file size |
| Line length | 50 to 75 characters | Comfortable reading rhythm |
Always set the width in pixels on the table, plus max-width in CSS, plus width="100%" on the inner cells. Belt and braces, because different clients honour different attributes.
The common failure
A single oversized image or a long unbreakable string (a tracking URL pasted as visible text) forces horizontal scrolling on mobile. Fix images with style="width:100%;max-width:600px;height:auto;display:block;" and never paste raw URLs as body text.
Rule 3: Build a Font Stack That Degrades Gracefully
Web fonts work in Apple Mail, iOS Mail and a few others. They do not work in Gmail, Outlook Windows, or most Android clients. So your brand font is a bonus layer, never the foundation.
A reliable stack
Declare the branded font first, then a system stack, then a generic family:
font-family: 'YourBrandFont', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
Test how your layout looks with the fallback rendered, not the brand font. If your headline only fits on one line in your custom condensed typeface but wraps to three lines in Arial, your design is fragile.
Sizing that stays readable
- Body copy: 16px minimum. iOS auto-enlarges anything below roughly 13px, which breaks layouts.
- Headlines: 24 to 32px on mobile, 28 to 40px on desktop.
- Line height: 1.4 to 1.6 for paragraphs, 1.2 to 1.3 for headlines.
- Legal and footer text: 12 to 13px, never smaller, and never light grey on white.
Apply font styles inline on every text element, including table cells. Outlook in particular will fall back to Times New Roman in any cell you forget. Anyone digging further should read Free Email Templates for Marketing & Ecommerce.
Rule 4: Size Buttons for Thumbs, Not Cursors
A button that works on a desktop trackpad can be a frustrating target on a phone held in one hand. Accessibility guidance points to a minimum touch target of 44 x 44 pixels, and in practice a comfortable email CTA is larger.
Button specifications that work everywhere
- Height: 48 to 56px total, achieved through padding rather than a fixed height.
- Padding: 14 to 18px vertical, 28 to 40px horizontal.
- Width on mobile: full width or near full width for the primary CTA, with 20px of margin each side.
- Spacing between stacked buttons: at least 12px so a thumb does not hit the wrong one.
- Label: 2 to 4 words, sentence case, action first (“Book a demo” beats “Click here”).
Build bulletproof, not image-based
Never use an image as your only CTA. Build the button with a table cell that carries the background colour, border radius and padding, with an anchor tag inside carrying the text colour and display block. This keeps the button visible when images are off, keeps text selectable, and lets dark mode treat it sensibly.
For Outlook desktop, wrap the button in VML or use a solid rectangular shape, since border radius is ignored there. A square button in Outlook is far better than a broken one.
Rule 5: Design for Images Off
Plenty of corporate clients and privacy-conscious users still block images by default, and some preview panes load them late. Your email needs to communicate its core message with zero images rendered.
The image-off checklist
- Never put critical copy inside an image. Headlines, offers, dates and CTAs belong in live HTML text.
- Write real alt text. Descriptive, not “header-image-final-v3.jpg”. Style it too, with font-size, colour and font-weight, so the placeholder looks intentional.
- Set background colours behind images. If a hero image fails, a branded coloured block reads better than white space.
- Specify width and height attributes. This stops the layout collapsing before images load.
- Keep the logo small. A blocked 600px logo image leaves a giant hole at the top of the email.
- Add
display:block;andborder:0;to every image to kill the mysterious gaps and blue link borders that some clients add.
The common failure
An email that is one big JPEG. It scores poorly for accessibility, is invisible with images off, is often flagged by spam filters for a poor text to image ratio, and cannot be adjusted without redesigning the whole asset. If you must use a large graphic, pair it with an HTML headline and an HTML button underneath. The piece Really Good Emails makes a good next read.
Rule 6: Handle Dark Mode Deliberately
Dark mode is no longer a niche setting. Email clients handle it in three different ways, and knowing which one you are dealing with explains most of the weirdness you see in testing.
| Behaviour | Typical clients | What it means for you |
|---|---|---|
| No change | Apple Mail (light designs often preserved), several webmail clients | Your design ships as built |
| Partial colour inversion | Gmail app, Outlook.com | Light backgrounds darken, dark text lightens, mid-tones stay put |
| Full inversion | Outlook Windows dark mode, some Android clients | Nearly every colour is rewritten, including brand colours |
Practical dark mode rules
- Avoid pure white and pure black. Use #FFFFFF sparingly; near-white and near-black tones invert more predictably.
- Use transparent PNG logos with a light stroke or outline so a dark logo stays visible on a dark background.
- Do not place dark text on a light image. If the image stays light and the text inverts to white, it disappears.
- Give buttons enough contrast in both modes. A mid-tone brand colour with white text usually survives inversion better than a pale button.
- Add the meta tags
color-schemeandsupported-color-schemesset tolight dark, then use@media (prefers-color-scheme: dark)for clients that honour it. - Test a dark-first design. Some brands now build the email dark by default, which reduces surprises considerably.
Rule 7: Use Padding, Not Empty Rows, for Spacing
Spacing is where drag-and-drop builders quietly create fragile templates. Stacked empty rows and <br> tags collapse differently across clients, so what looks like a balanced 32px gap on your screen becomes 8px in one inbox and 60px in another.
A spacing system that holds
- Apply padding on table cells, not margins on divs. Margin support is inconsistent.
- Use a simple scale: 8, 16, 24, 32, 48px. Consistency reads as craft.
- Keep at least 20px of horizontal padding inside the 600px container on mobile.
- Separate sections with a background colour change or a 1px rule rather than a large void.
- Put more space above a heading than below it, so the heading visually belongs to the text it introduces.
Modular design pays off here. Build a small library of blocks (hero, text, two-column product, single CTA, quote, footer) with fixed internal padding, then assemble campaigns from those blocks. It keeps every email consistent and drastically cuts build time.
Rule 8: Design the Preview, Not Just the Email
The first design decision a subscriber sees is not your hero image. It is the line of text in the inbox list. Treat the top 200 pixels of your email as part of the layout.
What to control
- Preheader text: 40 to 90 characters, hidden with a preheader snippet, extending the subject line rather than repeating it.
- Hidden spacer characters: add zero-width spaces after the preheader so the client does not pull in your navigation links or “View in browser”.
- The first visible block: lead with the message, not a 400px-tall logo bar. Put the primary value proposition above the fold on a 375px-wide screen.
- One primary CTA near the top, repeated at the bottom for longer emails.
Common Rendering Failures and Their Fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| Thin white gaps under images | Images treated as inline text elements | Add display:block and vertical-align:middle to every image |
| Blue underlined dates and phone numbers on iOS | Automatic data detection | Wrap them in a styled link or add an x-apple-data-detectors override |
| Font falls back to Times New Roman in Outlook | Missing inline font-family on a table cell | Declare font styles inline on every td and text tag |
| Button corners look square in Outlook | Border radius unsupported | Use VML roundrect fallback, or accept square corners there |
| Email is clipped with a “View entire message” link | HTML exceeds Gmail’s roughly 102KB limit | Trim comments, unused CSS, redundant nested tables |
| Logo invisible in dark mode | Dark logo on a transparent background that inverted | Use a light-outlined version or swap via prefers-color-scheme |
| Background colour missing in Outlook | CSS background on a div | Use the bgcolor attribute on the table or td |
| Text too small to read on mobile | Desktop-first sizing | Set 16px body copy as the base, scale up for desktop if needed |
How These Rules Translate Into Your Builder
The same structural principles apply regardless of platform, but the controls have different names.
| Rule | Drag-and-drop builder | Hand-coded HTML |
|---|---|---|
| Container width | Set the template or body width to 600px in global styles | Outer 100% table with a 600px inner table |
| Spacing | Use block padding settings, avoid empty spacer blocks | Cell padding on td elements |
| Buttons | Use the native button block, set padding and full width on mobile | Table cell with bgcolor plus an anchor with display:block |
| Fonts | Pick a system-safe font in global styles | Inline font stack on every text element |
| Dark mode | Choose near-neutral backgrounds, transparent logos with outlines | color-scheme meta tags plus prefers-color-scheme media query |
Pre-Send Checklist
- Container is 600px wide with a mobile-safe fallback down to 320px.
- Layout is single column, or two columns that stack cleanly.
- Body copy is 16px or larger with 1.4 to 1.6 line height.
- Every text element carries an inline font stack.
- Primary CTA is at least 44px tall with generous padding and clear contrast.
- All images have alt text, width, height,
display:blockandborder:0. - The email still makes sense and still converts with images blocked.
- Dark mode checked in Gmail app, Apple Mail and Outlook.
- HTML size under roughly 100KB to avoid Gmail clipping.
- Preheader written, hidden, and padded with zero-width spaces.
- All links tested, including the unsubscribe link and the view-in-browser link.
- Plain text version generated and reviewed.
Test Before You Trust the Preview
Builder previews are approximations. Before any broadcast, send a seed test to a real Gmail account on Android, a real iPhone, Outlook on Windows, and at least one webmail client, with dark mode enabled on half of them. Rendering tools such as Litmus or Email on Acid speed this up, but a two-minute manual check on your own phone catches most disasters.
Get the structure right once and every campaign after that becomes faster, more accessible and more consistent. That is the real return on good email template design: not a prettier hero image, but a layout that never surprises you.
Frequently Asked Questions
How do you design an email template?
Start with a 600px single-column container, define a spacing scale and a system-safe font stack, then build reusable blocks for the hero, text, CTA and footer. Add content in order of importance, keep critical copy as live HTML text rather than images, size buttons for thumbs, and finish by testing in Gmail, Apple Mail and Outlook in both light and dark mode.
What is the best width for an email template?
600 pixels is the safest standard. Some brands push to 640px, but beyond that you risk horizontal scrolling in narrow reading panes. Inside the container, keep the actual content area between 520 and 560px after padding.
Where can I find free email design templates?
Stripo, Beefree, Canva and Figma community files all offer free starting points, and Really Good Emails is useful for inspiration rather than code. Whichever you choose, audit it against the rules above, because plenty of free templates still rely on fixed-width images or image-only CTAs that break in real inboxes.
Why does my email look different in Outlook?
Outlook for Windows renders HTML through Microsoft Word’s engine, which ignores border radius, background images on divs, and much modern CSS. Use table-based layouts, the bgcolor attribute, inline styles, and VML fallbacks for rounded buttons.
Should I design my email in dark mode or light mode first?
Design in light mode first, then check every element in dark mode and adjust the colours that invert badly. If your audience skews heavily toward mobile Gmail or Apple Mail users, a dark-first design can actually be more predictable, since fewer colours get rewritten.
How long should an email template be?
Long enough to land one message and one action. For most campaigns that means a hero, two to four short content blocks, and a repeated CTA. Keep the HTML file under roughly 100KB so Gmail does not clip the message and hide your footer.
Do I need a mobile version of my email template?
You do not need a separate version. A single-column responsive template with fluid images, 16px text and full-width buttons below 600px handles both desktop and mobile correctly, which is exactly why single column remains the default recommendation.