An email that looks clear on a laptop can become difficult to read on a phone. Headlines wrap, paragraphs feel longer, links become harder to tap, and the main CTA may disappear below several screens of content.
Good email formatting prevents these problems by making the message easy to scan on both mobile and desktop. If you generate an email template with AI, you can quickly create a responsive structure, but the result still needs to be checked for copy structure, paragraph length, typography, spacing, and CTA placement. These elements all affect readability.
Here are the most important practices to follow.
Why Mobile and Desktop Read Differently
Mobile readers work with a narrow screen and usually scroll with one thumb. Even a short paragraph can take up most of the display, so a dense copy quickly feels overwhelming.
Desktop users have more horizontal space, but they may read emails in a narrow preview pane rather than a full-screen window. Very wide lines can also make text harder to follow.
That means responsive email design should focus on readability rather than trying to make the email look identical everywhere.
On any screen, readers should quickly understand:
- what the email is about;
- why it matters;
- what they should do next.
If those answers are buried in long paragraphs, formatting is working against the message.
Put the Main Message First
When deciding how to format an email, start with structure.
The inverted-pyramid approach works well: place the most important information first, then add supporting details.
The first screen should ideally contain the key message and a clear next step. Avoid long introductions that delay the reason for sending the email.
For example:
Instead of:
“Over the past several months, our team has been working on a number of improvements designed to make your experience better.”
Use:
“Your new reporting dashboard is now available.”
The second version tells readers immediately why they should continue.
Subject lines and preheaders should follow the same rule. Important words belong near the beginning because mobile email clients may cut off the rest.
Keep Paragraphs Short and Easy to Scan
Large blocks of text are difficult to read, especially on smartphones.
For most marketing emails, paragraphs of one to three sentences work well. Each paragraph should cover one clear idea.
Descriptive subheadings also help readers scan quickly. Compare:
What changes on November 1
with:
More information
The first heading tells readers exactly what they will find below it.
Lists are useful when several points have equal importance:
- highlight the main benefit;
- explain the next step;
- include only necessary details;
- remove repetitive copy.
A ready-made structure can make this process easier. Use the layout as a framework rather than trying to fill every available block. Remove unnecessary sections and keep the reading order simple.
Effective email copywriting is often about removing information that distracts from the main point.
Use Visual Hierarchy to Guide the Reader
A readable email should make the order of information obvious before the recipient reads every word. This is where visual hierarchy becomes especially important.
The main headline should attract attention first, followed by supporting copy and the primary CTA. Secondary details, legal notes, and less important links should appear later and use less visual emphasis.
Size, spacing, font weight, and placement all help create this hierarchy. For example, a bold heading followed by a short paragraph is easier to scan than several paragraphs that all look identical. The same applies to buttons: the primary CTA should stand out clearly, while secondary links can remain more subtle.
Avoid emphasizing too many elements at once. If every sentence is bold, several buttons use the same visual weight, and multiple sections compete for attention, the reader has no clear path through the message.
A good email layout should guide the eye naturally from the headline to the key information and then to the desired action.
This matters even more on mobile, where users see only a small portion of the email at a time. Clear hierarchy reduces the need to search for important information and makes the message easier to understand during a quick scan.
Use Readable Typography and Enough Spacing
Typography should make reading effortless.
A practical starting point for body copy is around 16–18 px. Headings should be larger enough to establish hierarchy without taking over the entire mobile screen.
A typical setup might use:
- body text: 16–18 px;
- section headings: about 22–28 px;
- main headline: around 28–36 px;
- line height: roughly 1.4–1.6 times the font size.
WCAG accessibility guidance also recommends ensuring content remains usable when line spacing is increased to at least 1.5 times the font size.
Left-aligned body copy is generally easier to read because each line begins in a predictable place. Center alignment works better for short headlines or very brief text than for long paragraphs.
Contrast matters as well. Light-gray text may look elegant in a design mockup but become difficult to read on a phone in bright daylight.
White space is equally important. Use clear spacing between sections, headings, paragraphs, and buttons. If an email feels crowded, shorten the content instead of simply reducing the font size.
Prefer a Single-Column Email Layout
For most text-heavy emails, a single-column email layout is the safest option.
On desktop, a limited content width prevents lines from becoming too long. On mobile, the same column can shrink naturally without forcing readers to zoom or follow complicated stacking patterns.
A simple structure could look like this:
Desktop
Logo
Headline
Short introduction
Main content
CTA
Secondary information
Footer
Mobile
Logo
Headline
Short introduction
Main content
CTA
Secondary information
Footer
The order stays the same. Only the available width changes.
This kind of structure is especially useful for mobile email design, because readers do not need to reconstruct a complex desktop layout on a small screen.
Make CTAs Easy to Tap
A mouse can accurately click a small text link. A thumb cannot.
That is why buttons are usually a better choice for primary actions on mobile.
WCAG 2.2 recommends a minimum target size of 24 × 24 CSS pixels in most cases, while Apple recommends touch targets of at least 44 × 44 points. In practice, larger buttons with enough surrounding space are easier to use.
Avoid placing several small links close together.
CTA text should also explain what happens next.
Use:
View the report
instead of:
Click here
Or:
Reserve my seat
instead of:
Learn more
A CTA should still make sense when a reader scans the email without carefully reading every paragraph.
Do Not Put Essential Information Inside Images
Important headlines, prices, dates, instructions, and CTA information should usually remain live text.
Text placed inside images can become unreadable when the image scales down. Images may also be blocked, and screen readers cannot interpret image-based copy as easily as HTML text.
Images should support the message rather than contain information the reader cannot afford to miss.
Meaningful images should also include appropriate alt text.
Include a Plain-Text Version
A plain-text alternative is still useful even when the main email is HTML.
It gives email clients another version to display when HTML is unavailable or unsuitable. It also provides a simple way to test whether the message still makes sense without visual formatting.
A good plain-text version should preserve the hierarchy of the message with:
- short paragraphs;
- clear section breaks;
- understandable URLs;
- simple, direct wording.
Avoid instructions such as “click the button below” because there is no button in plain text.
If the email becomes confusing when images, colors, and layout are removed, the message may rely too heavily on design.
Remember Accessibility and Dark Mode
Readable email design should work in different environments and for different users.
Use meaningful headings and link text. Add alt text to informative images. Do not communicate essential information through color alone.
Also check how the email behaves in dark mode. Backgrounds, logos, icons, buttons, and text colors may display differently depending on the email client.
A design that looks perfect in light mode can lose contrast when colors are automatically adjusted.
Test on Realistic Screens and Clients
A responsive template does not guarantee that every finished email will work perfectly.
Real copy can introduce new problems. A long headline may wrap badly. A translated CTA can become too wide. An image may dominate the first screen.
Before sending, check:
- subject line and preheader length;
- headline wrapping;
- paragraph length;
- image scaling;
- CTA size;
- spacing between links;
- content order;
- dark mode;
- alt text;
- plain-text formatting.
Whenever possible, preview the actual message on both a phone and a desktop screen.
Do not only ask whether the layout looks correct. Ask whether the message is easy to understand.
Can readers identify the purpose within a few seconds?
Can they find the main CTA?
Can they read everything without zooming?
Does the first screen contain useful information?
Those questions reveal usability problems that visual inspection alone can miss.
Final Thoughts
Good email formatting is mostly about reducing friction.
Put the main point first. Keep paragraphs short. Use descriptive headings, readable typography, enough white space, and a simple single-column structure. Make important actions easy to tap and keep essential information out of images.
Finally, test the complete email rather than assuming a responsive template will solve every problem.
Platforms such as Stripo.email can support responsive email production, but the principle remains the same regardless of the tool: the email should adapt to the reader, not force the reader to adapt to the email.
That is the foundation of effective responsive email design on both mobile and desktop.