How To Design Emails That Work On Mobile

Mobile email design is not simply a matter of shrinking a desktop newsletter until it fits a narrower screen. A phone is a different reading environment: people scan quickly, use a thumb rather than a mouse, may have images blocked, and open messages in email apps that interpret HTML and CSS differently.

The practical aim is simple: make the message understandable, readable and actionable before the recipient has to pinch, zoom, hunt for a link or wait for an image. That means treating mobile as the baseline experience, then enhancing the layout for wider screens.

Start with the job the email must do

Before choosing a template, identify the one action the email should make easier. For example:

• Retail: view a new collection or a selected product category.
• B2B: read a useful guide, register for a webinar or book a conversation.
• Service update: understand what has changed and take any required next step.
• Basket reminder: return to a basket with the relevant product and price visible immediately.

If several actions are genuinely necessary, establish a clear hierarchy: one primary call to action (CTA), followed by a small number of secondary routes. An email that gives every link equal visual weight asks a mobile reader to do too much decision-making.

Use a mobile-first content hierarchy

On a phone, the first visible section does most of the work. It should answer three questions without relying on the recipient scrolling: Who is this from? Why does it matter now? What can I do next?

Put the essential message first

A reliable opening sequence is:

1. A recognisable sender name and a subject line that makes a specific promise.
2. Preheader text that adds useful context rather than repeating the subject line.
3. A short headline that states the benefit, update or offer.
4. One or two sentences that make the value clear.
5. A prominent CTA using an action-led label.

For example, instead of a general headline such as Spring is here, an outdoor retailer might use Waterproof layers for wet weekend walks, followed by a button labelled Shop waterproof jackets. The recipient can understand the message and its destination at a glance.

Write for scanning, not for a brochure

Keep paragraphs short, use descriptive subheadings and turn dense lists into bullets. Give each content block a single purpose. If a product needs several qualifications, consider whether the email should introduce it briefly and let the landing page do the detailed selling.

Links should still make sense out of context. “View the size guide” is clearer than “Click here”, particularly for people using assistive technology or scanning quickly through linked text.

Build a layout that remains usable when responsive CSS fails

Email HTML is less predictable than web-page HTML. Support varies considerably by client and platform; the Can I email support scoreboard tracks hundreds of HTML and CSS features and shows that client capabilities are far from uniform. Gmail supports standard CSS media queries, but unsupported properties or selectors may be ignored. Treat responsive CSS as a useful enhancement, not the only thing keeping the email readable. (Caniemail source)

Choose a single-column baseline

For most campaign content, a single column is the safest mobile starting point. Use a centred desktop container as a sensible maximum, but allow it to occupy the available width on smaller screens. A commonly practical starting specification is:

• a desktop content container of about 600px wide;
• a fluid outer table or wrapper at width="100%";
• 16–24px of side padding on mobile; and
• content that remains in a logical order without any media query.

The exact desktop maximum is less important than avoiding horizontal scrolling, very long lines and edge-to-edge text. Build the core message as a narrow, readable column first; add wider-screen polish afterwards.

Use columns sparingly and stack them deliberately

Two-column product or feature modules can work, but they should not be the default. On a narrow screen, each column needs enough width for readable copy and a usable button. If the desktop design places image and copy side by side, decide which should appear first when stacked. Usually, the copy or product name should not be separated from the CTA by several screens of imagery.

Do not hide essential content on mobile in the hope that a media query will remove it elsewhere. If CSS is stripped or only partly supported, the recipient may see duplicated, incomplete or confusing material. Instead, use one meaningful source order that works everywhere.

Make images fluid, but never let them carry the whole message

For content images, set a sensible HTML width and use CSS such as max-width:100%; height:auto; where the email build permits it. This helps an image reduce proportionally within a narrow container. Add an appropriate alt attribute when the image conveys information; give purely decorative images empty alt text so they are not announced as noise.

Accessibility guidance requires a text alternative for non-text content where it serves an equivalent purpose, and specifically identifies the alt attribute on img elements as a technique. It also warns against conveying information solely through CSS background images. (W3 source)

