Email Layout: Structure for Engagement and Deliverability

Email layout is where the technical constraints of email rendering meet the design needs of recipient engagement. The constraints are real — Outlook desktop uses Word's rendering engine, Gmail clips emails over 102KB, mobile devices show only the first 480px wide. The design needs are also real — recipients need to understand and act on the email in under 10 seconds.

The cluster around email outline, marketing email templates free, and promotional email design includes both buyers shopping for templates and senders trying to understand what good layout looks like. This guide covers the layout patterns that work across clients and the ones that break.

The Five Layout Constraints

Every email layout decision works within these:

1. Mobile-first — 50%+ of opens are mobile (375-480px wide)
2. Outlook desktop compatibility — Word rendering engine, no flexbox/grid, limited CSS
3. Gmail 102KB clipping — HTML over this threshold gets truncated
4. Dark mode rendering — colors invert in dark mode contexts unpredictably
5. Disabled images — many clients block images by default until user action

Designs that ignore these break in some recipients' inboxes. Designs that respect them work for everyone.

The Standard Layout

For most marketing email, the pattern that works:

[Preheader text — invisible but in preview]

[Header — small logo, ~150px wide max]

[Optional hero image — full width 600px max]

[Headline — large, scannable]

[Body paragraph — 2-3 sentences]
[Body paragraph — 2-3 sentences]

[PRIMARY CTA BUTTON]

[Optional secondary content blocks]

[Footer]
  Brand name
  Physical address
  Unsubscribe | Manage preferences | View in browser

Single column. Width 600px (480px for tighter mobile compatibility). Centered on desktop, full-width on mobile.

Mobile-First Specifics

Design for 375px-wide screens first, then enhance for desktop.

Mobile requirements:

• Body font 14px minimum, 16px ideal
• Header font 20-24px (smaller than you'd think on desktop)
• Tap targets 44px high (Apple HIG standard)
• Buttons span full width on mobile or near-full
• Single column always
• No horizontal scrolling
• Sufficient line height (1.4-1.6x font size)

Test in actual mobile clients, not just browser preview. iOS Mail and Android Gmail render differently from desktop browsers.

Outlook Desktop Compatibility

Outlook 2016, 2019, 2021, 365 desktop all use the Word rendering engine. What breaks:

• Flexbox and grid (use tables for layout)
• CSS3 features (transforms, transitions, animations)
• Background images on most elements (works only in specific cases with VML)
• Media queries (partial support, inconsistent)
• Custom fonts (use fallback fonts)
• Modern button styles (use VML buttons for Outlook)
• Webfonts via @import or external link

What works:

• Table-based layouts
• Inline CSS
• MSO conditional comments for Outlook-specific markup
• VML for rounded buttons and special graphics
• Web-safe fonts (Arial, Helvetica, Verdana, Georgia, Tahoma)

Most modern template builders (Beefree, Stripo, MJML, Maizzle) handle Outlook compatibility automatically. If you're hand-coding, MJML compiles to bulletproof Outlook-safe HTML.

<!--[if mso]>
  <table align="center" width="600">
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;">
  <!-- email content -->
</div>
<!--[if mso]>
  </table>
<![endif]-->

The pattern above gives Outlook a table for centering and other clients the div.

102KB Gmail Clipping

Gmail clips email HTML over 102KB. Above the threshold, recipients see a "View entire message" link. The clipped portion isn't rendered — your unsubscribe link, footer, and tracking pixel may be hidden.

To stay under:

• Don't inline all CSS into every element (MJML or Premailer inline only what's needed)
• Avoid base64-encoded images (use hosted images)
• Trim long auto-generated header comments
• Skip framework cruft (Bootstrap-for-email is overkill)
• Minify HTML for production sends

Most well-designed emails are 50-80KB. If yours is bigger, audit what's bloating.

Practitioner note: I see clipped emails most often in ecommerce sends with large product grids. 20 product cards each with inlined styles balloons HTML quickly. Use a tighter product card template, reduce cards per email, or paginate the email content with "View all products" links.

Dark Mode Considerations

