An email can look excellent on your monitor and become a small negotiation on a phone. Zoom in to read the offer. Move sideways to find the button. Tap the wrong link. Decide it can wait.
Mobile-friendly email design removes those little obstacles. The reader should be able to understand the message and take the next step without working out how your layout behaves.
You do not need a dramatic redesign to make progress. Start with the message, then test the journey on the devices people actually use.
Give the email one main job
Decide what you want the reader to understand or do. Put the relevant offer and the main action where they are easy to find.
A single-column layout is often a useful starting point because it gives the content a clear reading order. If your design uses several columns, check how they stack on a narrow screen. The attractive desktop arrangement may tell a different story when the blocks move.
Keep paragraphs short enough to scan, but do not remove conditions or explanations that someone needs to make an informed decision. Clear is better than merely short.
Make the inbox preview earn its space
The sender name, subject line and preview text work together before the email is opened. Put important words early, because the space available varies by device and inbox.
Let the preview add something rather than repeat the subject. For example, a subject promising a checklist could use the preview to explain what it helps the reader check.
Avoid treating a fixed character count as a guarantee. Test the combination in the inboxes that matter to your audience.
The reader came for the message, not a finger-precision exercise.
Make reading and tapping comfortable
Body text around 16 pixels and a generously padded button can provide a sensible starting point. A tap area around 44 pixels high is a useful design aim, not a promise that every email will be accessible.
- Leave space between adjacent links and buttons.
- Use clear button labels such as ‘View the workshop dates’ rather than a row of identical ‘Click here’ links.
- Check contrast between text and background.
- Keep essential text live rather than baking it into an image.
- Make the unsubscribe link readable and usable too.
A responsive template can help the layout adapt, but it still needs testing with your real copy and images.
Make the message work when images do not
Use images to support the message, not to hold every important detail. If images are blocked, the reader should still understand the offer and find the action.
Write useful alt text for images that communicate information. Decorative images can use empty alt text so assistive technology does not repeatedly announce details that add nothing.
Resize and compress images appropriately. A large file may look sharp on your connection while making someone else wait for the email to become readable.
Check dark mode and the destination page
Dark mode can change backgrounds and colours in unexpected ways. Check whether the logo remains visible and whether text still has enough contrast. Do not assume the editor’s preview represents every inbox.
Then tap through to the page you are sending people to. A comfortable email followed by an awkward form is still an awkward customer journey. Check page loading, text size, form fields and the final action.
Run a short pre-send test
Send a test message to a small set of relevant email clients and devices. Include a real phone where possible.
- Read the sender, subject and preview before opening.
- Check the order of the content on a narrow screen.
- Try the links without zooming.
- Check light mode, dark mode and image-blocked viewing.
- Complete the action on the destination page.
Use campaign reporting to identify useful differences, then test a specific improvement. Device and open information can be affected by privacy features, so avoid drawing sweeping conclusions from one report.
Your next move: open your last campaign on a phone and complete its main action with one hand. Wherever you hesitate, your next design improvement may be waiting.
The WizEmail Team
