Est. reading time: 5 minutes

Most Mailchimp campaigns that underperform on mobile weren’t designed for mobile. They were designed on a laptop, previewed on a laptop, and shipped with the assumption that Mailchimp’s auto-stacking would handle phones gracefully. It doesn’t. Auto-stacking makes desktop layouts survive on mobile, not work on mobile, and if most of your opens happen on phones, the biggest design choice isn’t typography or color. It’s whether you built the email for the device people are actually reading it on.

Design for the phone first, then scale up

Building desktop-first and letting the template collapse is how you end up with crushed hero images, CTAs buried three scrolls deep, and modules stacking into a slog. The fix is inverting the workflow: wireframe the email for a 375-pixel screen before you open the template editor.

A working mobile wireframe is short. Small logo at the top, one headline, one sentence that says why the email exists, the primary CTA, then proof points or supporting copy beneath with a secondary CTA for readers who need more convincing. That’s the spine, and anything beyond it has to earn the extra scroll. When you build it in Mailchimp, the template settings that matter are mobile-specific font sizes set separately from desktop, full-width button blocks with real padding, and fluid images at 100 percent width. Most of our email design work starts here, because getting the mobile structure right makes every other decision easier.

Where Mailchimp users get mobile wrong

A few patterns show up over and over in client audits, and they’re not the things people usually obsess about:

• Multi-column blocks that look balanced on desktop but stack into an awkward order on mobile, often putting an image above the headline it was supposed to support.
• Image cards stacking image-first, creating a scroll trap before the reader reaches any copy.
• Button blocks that look proportionate on desktop and feel cramped once the email collapses to one column.
• Spacer blocks tuned for desktop that become massive dead zones on mobile, breaking the email’s rhythm.
• Headlines built as graphics in Canva or Figma and uploaded as images, which kills accessibility, slows load time, and blurs on retina displays.

None of these break the email technically. Auto-stacking still works, the campaign still passes Mailchimp’s mobile preview, it just doesn’t convert, because the layout is fighting the reader the entire scroll.

Hero images are eating your CTAs

One of the most common conversion problems in client Mailchimp accounts isn’t subject lines or send time. It’s the primary CTA buried below the first screen because the hero image took over the opening view on mobile. On a phone, that first screen is real estate you can’t waste, and if someone has to scroll before seeing the headline or the button, you’ve already lost a percentage of the audience that would have clicked.

The fix is structural: keep hero images compact, never bake the headline or CTA into the image as a graphic, and place a live text headline and live button immediately beneath the image. Live text loads faster, stays accessible when images are blocked, scales cleanly on small screens, and holds up when inboxes render the email differently. None of which means cutting images, it means using them deliberately, since a small product shot or a focused lifestyle image works harder than a full-bleed banner that pushes everything else off the screen.

Build hierarchy, not a wall of text

“Use a single column on mobile” is good advice that gets misread as “stack everything into one long vertical run.” The point of a single column is alignment, not flatness, because on mobile, hierarchy is what tells the reader whether to keep scrolling, click now, or bail.

In practice: a clear headline, a subhead or one-line hook, the CTA, then short sections with their own subheads, two or three sentences each, separated by enough whitespace that the reader’s thumb has somewhere to land between ideas. Bulleted lists work when the content is genuinely list-shaped, features, steps, options, and don’t work as a way to break up prose that should have been edited down. Body text sits around 16 to 18 pixels, subheads around 22 to 28, line-height in the 1.4 to 1.6 range, not rules, just the ranges that work for most subscribers on most devices without forcing anyone to pinch and zoom. And tap targets matter as much as type: primary buttons need at least 44 by 44 pixels, Apple’s accessibility minimum, which in practice means generous padding and clear separation from nearby links, because a button that’s technically clickable but visually cramped still loses taps to misclicks and frustration.

Test on the device, not the preview

Mailchimp’s mobile preview is a starting point, not a verdict. Rendering varies across Gmail, Apple Mail, and Outlook for iOS, and the only way to know what subscribers actually see is test sends to real phones across the clients your list actually uses. Before scheduling, open the test on your phone and check it against five questions:

• Can you see the headline and primary CTA without hunting?
• Does the hero image support the message, or push it down?
• Are the buttons large enough to tap without zooming?
• Do stacked modules appear in the right order, or does the layout scramble?
• Does the email still make sense if images load slowly or not at all?

Once the structure passes, the A/B tests worth running are the ones that affect conversion most, hero height, whether the CTA sits immediately under the headline or after a proof point, and button copy, because small structural changes move click-through more than font tweaks ever will. Mobile-first email design isn’t a trend. It’s acknowledging that the device most subscribers read on should be the device you design for first: build for the phone, get the CTA into view, and let the structure do the work decoration was trying to do.