Mobile-First Email Design: Best Practices for 2026

Mobile Isn't an Afterthought — It's the Default

More than 60% of email opens happen on mobile devices. In B2C markets, it's closer to 70%. If your email doesn't work on a phone, it doesn't work for most of your audience.

Mobile-first means designing for the smallest screen first, then progressively enhancing for desktop. Not the other way around.

The Mobile Email Framework

Single Column Layout

Multi-column layouts break on mobile. A two-column desktop layout becomes overlapping, side-scrolling content on a phone. Start with one column:

<table role="presentation" width="100%" style="max-width: 600px;">
  <tr>
    <td style="padding: 20px;">
      <!-- Single column content -->
    </td>
  </tr>
</table>

600px max-width for desktop, 100% width for mobile. No horizontal scrolling ever.

Font Sizing That Works

Element	Minimum Size	Recommended
Body text	14px	16px
Headings (H2)	22px	24-28px
Preheader/small text	12px	13px
CTA button text	16px	18px

iOS auto-zooms text smaller than 13px, which breaks your entire layout. Don't risk it — set body text to 16px and move on.

Touch-Friendly Buttons

Apple's Human Interface Guidelines recommend 44x44px minimum touch targets. For email CTAs:

<a style="display: block; padding: 14px 24px; background-color: #2563eb;
          color: #ffffff; text-align: center; text-decoration: none;
          font-size: 18px; border-radius: 4px;">
  Get Started
</a>

On mobile, make CTA buttons full-width. A small centered button is easy to miss and hard to tap.

Practitioner note: I test every client's email templates on my phone before approving them. The #1 mobile issue isn't layout — it's buttons that are too small and too close together. Users tap the wrong link, get frustrated, and spam-report the email.

Responsive Images

Images should scale with the container:

<img src="hero.jpg" width="600" style="max-width: 100%; height: auto; display: block;"
     alt="Descriptive alt text">

Always include width and height attributes for Outlook, plus max-width: 100% and height: auto for responsive scaling. Use display: block to eliminate the phantom spacing below images.

Media Queries in Email

Media queries have limited but growing support in email:

<style>
  @media screen and (max-width: 600px) {
    .mobile-full { width: 100% !important; }
    .mobile-hide { display: none !important; }
    .mobile-stack { display: block !important; width: 100% !important; }
  }
</style>

Supported: Apple Mail, iOS Mail, Android default mail, Samsung Mail, Yahoo Mail Not supported: Gmail (strips <style> tags), some Outlook versions

Since Gmail doesn't support media queries, your base design must work without them. Use media queries as progressive enhancement, not a requirement.

Practitioner note: The "Gmail doesn't support media queries" limitation catches a lot of developers off guard. Your responsive strategy has to work with inline styles alone for Gmail users, which is about 30-40% of most sender's audience.

Mobile-First Checklist

1. Single column, 600px max-width
2. Body text 14-16px minimum
3. CTA buttons 44px+ height, full-width on mobile
4. Images responsive with alt text
5. 10px+ spacing between clickable elements
6. No horizontal scrolling at 320px width
7. Test on actual devices (iPhone, Android)

The Deliverability Connection

Mobile-unfriendly emails get deleted without reading. Deleted-without-reading is a negative engagement signal. Negative engagement signals tank your sender reputation. Your sender reputation determines inbox placement.

The chain is direct: bad mobile experience → low engagement → worse deliverability → fewer people see your email at all.

If your emails look fine on desktop but your engagement metrics are declining, mobile rendering is the first place to check. Schedule a review and I'll audit your templates across devices.

Sources

• Litmus: Email Client Market Share
• Apple: Human Interface Guidelines — Touch Targets
• Can I Email: CSS Media Query Support
• Google: Email Sender Guidelines

---

v1.0 · April 2026