Your Checklist For Optimizing Your Email Design To Be Mobile Responsive
Nothing disappoints me as much as when I flip open an email I’m looking forward to on my mobile device and can’t read it. Either the images are hard-coded widths that won’t respond to the display, or the text is so wide that I’d have to scroll back and forth to read it. Unless it’s critical, I don’t wait to get back to my desktop to read it. I delete it.
I’m not the only one – consumers and businesses are now reading more than half of their emails on smaller screens. Responsive email design is critical to your email click-through rates.
Since we’ve implemented responsive emails on virtually every email service platform, we often reach out to those organizations and offer to help. I’ve honestly never gotten a response. It’s too bad – they’re paying for a platform to send an email no one reads.
Modifying your email template is easy to justify. Imagine walking up to the printer at your work and throwing away half the paper… that’s what you’re doing when you don’t get your emails responsive.
Best practices have emerged in this marketplace. Responsive design isn’t easy, but it’s not impossible. We’ve had the folks at Email Monks help us, and they follow this proven checklist to optimize your email to ensure it’s responsive to mobile and tablet viewports.
- Design in a single column
- Design with fingers in mind
- Keep the Calls to Action easily tappable (44px minimum)
- Use white space for easy skimming
- Keep the header clean
- Optimize image resolutions for retina displays
- Don’t crowd links together, use buttons
- Provide linked phone numbers
- Limit subject lines to 30 characters or less
- Use image widths that are a minimum of 480 px wide so they don’t blur when stretched on mobile.
- Don’t just scale images, use CSS media queries.
- Restrict the height – shorter emails are easier to skim
- Keep important Calls to Action above the fold
- Test your email designs across email clients
