10 Mobile-First Design Rules for Ecommerce Emails
Campaign emails get designed on a wide monitor and read, often, on a phone in one hand. Design for the phone first and desktop usually follows.
Email has no size standard of its own, so the numbers below come from Apple’s Human Interface Guidelines, Google’s Material Design and WCAG 2.2.
1. Design the first screen first
Before any scroll, show a small logo, a short headline or offer, one product image and the button.
Why: that screen decides whether someone scrolls or goes back to the inbox.
Example: a denim brand launching a wide-leg fit opens with “The wide-leg is here,” one cropped shot and a “Shop the fit” button. The fit guide sits below.
2. Stick to a single column
Build the layout as one column. If desktop uses two, set the stacking order yourself.
Why: side-by-side columns shrink until unreadable or stack in an unplanned order. WCAG 2.2’s Reflow criterion (Level AA) is a good test: content should work at a width equivalent to 320 CSS pixels without sideways scrolling.
Example: a coffee roaster’s tasting notes sit beside the bag on desktop. On a phone they stack as photo, name, notes, button.
3. Size tap targets for thumbs
Make buttons and links easy to hit and well spaced.
Why: a thumb is less precise than a cursor. Apple’s guidelines call for a button hit region of at least 44 by 44 points. Material Design sets touch targets at 48 by 48 dp or more, in most cases at least 8 dp apart.
Example: a supplement brand stacks “Subscribe” and “Buy once” as two full-width buttons, not two small links side by side.
4. Set type for a small screen
Choose body size, line length and spacing on the phone first.
Why: Apple lists 17 points as the default text size on iPhone and 11 points as the minimum, so save the minimum for fine print. WCAG 2.2’s Visual Presentation criterion (Level AAA) uses 80 characters as its maximum line width and space-and-a-half as its minimum line spacing.
Example: a skincare headline, “Our body oil, now in a travel size,” breaks into five lines on a phone. “Body oil, travel size” fits.
5. Make product grids collapse cleanly
Build each product as one card (image, name, price, link) so the grid drops cleanly from three across to two.
Why: images and names built as separate rows split apart when stacked. One image ratio keeps rows level.
Example: an apparel brand’s six knitwear pieces run three across on desktop and two on a phone. Five would strand one card.
6. Keep image files light
Export each image at the size it displays, compress it, and crop to what matters.
Why: on a weak signal, a heavy hero leaves the first screen blank. A wide lifestyle shot also shrinks the product to a speck.
Example: a coffee roaster swaps a wide café scene for a tight crop of bag and cup: lighter file, bigger product.
7. Use live text, not text inside images
Set headlines, offers, prices and button labels as HTML text; keep images for products and the logo.
Why: text inside an image shrinks with the banner and vanishes when images are off. WCAG 2.2’s Images of Text criterion (Level AA) asks for real text wherever possible and exempts logotypes.
Example: a supplement brand sets “Build your morning stack” as live text above the product photo, not across it.
8. Use one primary call to action
Make the action you want most the only full-size button.
Why: three buttons in a neat desktop row become a stack of equal choices on a phone.
Example: a skincare brand’s lip balm launch has one button, “Shop the set.” “Read the ingredients” is a text link further down.
9. Cut the footer down
Keep what the footer needs; cut the rest.
Why: on a phone, a desktop footer becomes a long tail of tiny links. A hard-to-tap unsubscribe link keeps nobody subscribed; the spam button is one tap away.
Example: a coffee subscription footer keeps a skip-or-pause link, a brew guide, the unsubscribe link and the mailing address, each on its own line.
10. Preview on a real phone
Before sending, open a test on your own phone, in the mail app your customers use most, and check:
- Subject line and preview text, cut short in the inbox.
- The first screen, before any scrolling.
- Every link, tapped with a thumb.
- Image loading with Wi-Fi off.
Example: an apparel restock email puts S, M, L and XL links in a tight row, so a thumb aiming at M opens L. Two rows of wider buttons fix it.
Whoever does the design
If your team would rather review campaigns than build them, Nexmail offers on-brand email design for ecommerce teams. It connects to a Shopify store, pulls in the logo, colors, fonts, voice and product catalog, and exports production-ready HTML for Klaviyo and other ESPs that renders in Gmail, Outlook, Apple Mail and on mobile. Either way, the test stays the same: built for the phone first, checked on a phone last.