A hero image can support a message, but the offer, key product detail and CTA should be live HTML text wherever possible. This protects the experience when images do not load, when the recipient uses a screen reader, or when an email client changes the treatment of colours.

Make typography comfortable on a small screen

Readable mobile typography is about more than nominal font size. It depends on size, line height, contrast, spacing and the amount of copy competing for attention.

Element	Useful mobile starting point	Why it helps
Body copy	About 16px, with generous line height	Comfortable reading without demanding zoom.
Headlines	Clearly larger than body text, with controlled line breaks	Creates hierarchy without turning the opening screen into a giant banner.
Footer and legal copy	Small but still legible, with adequate line spacing	Required information should not become needlessly difficult to read.
Text colour	High contrast against its actual background	Supports reading in varied light conditions and for people with low vision.

As an accessibility benchmark, WCAG 2.2 Level AA sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Do not rely on colour alone to communicate status, urgency or selection: pair it with words, symbols or a clear label. (W3 source)

Avoid placing critical copy inside an image, especially pale text over a photograph. It may be unreadable on a bright phone screen, may disappear if the image is blocked, and cannot adapt to a recipient’s text preferences in the way live text can.

Design buttons for thumbs, not cursors

A mobile CTA should look and behave like a button, not like a small fragment of linked text surrounded by white space. Give it a descriptive label, sufficient colour contrast, a clear boundary and enough internal padding to make tapping forgiving.

WCAG 2.2’s Level AA minimum for pointer targets is 24 by 24 CSS pixels, subject to exceptions; its enhanced criterion uses 44 by 44 CSS pixels. In email, aiming towards a 44px-tall primary button is a useful practical target, particularly where the action is commercially or operationally important. (W3 source)

CTA rules that prevent frustration

• Use a verb plus an outcome: See available dates, Read the guide or Continue checkout.
• Make the entire visible button area linked, not just its words.
• Leave space between adjacent links, including social icons and footer links.
• Keep one primary CTA visually dominant in the opening content.
• Ensure the destination works on mobile too. A well-designed email cannot rescue a slow, awkward landing page.

Avoid vague urgency such as “Act now” unless the recipient can see exactly what they will receive or what deadline applies. Clear labels are better for conversion and for trust.

Plan for dark mode, blocked images and awkward clients

There is no single “mobile rendering”. A recipient might use a webmail app, a native phone app, an accessibility setting, enlarged text or dark mode. The right response is not to chase pixel-perfect sameness. It is to preserve meaning and usability under different conditions.

• Keep essential copy in HTML. A message should still make sense with all images off.
• Use explicit background and text colours. Check important combinations, including buttons, on light and dark backgrounds.
• Use a logo that survives colour changes. A transparent dark logo can disappear against a darkened background; consider a contained logo treatment or a suitable alternative asset.
• Avoid fragile effects. Tiny overlay text, image-only buttons, hover-dependent interactions and complex positioning are poor foundations for an email.
• Provide a plain-text version. It is a useful fallback and gives recipients a readable alternative where HTML is unavailable or unwanted.

Use supported CSS progressively. Gmail documents support for media queries based on width, device width, orientation and resolution, but a robust design should be comprehensible before those rules apply. (Google source)

Test the email and the journey, not just the editor preview

A visual builder is valuable for assembling consistent modules quickly, but a clean editor preview is not proof that an email works in every inbox. Test a realistic sample before important sends: different phone operating systems, the email clients used by your own audience, image-off viewing, dark mode and links through to the landing page.

A practical pre-send test sequence

1. Read it at phone width. Can someone identify the sender, message and primary action within a few seconds?
2. Turn images off. Does the copy still explain the offer or update? Are informative images described meaningfully?
3. Check the tap path. Are buttons and nearby links easy to activate without mistakes?
4. Check contrast. Test body copy, buttons, offer labels and footer links against their backgrounds.
5. Follow every important URL. Confirm that links are correct, tracking parameters are intact and the destination is mobile-friendly.
6. Review the unsubscribe and preference route. It should be easy to find and work reliably; hiding it damages trust as well as usability.
7. Use results to improve the next send. Compare a meaningful change at a time, such as CTA wording, content order or a shorter opening module.

