Most marketing email is opened on a phone. The exact share depends on your audience — consumer lists skew higher, B2B lists lower — but for almost everyone the phone is the primary reading environment and the desktop is the exception.
That should determine how the email is built, and usually does not, because it is designed on a laptop.
Design mobile-first, literally
Build the mobile layout first and let the desktop version be the one that adapts. Working the other way produces emails that are fine at 600 pixels and cramped at 375, because every decision was made with room you do not have.
The practical consequence of designing for a phone: single column, always. Multi-column layouts either shrink until they are unreadable or stack in an order you did not choose, and the stacking order is decided by the client rather than by you.
The specific numbers
Body text at 16px minimum. Below 16px, iOS Safari and Mail may zoom the whole message, which breaks your layout in a way you never see because it does not happen on your desktop preview. This one rule prevents more mobile rendering complaints than any other.
Headlines at 22–28px. Desktop headline sizes look enormous on a phone and eat the entire first screen.
Tap targets at 44×44 pixels minimum. Apple's own guideline, and the practical floor for a thumb. Footer links stacked with 8 pixels between them are unusable, so give them vertical padding.
Buttons built from HTML, not images. A table cell with padding and a background colour always renders, at any size, whether or not images load. An image button is one asset that may not arrive.
Full width at 600px maximum, scaling to 100% below that. 600px remains the safe maximum because of Outlook's rendering, not because of phones.
Generous line height, around 1.5. Tight leading is fine on a large screen at reading distance and hard work on a phone.
The first three seconds
Someone checking email on a phone is often standing up, distracted, and deciding whether to keep reading. What they see before scrolling is roughly: sender name, subject line, preview text, and the top of your email.
Sender name matters more than the subject line. Recognition is the first filter, and it is why sending from a consistent name matters more than being clever.
Subject lines truncate around 30–40 characters on mobile. Front-load. A subject whose meaning survives truncation beats a shorter one that does not. See good email subject lines.
Preview text is a continuation, not a repeat. Many clients show subject and preview together, so restating the subject wastes the most valuable line of text you get. Email preview text covers what to put there.
The top of the email should say what it is. Not a logo occupying the first 200 pixels, not a navigation bar copied from your website. The headline and the point.
Things that break on phones
Wide tables. A pricing table with five columns does not fit. Restructure as stacked cards or link to a page.
Small close-set links. Especially in footers.
Text baked into images. It cannot reflow, so it either shrinks past legibility or overflows.
Hover states. There is no hover on a touchscreen. Any information revealed on hover is invisible to most of your list.
Long forms. Do not put a form in an email. Link to a page built for it.
Horizontal scroll. Any element wider than the viewport creates it, and it makes an email feel broken even when everything else is fine.
Testing
Send yourself the campaign and open it on an actual phone. Previews render in a browser at a phone-sized width, which is not the same thing — they miss client-specific transformations, dark mode inversion, and iOS text-size settings.
Check it with images off, in dark mode, and with the system text size increased, since a meaningful share of readers use larger text. Add these to your pre-send checklist.
Frequently asked questions
What is the best width for a mobile email?
Design at 100% width with a 600px maximum. 600 is the safe ceiling because of Outlook rather than phones; below that, let the layout fill whatever it is given rather than fixing a narrower width.
What font size should mobile email use?
16px minimum for body text. Anything smaller can trigger automatic zoom on iOS, which rescales the whole message and breaks the layout in a way that never appears in a desktop preview.
Should mobile emails be shorter?
Shorter paragraphs and shorter opening sections, yes. Total length matters less than whether the first screen makes the point — people who are interested will scroll a long way on a phone, and people who are not will not scroll at all.
Do I need a separate mobile version?
No. A single responsive email with a single-column layout, fluid widths and a media query for the larger sizes handles every case. Separate versions double the work and the testing.
