Bulletproof CTA Buttons for Outlook
Create CTA buttons that render in every email client including Outlook, using VML and hybrid CSS.
Mobile-First Email Principles
Why Mobile-First
Over 60% of emails are opened on mobile devices. A 600px-wide desktop email that shrinks on a phone creates tiny unreadable text and impossible-to-tap links.
Width and Layout
Set your email container to a max of 600px with 100% width as the base:
<table width="100%" style="max-width:600px; margin:0 auto;">
Use single-column layouts by default. Multi-column layouts require media queries and add complexity — only use them when the content genuinely benefits.
Font Sizes
| Element | Minimum Size |
|---|---|
| Body text | 16px |
| Secondary text | 14px |
| Heading (H1) | 24px |
| Heading (H2) | 20px |
Below 14px becomes difficult to read without zooming. Use system fonts (-apple-system, Arial, sans-serif) for reliable rendering.
Tap Targets
Every link and button must be at least 44×44px — Apple's HIG minimum. A common mistake is using text links inline; they're hard to tap accurately.
Images
Always include width="100%" and max-width on images. Add descriptive alt text — many mobile users have images off by default.
<img src="banner.jpg" width="100%" style="max-width:600px; display:block;" alt="Spring sale — 30% off all products">
Spacing
Use generous padding (16–24px) on mobile. Tight spacing makes content feel cramped and increases mis-taps. Add padding with inline styles — CSS classes are unreliable in older clients.
Related Articles
Dark Mode Email Design
Design emails that look great in both light and dark mode using CSS media queries and tested fallbacks.
Dedicated vs Shared IP Address
Choosing between a dedicated and shared IP affects your sender reputation and warmup requirements. This guide compares both options with clear recommendations.
More in Email Design & Content
View all →Bulletproof CTA Buttons for Outlook
Create CTA buttons that render in every email client including Outlook, using VML and hybrid CSS.
Dark Mode Email Design
Design emails that look great in both light and dark mode using CSS media queries and tested fallbacks.
Ready to start sending?
AcelleMail is the self-hosted email marketing platform you control end-to-end.
View Pricing