Why Mobile Matters
- 61% of email opens happen on mobile devices
- 81% of people read email on their smartphone
- If your signature is broken on mobile, you're losing credibility with the majority of recipients
Mobile-Friendly Design Principles
📏 Max-Width 600px
Keep your total signature width under 600px. Use max-width instead of fixed width so it can shrink on smaller screens.
🔤 Readable Font Sizes
Minimum 13px for body text, 11px for legal/disclaimer text. Touch targets should be at least 44×44px.
📱 Stackable Layout
Side-by-side elements (photo + text) should stack vertically on narrow screens. Use fluid table widths.
👆 Touch-Friendly
Phone numbers and email addresses should be easily tappable. Add enough padding around links.
HTML Techniques for Responsive Signatures
- Tables with max-width: Use
style="max-width:600px;width:100%" - Fluid images: Set
max-width:100%;height:autoon all images - Inline styles: Email clients strip
<style>blocks — use inline styles only - System fonts: Use Arial, Helvetica, sans-serif — not web fonts (they won't load in email)
- No flexbox/grid: Outlook doesn't support modern CSS. Stick to tables.
Testing on Mobile
- Send a test email to yourself
- Open it on your iPhone — check in Apple Mail and Gmail app
- Open it on an Android phone — check in Gmail and Samsung Email
- Rotate your phone to landscape — does it still look good?
- Try tapping the phone number — does it call?
- Try tapping the email — does it compose a new email?
📱 Already responsive: All our templates are mobile-tested out of the box. Browse responsive templates →