New format
HTML email layout: keep it predictable
A polished Figma mock doesn’t guarantee the same look in Gmail, Yandex Mail, Apple Mail, and Outlook. Clients strip CSS differently, so email layout plays by its own rules.
Below: what broken layout costs, the basic code structure, content limits, and how to test. Treat 2019 DOCTYPE tips as historical and match them against your ESP’s current templates.
What breaks an email
Different looks across clients, horizontal scroll on mobile, missing blocks, a mangled Outlook render, heavy images and slow load — the usual cost of ignoring email limits.
Interactivity and complex animation often never arrive. Get a readable frame and CTA right first, then decorate.
Structure and code
The frame is tables with fixed or fluid width (often ~600px for the desktop column). Nested tables for modules beat complex floats.
Spell out CSS where clients fuss (longhand margins instead of shorthand); put critical styles inline. Background images and rare properties need a separate Outlook check.
Valid, simple markup beats “pretty” modern CSS copied from a website.
Basic rules:
- table frame
- inline for key styles
- web-safe or linked fonts with a fallback
- large tap targets
- test in Outlook and on iOS
Content, images, tools
Copy has to read with images off. Compress images, set width/height, and don’t bury the whole offer in a JPG.
ESP editors and ready-made templates speed the work; custom HTML when you need full control. External testers catch surprises before subscribers do.
FAQ
Why use tables instead of flex or grid?
Many clients (especially older Outlook) choke on modern block layout. Tables are still the most predictable frame.
Can you use HTML5 in email?
Carefully. Teams often stick with a simple transitional DOCTYPE and a narrow tag set. Test experiments in real clients.
Is inline CSS required?
Yes for critical styles: many clients strip `<style>` or ignore shorthand.
Does a broken layout put you in spam?
Not automatically. Spam hinges on domain reputation, complaints, and content. But a broken email still kills clicks.
Do you need a responsive email?
Yes: media queries where they’re supported, plus a single-column fallback and large tap targets.
How should you test emails?
ESP previews, Litmus/Email on Acid–class tools, and manual sends to Gmail, Yandex, Outlook, and iOS.
Is an image-only email a bad idea?
Yes — some clients block images. Mirror the meaning in copy and alt text.
Looks perfect in Chrome — broken in Outlook and on mobile?
We’ll rebuild a table frame, inline critical CSS, and test clients so the send isn’t a layout lottery.
Discuss the task
