How to Make Your Email Signature Mobile-Friendly
Well over half of email opens happen on phones — where a desktop-designed signature becomes a tiny, untappable mess. Mobile-friendly is mostly five decisions.
Step by step
Design at 500px, allow 320
Keep the signature's natural width ~500px with max-width:100% so it shrinks gracefully to phone width instead of forcing horizontal scroll.
Make columns stack
Side-by-side layouts (photo | details) need a media query that stacks them vertically under ~480px. Email-safe stacking uses table-based markup with responsive overrides — fiddly by hand, built into good templates.
Size every image explicitly
Explicit width/height attributes stop phones from inflating the logo to full width (the classic 'logo is massive on my phone' complaint).
Make contacts tap targets
Phone as tel:, email as mailto:, address as a maps link. On mobile these aren't conveniences — they're the whole point. Keep tappable elements ≥40px apart so thumbs don't misfire.
Respect font minimums
Below ~13px, iOS may auto-inflate text unpredictably. Explicit 13–15px body sizes render consistently.
Test on an actual phone
Send yourself a test and read it on the phone — then tap every link. Simulators lie about thumbs.
Responsive by default
Every Autograph template stacks correctly on phones — you can preview the mobile rendering in the app before you install.
Download Autograph free See the templatesCommon questions
Why does my signature force sideways scrolling on phones?
A fixed width over ~600px (or an unsized wide image). Add max-width:100% and explicit image dimensions.
Do mobile clients support the same HTML as desktop?
Mostly — iOS Mail and Gmail apps render well. The differences that bite: media-query support varies, so table-based responsive markup beats flexbox tricks.
Is a separate mobile signature worth it?
No — one responsive signature is less to maintain and can't get out of sync. That's how Autograph templates are built (they even preview in a phone frame in the gallery).