Over 60% of emails are now opened on mobile devices. An email that looks stunning on desktop but requires pinching and zooming on an iPhone isn't just annoying—it's a conversion killer. This guide covers everything you need to know about optimizing your Email Love designs for mobile.
The good news: MJML makes your emails responsive by default. Multi-column layouts automatically stack on mobile. But "responsive by default" isn't the same as "optimized for mobile." There's a lot you can do to make the mobile experience genuinely great.
How Mobile Rendering Works
When your email is opened on a mobile device, the email client applies responsive breakpoints that transform your layout. Here's what happens automatically:
- Columns stack vertically: A three-column desktop layout becomes three stacked rows on mobile
- Images scale: Images resize to fit the screen width
- Text reflows: Text wraps within the new column width
The default MJML breakpoint is 480px. Below this width, multi-column layouts collapse to single-column.
⚠️ Important: You cannot change the responsive breakpoint in the Email Love plugin. It's fixed at 480px, which covers virtually all mobile devices.
Using the Mobile Styles Tab
The Mobile Styles tab is where the magic happens. Select any component in your Figma design, open the Email Love plugin, and click on Mobile Styles. Here's what you can control:
Mobile Padding
Desktop padding often feels too generous on mobile. A 40px side padding on desktop leaves barely any content space on a 375px phone screen.
- Select a component (section, column, text, image, or button)
- Open Mobile Styles in the plugin panel
- Adjust padding values for top, right, bottom, and left independently
💡 Pro tip: A good mobile padding range is 16–24px on the sides. Compare this to typical desktop padding of 32–48px.
Mobile Font Sizes
What's comfortably readable at 16px on a desktop monitor might be too small on a phone held at arm's length. Use the Mobile Styles tab to bump font sizes for mobile:
- Body text: 16–18px minimum on mobile (even if you use 14px on desktop)
- Headlines: Scale down proportionally, but keep them readable. A 36px desktop headline might become 24–28px on mobile
- Buttons: Keep button text at 16px minimum with generous padding for easy tapping
Mobile Alignment
Left-aligned text on desktop sometimes works better center-aligned on mobile, especially for short headlines and CTAs. The Mobile Styles tab lets you override alignment per component.
Hide on Desktop / Hide on Mobile
Show completely different content based on the viewing device. Common scenarios:
- Swap a wide landscape hero image for a tall portrait version on mobile
- Hide secondary navigation links that clutter the mobile experience
- Show a tap-to-call button only on mobile (useless on desktop)
- Replace a detailed footer with a simplified mobile version
See the Show/Hide Content on Desktop & Mobile article for the full walkthrough.
Image Optimization for Mobile
Sizing
Images that look sharp on mobile need to be exported at 2x resolution. If your image displays at 300px wide on mobile, the source file should be 600px wide. This ensures crisp rendering on retina displays.
File Size
Mobile users are often on slower connections. Large images create loading delays that kill engagement. Keep these limits in mind:
- Hero images: Under 150KB
- Supporting images: Under 80KB each
- Total email weight: Under 500KB including all images
- Format: Use compressed JPGs for photos, optimized PNGs for graphics with transparency
Alt Text
Many mobile email clients block images by default, especially in corporate environments. Alt text ensures your message still communicates even without visuals. Write alt text that describes the image's purpose, not just its appearance.
Mobile Design Best Practices
Tap Targets
Fingers are bigger than mouse cursors. Apple's guidelines recommend minimum tap targets of 44x44px. For email buttons:
- Minimum button height: 44px
- Generous padding around buttons: at least 16px on all sides
- Space between adjacent links: at least 8px to prevent mis-taps
Content Hierarchy
Mobile readers scan fast. Front-load your most important content:
- Lead with your primary message or offer
- Follow with one clear call-to-action
- Add supporting details below the fold
- Keep secondary CTAs minimal
Column Stacking Order
When columns stack on mobile, they stack left-to-right by default. A three-column layout with columns A | B | C becomes A (top), B (middle), C (bottom) on mobile. Design your column order with this stacking behavior in mind.
You can control stacking behavior using the How to Control How Content Stacks on Mobile article.
Single Column Is Often Best
While the plugin supports multi-column responsive layouts, single-column emails are inherently mobile-friendly. If your content doesn't require side-by-side comparison, consider a single-column approach that looks identical on desktop and mobile.
Previewing Mobile Designs
The Email Love plugin includes a mobile preview mode:
- Click the Preview button in the plugin
- Toggle between Desktop and Mobile views
- Review your design at mobile dimensions
- Check that stacked columns read in the right order
- Verify that hidden/shown content appears correctly
For the most accurate mobile testing, export your HTML and test with Litmus, Email on Acid, or InboxMonster. These tools show real-device rendering across dozens of email clients and mobile devices.
Common Mobile Issues
"My email looks great on desktop but the mobile text is tiny"
You probably haven't set mobile-specific font sizes. Select your text components and adjust the font size in the Mobile Styles tab. Body text should be at least 16px on mobile.
"Columns aren't stacking on mobile"
Make sure your columns are inside a properly structured MJML section. Verify the MJML structure is correct. Also check that you haven't set columns to "force desktop" layout.
"My images are overflowing on small screens"
Image widths in email are set in pixels, not percentages. If your image is 640px wide but the mobile screen is 375px, the image should scale down automatically with MJML. If it's not scaling, check that the image is inside a properly structured mj-column.
"The padding looks massive on mobile"
Desktop padding doesn't automatically adjust for mobile. Set separate mobile padding values in the Mobile Styles tab. A 48px desktop side-padding should drop to 16–20px on mobile.
Need help optimizing for mobile? Reach out at support@emaillove.com or join our Discord.
Powered by