If you are deciding on email design size, the most practical baseline is:
- Template width:
desktop-first layout - Safe body length: prioritize key content in the first
- Message weight: keep full HTML email under roughly
to reduce clipping risk in Gmail
The goal is not one perfect dimension. The goal is predictable rendering, readable hierarchy, and fast load across clients.
Quick reference: recommended email template dimensions
| Element | Recommended baseline | Notes |
|---|---|---|
| Template width | | Most reliable desktop width for major clients |
| Mobile behavior | fluid to | Use responsive CSS and stacked layout |
| Header height | | Keep branding visible but compact |
| Hero image width | | Optimize compression before send |
| Body section depth | | Break long sections for scanability |
| Full email file size | ideally | Reduces clipping and payload delays |
Why email size still matters
Email clients are inconsistent. A template that looks fine in one client can break in another because of:
- CSS support differences
- image scaling behavior
- clipping thresholds and loading constraints
- dark mode and accessibility transformations
Sizing decisions directly affect click-throughs because users decide in seconds whether they can parse the message.
Email width: why
is still the safest default for broad compatibility.
Wider layouts can work, but they increase risk in constrained clients and create horizontal-scroll edge cases. If you run a wider design system, keep the real content column close to and use background fills around it.
Email height: design for scanning, not infinite scroll
There is no universal hard height limit, but long messages underperform when the hierarchy is weak.
Use a modular structure:
- Top section: outcome + CTA (first
) - Mid section: proof and details
- Lower section: optional context, legal, and preference links
For promotional sends, avoid pushing critical content below an oversized hero block.
File-weight limits and Gmail clipping
The practical constraint many teams miss is total email payload size, not visual height.
When emails become too heavy, Gmail can clip the message. That can hide legal text, footer links, and unsubscribe controls if not handled properly.
To stay efficient:
- remove unused HTML wrappers and comments
- simplify nested table structures where possible
- compress images aggressively
- inline only critical CSS
- avoid bloated template fragments copied from legacy builders
Header, body, and footer sizing guidance
Header
Keep headers concise so users reach message intent quickly. Over-designed headers often reduce engagement on mobile.
Body
Use short sections with clear spacing and one primary action per block.
Footer
Include legal and preference controls, but keep layout clean and readable. Dense footers increase cognitive load and risk hidden controls in clipped messages.
Transactional vs marketing emails: size strategy differences
Transactional emails should be compact and action-focused. Marketing campaigns can be longer, but each section still needs a clear purpose.
If the campaign is long, treat it like multiple short modules, each with its own mini goal and supporting CTA.
Email design quality checklist before release
- Validate client rendering in email client testing.
- Run full pre-send checks in campaign testing.
- Verify support behavior with the email compatibility table.
- Confirm payload and content assertions in Email Sandbox.
- Cross-check broader guidance with email size limits.
Common template-size mistakes
- Designing desktop-first without testing mobile hierarchy
- Treating image dimensions as the only “size” variable
- Shipping oversized HTML with repeated boilerplate blocks
- Hiding key CTA content below large top artwork
Final take
The best email template size is the one that renders reliably, communicates quickly, and stays lightweight.
Start with width, keep high-value content above the fold, control payload size, and make sizing checks part of your release workflow rather than a one-off design decision.