A responsive email is one designed to adjust its layout to the screen it is opened on, so it reads well on a phone, tablet or desktop without zooming or sideways scrolling. Columns stack, images resize and buttons stay large enough to tap.
How responsive email works
Email is built in HTML, but mail apps support far less of it than web browsers do, and each app has its own quirks. Responsive emails combine several techniques:
- Fluid layouts that use percentage widths, so content shrinks to fit narrower screens.
- Media queries, CSS rules that change the layout below a certain screen width, for example turning two columns into one.
- Hybrid or “spongy” coding, which builds layouts that collapse sensibly even in apps that ignore media queries.
- Scalable images set to a maximum width, so they shrink on phones without breaking the layout.
Awkward cases remain. The classic Outlook desktop app for Windows displays email using Microsoft Word’s rendering engine, which ignores much modern CSS, so designers add fallbacks for it. Dark mode in many apps inverts or adjusts colours, which can make a logo or dark text disappear. Most platforms’ drag-and-drop templates handle the basics, but custom-coded templates need testing across apps.
Why it matters
Many people read email on a phone first, often in a spare few seconds. An email that needs pinching and zooming, or has buttons too close together to tap, loses those readers at once and makes the sender look careless. The same thinking drives mobile-first design on websites.
The landing page matters as much as the email. If a well-built email sends a phone user to a page that is slow or awkward on mobile, the click is wasted. Check the whole journey, from inbox to checkout or enquiry form, on the same phone.
Accessibility matters too. Under the Equality Act 2010, businesses providing services must make reasonable adjustments so disabled people are not put at a substantial disadvantage, and how you communicate with customers is part of that service. Live text rather than words baked into images, colour contrast in line with the WCAG accessibility guidelines, a logical reading order and alt text on images all help people using screen readers or magnification, and help everyone whose mail app blocks images by default.
Common mistakes
- Designing the email as one large image, which shrinks to unreadable text on a phone and shows nothing when images are blocked.
- Body text smaller than about 14 pixels, or buttons smaller than a fingertip.
- Three or four columns that stack into a very long scroll on mobile.
- Testing only in the platform’s preview, not on real phones and in Outlook.
- Transparent logos that vanish in dark mode.
- Several links close together in a line of text, which are hard to tap accurately.
How to act on it
Start with a single-column template from your email service provider; it is the easiest layout to keep readable everywhere. Use live text for headlines and offers, one clear button for the main action, and images that support the message rather than carry it.
Before each send, open a test on at least one iPhone, one Android phone and a desktop app, and check it in dark mode. If your list includes many office workers, check Outlook for Windows too. Paid testing services that show the email across dozens of apps are worth it if you send often or use custom code. Reviewing email templates for mobile and accessibility is part of my digital marketing strategy and consulting work.