Apple Mail, Outlook, and Gmail's mobile apps invert email colors in dark mode by default. The inversion is unpredictable — light backgrounds become dark, but text colors may or may not invert, images stay original.

Patterns to consider:

• Use transparent PNGs for logos (avoid white-background logos that look weird on dark)
• Provide light/dark variants for critical brand assets
• Test in actual dark mode (iOS Mail dark, Outlook dark)
• Use color: #000 sparingly — explicit black may stay black on dark backgrounds
• Use color: #333 or #555 — gets remapped more cleanly

The @media (prefers-color-scheme: dark) query works in some clients (Apple Mail) but not all. Don't rely on it as the only fallback.

See dark mode email design for deeper coverage.

The F-Pattern

Most recipients scan email in an F-pattern:

[========HEADLINE========]
[--------]                
[image]   [SHORT BODY]
[--------]
[BIGGER TEXT]
[--------]
[CTA BUTTON]

Read across the top (headline), down the left, glance at images, then scan to the CTA. Layout that supports this F-pattern engages; layout that breaks it loses readers.

Practically:

• Headline at top, full width
• Most important content in the first paragraph
• CTA button on the left or centered (not buried bottom-right)
• Secondary content below the fold

Multi-Column Layouts

Avoid two-column or three-column layouts in marketing email. Reasons:

• Collapses awkwardly on mobile (still breaks in some clients)
• Breaks in Outlook desktop
• Confuses scan pattern
• Adds HTML weight

Exception: footer with social icons or "View on web" + "Forward" links. Single-row multi-column is fine for footer use.

For complex newsletter content (e.g., "3 stories this week"), use sequential single-column sections, not side-by-side columns.

CTAs and Buttons

Primary CTAs work best as:

• Single button, above fold (within first 480px of mobile)
• Bold contrasting color (not too close to background)
• Specific text describing the action ("Get my report" not "Click here")
• 44px minimum height for mobile tap target
• 8-16px padding
• Rounded corners (4-8px) for modern look

For Outlook compatibility, use VML buttons or buttons with mso-padding-alt for proper rendering.

Multiple CTAs of equal weight kill conversion. Pick one. Secondary actions can be links below.

Footer Layout

The footer is required content (unsubscribe, address) but shouldn't be the visual focus.

Good footer:

• Brand name and physical address
• Unsubscribe link, clearly visible
• "Manage preferences" if you have a center
• "View in browser" link
• Optional: social icons in a single row

Bad footer:

• 200 words of legal copy
• Multiple stacked logos
• Multiple call-out boxes ("Follow us!" "Refer a friend!" "Download our app!")
• Unsubscribe in 8pt gray on white

Recipients who can't find unsubscribe hit "Report Spam." See how to unsubscribe from emails (sender view).

Image Strategy

Images add visual interest but are a deliverability and rendering risk:

• Every image needs descriptive alt text (accessibility + filter signal)
• Explicit width and height attributes (prevents layout shift, helps Outlook)
• Hosted on CDN with proper caching headers
• Optimized file size (~50-200KB per image max)
• Backup colors for image-blocked rendering
• No critical content as image-only (text in image is invisible to screen readers and broken when blocked)

Image-to-text ratio target: at least 60% text by visible area. See image to text ratio.

Practitioner note: All-image emails (a single image taking up the entire email) are common in retail and almost always go to Promotions or spam. Always include real text content. Even if the design "needs" to look like a magazine ad, add a text-based intro paragraph and footer at minimum.

Layout Testing

Before launching:

1. Send to Gmail web (most common reader)
2. Open on iPhone Mail and Android Gmail
3. Open on Outlook desktop (worst case)
4. Test rendering with Litmus, Email on Acid, or PutsMail. See email testing services.
5. View with images disabled
6. Check dark mode rendering
7. Verify HTML size is under 102KB

If you need help building email templates with layouts that render correctly across clients and pass filters, book a consultation. I do template audits and layout optimization for senders shipping marketing email at scale.

Sources

• MJML Documentation
• Litmus Email Client Rendering
• Apple Mail Sender Guidelines
• Microsoft Outlook Conditional Comments
• Gmail Sender Guidelines
• W3C Email Accessibility

---

v1.0 · May 2026