For teams using Email Foundry, the visual builder, reusable templates and HTML import can help make proven mobile-safe modules easier to use consistently. A/B testing, click heatmaps and campaign analytics are then useful for validating real reader behaviour—not for replacing accessibility or client testing. If a lower CTA receives almost no interaction, simplify the email or move the decision higher rather than merely making the button brighter.

Common mobile email mistakes and better alternatives

Mistake	Why it fails on mobile	Better approach
One large image containing headline, offer and button	Critical content can vanish with images disabled and is difficult to resize or read.	Use live HTML heading, copy and CTA; retain images as support.
Four or more equal-width columns	Each module becomes too narrow or creates a long, disjointed stack.	Use one column, or carefully designed two-column content that stacks in a useful order.
Small text links used as the primary CTA	They are easy to miss and hard to tap accurately.	Use a sufficiently large, clearly labelled button.
Long introductory copy before the point	The recipient must scroll before understanding why the email matters.	Lead with the benefit, then provide supporting detail.
Desktop-only approval	Overflow, odd stacking, weak contrast and broken links can remain undiscovered.	Make mobile, image-off and link checks part of sign-off.

Practical action plan for your next campaign

1. Choose one primary action. Write it down before drafting the email.
2. Sketch the first phone screen. Include the headline, a concise value statement and the primary CTA.
3. Use a single-column core layout. Add side-by-side sections only where they genuinely improve understanding.
4. Set readable defaults. Start body copy at around 16px, use comfortable line spacing and check colour contrast.
5. Build thumb-friendly controls. Give important buttons generous padding and separation from nearby links.
6. Replace image-only information. Put offers, deadlines, prices and CTAs in live text; write purposeful alt text for informative images.
7. Test failure modes. Review at phone width, with images off and in the clients that matter most to your audience.
8. Measure one improvement at a time. Use clicks, conversions and qualitative feedback to refine hierarchy, copy and CTA placement for the next campaign.

The strongest mobile email is not the one with the most effects. It is the one that lets a busy person understand the message, trust it and take the next step with very little effort.

Frequently asked questions

What width should a mobile-friendly email be?

Use a fluid outer wrapper and design the core message as a single readable column. Around 600px is a practical desktop maximum, but the email should reduce to the available width on a phone without horizontal scrolling.

What font size should I use for mobile email body text?

About 16px is a useful starting point for body copy. Also use sufficient line height, short paragraphs and strong contrast; font size alone does not guarantee readability.

How big should email buttons be on mobile?

Aim for a generous touch area. WCAG 2.2 sets 24 by 24 CSS pixels as a minimum target-size criterion in many cases, while 44 by 44 CSS pixels is the enhanced benchmark. A primary button around 44px tall is a sensible practical aim.

Should I put text in email images?

Avoid using an image as the only place for essential information. Put headlines, offers, prices and CTAs in live HTML text, and use images to support rather than replace the message.

Do media queries work in email?

They work in many clients, including Gmail, but support is inconsistent across email apps. Build a layout that is usable without the media query, then use responsive CSS as enhancement.

How can I make an email accessible on mobile?

Use readable live text, sufficient colour contrast, descriptive links, tap-friendly controls and appropriate alt text for informative images. Mark decorative images with empty alt text so they do not create unnecessary screen-reader noise.

How should I test a mobile email before sending?

Check it on real phones and relevant email clients, with images disabled and in dark mode where possible. Test every important link and review the complete landing-page journey, not only the email itself.

Sources and further reading

• CSS Support | Gmail — Google for Developers
• Can I email… Email Client Support Scoreboard — Can I email
• Understanding Success Criterion 1.1.1: Non-text Content — W3C Web Accessibility Initiative
• Understanding Success Criterion 1.4.3: Contrast (Minimum) — W3C Web Accessibility Initiative
• Understanding Success Criterion 2.5.8: Target Size (Minimum) — W3C Web Accessibility Initiative
• Understanding Success Criterion 2.5.5: Target Size (Enhanced) — W3C Web Accessibility Initiative