The Mobile Reality
In Australia, 75% of professionals check email on their phone daily. If your signature is designed for desktop only, it looks broken on mobile — tiny text, cut-off images, unclickable links. Mobile-first design ensures your signature looks great on every screen.
Mobile-First Design Rules
📏 Width: 320–600px
Keep total signature width under 600px. It will scale down to fit 320px mobile screens without horizontal scrolling.
🔤 Font: 12px Minimum
Anything smaller than 12px is unreadable on mobile. Use 14px for key info and 12px for contact details.
👆 Touch Targets: 44px
Links and buttons need 44×44px minimum touch targets. Tiny links are frustrating on touchscreens.
📱 Stack Vertically
Side-by-side layouts break on mobile. Stack elements vertically: logo on top, then name, then contact details.
Desktop vs Mobile Layout
| Element | Desktop | Mobile |
|---|---|---|
| Layout | Photo left, info right | Photo top, info below |
| Logo width | 200px | 150px |
| Social icons | Inline row | Inline row (min 32px each) |
| Banner | 600px wide | 100% width, auto height |
| Separator | Vertical line | Horizontal line |
Common Mobile Mistakes
- ❌ Fixed-width tables wider than 600px
- ❌ Images without max-width:100% (they overflow on mobile)
- ❌ Multiple columns that don't stack
- ❌ Tiny social media icon images (under 24px)
- ❌ Phone numbers not using tel: links (can't tap to call)
📱 Mobile-first: Every template we create is tested on iPhone, Android, and tablet. Create your mobile-ready signature →