Mobile email optimization: what breaks and how to fix it

Seven out of ten emails are opened on a phone. Yet most campaigns are designed on a desktop, tested in a desktop browser, and signed off by someone staring at a 27-inch monitor. Then the campaign goes out, and 78% of recipients see something completely different from what was approved. This guide covers the specific fixes that make email readable on a 6-inch screen.

Why mobile optimization is no longer optional

Litmus Q1 2026 data puts mobile opens at 71% overall, climbing to 78% in B2C. The remaining 22-29% is desktop, though web clients like Gmail and Yahoo Mail are growing their share at the expense of native apps such as Outlook for Windows.

Mobile passed desktop back in 2017. What is new is that the gap keeps widening: mobile opens grow by roughly 2-3 percentage points every year. By late 2026, some verticals — ecommerce, fitness, food delivery — will cross 85% mobile.

The typical workflow runs counter to all of this. A marketer designs the email on a large monitor, sends a test to their work Gmail in Chrome, gets approval from a manager on a desktop. The campaign reaches subscribers, and three-quarters of them see something the design team never reviewed.

The problem is not ignorance — everyone knows mobile matters. The problem is sequence: design starts with desktop and hopes the layout will "adapt." It doesn't, at least not the way you expect.

Single column is a foundation, not a limitation

A two-column layout at 375px screen width produces two 180px columns. Text becomes unreadable, images get cropped. You can use a media query to stack columns into a single flow, but not every email client supports them. Gmail on Android has supported media queries since 2020. Outlook for Android still does not.

A single-column layout sidesteps the problem entirely. Content flows linearly: heading, text, image, CTA. No sidebars, no floats. At 600px on desktop it looks clean and structured. On a phone, it stays exactly the same.

If the business needs a multi-column block — a product grid, for instance — use hybrid layout. Columns are set with inline-block and max-width, not tables or floats. Wide screens show columns side by side; narrow screens stack them automatically without a media query. MJML and Maizzle generate this pattern out of the box.

Buttons and links: a finger is not a cursor

The contact area of a fingertip is roughly 10×10 mm. On an iPhone 15 screen, that is about 56×56 CSS pixels. A 30×30 button produces missed taps and accidental hits on adjacent elements. Apple Human Interface Guidelines put the minimum touch target at 44×44px. Google Material Design says 48×48. Use 44 as the floor.

This applies beyond CTA buttons. Inline text links are touch targets too. Two links in the same paragraph separated by four words are nearly impossible to tap accurately on a phone. Give links room: put them on their own lines where possible, add padding around clickable elements.

The unsubscribe link is a separate concern. Google and Yahoo have required a visible one-click unsubscribe since February 2024. On mobile it matters even more: if the subscriber cannot hit the unsubscribe button, they will tap Spam instead. A spam complaint hits domain reputation tens of times harder than an unsubscribe.

Typography on small screens

iOS automatically enlarges text smaller than 13px. This is called text size adjustment, and it catches marketers regularly: small footer copy or a legal disclaimer suddenly balloons and breaks the layout. The CSS fix is -webkit-text-size-adjust: 100%, but the cleaner solution is to never use text smaller than 14px. For body copy, 16px and up.

A 36px headline looks sharp on desktop. On a 375px screen, a five-word heading at that size wraps to four lines and eats half the first viewport. The subscriber scrolls, scrolls, finds nothing interesting, and closes the email. For mobile, 22-26px is enough. Use a media query or size in em so the heading scales with the viewport.

Line height should be at least 1.5. On small screens, the eye tires faster and dense text blurs into a gray mass after the first two paragraphs. If your email has more than three paragraphs, increase the paragraph spacing to 20-24px. That space is not wasted — it keeps the email readable.

Images: file size, format, and fallback

Average mobile internet speed in the US hovers around 50 Mbps on paper. In practice, in a subway car, a parking garage, or an elevator, it drops to 1-3 Mbps. An email with three 500 KB banners takes five seconds to load. Subscribers do not wait five seconds. They close it and move on.

Target total image weight: under 800 KB. For a promo email with one hero banner, keep that banner under 300 KB. Compress with TinyPNG or Squoosh. Use JPEG for photos, PNG for graphics with transparency. WebP works in Apple Mail and Gmail, but Outlook does not render it — you need a fallback via background-image or <picture>, which itself has incomplete client support.

Always set width and height as HTML attributes on every image. This prevents layout shift — the visible jank when images load and push content around. And always include style="max-width:100%; height:auto;" so the image does not overflow a narrow screen.

An email without images should still make sense. If you remove all the visuals and the message falls apart, you built the campaign on the wrong foundation.

Preheader: a second subject line

On mobile, the preheader is always visible. In desktop Gmail it sits on one line next to the subject. On iPhone it gets a full line below it. That doubles the text space for driving opens, and most marketers waste it.

If you do not set a preheader, the email client pulls the first available text from the message body. Usually that is "View in browser," the logo's alt text, or navigation like "Home | Catalog | Contact." That preheader tells the subscriber one thing: you did not care what they would see.

Keep preheader length between 40 and 130 characters. Shorter and the client fills it from the body. Longer and it gets cut. The preheader should extend the subject, not repeat it. Subject: "30% off the spring collection." Preheader: "Through Sunday only. Free shipping on orders over $50." Concrete details that push the open.

HTML weight: the invisible conversion killer

Gmail clips HTML over 102 KB. Below the clipped content appears a "View entire message" link, and most mobile users never tap it. Your CTA at the bottom of the email? They never see it.

HTML bloat comes mostly from inlined styles. Email developers have to inline CSS because Gmail strips the <style> tag from <head>. Every element gets the full set of styles, and a twenty-block email easily hits 120-150 KB. Minification and duplicate-style removal fix this — tools like email-comb or MJML's built-in optimizer handle it automatically.

Tracking pixels and UTM parameters add up too. A fully expanded UTM string is 100-200 characters. Twenty links at that length adds 2-4 KB just for URLs. Use redirect-based shortening or configure UTM parameters on the ESP side.

Testing on real devices

An emulator is not a phone. Litmus and Email on Acid show renders across dozens of clients, which is useful for broad coverage. But they cannot show how the email behaves under scroll, whether the CTA button is reachable with a thumb, or how the text looks in direct sunlight with brightness turned down.

Minimum device set: iPhone (Apple Mail), Android with Gmail, Android with Samsung Mail. Those three cover 70-80% of mobile opens. If the budget allows, add Outlook for iOS and Yahoo Mail for Android — both render HTML differently and bugs surface there first.

Test dark mode separately. More than 60% of mobile users have it enabled. A white logo on a transparent background looks fine in light mode. In dark mode it disappears. White text on a light-colored background that the client inverts is another classic breakage. Always check both.

Five mistakes that break email on mobile

Optimization is pointless if the email never arrives

You can build a perfect mobile email: single column, large buttons, light images, a sharp preheader. If 15% of your list is invalid addresses, it still will not work. High bounce rate erodes domain reputation. Low reputation means spam folder. An email in spam is an email that does not exist, no matter how well it renders.

Mobile optimization works at the content and design layer. List validation works at the infrastructure layer. Neither one replaces the other. A responsive email sent to a clean list is where you get both maximum deliverability and maximum readability.

Mobile optimization determines whether the email is pleasant to read. List validation determines whether there is anyone to read it.

Regular list hygiene — monthly for active segments, quarterly for low-engagement ones — keeps bounce rate below 2%, the threshold Gmail and Yahoo consider acceptable. Above that, deliverability problems start, and no amount of mobile optimization compensates.