How To Design Marketing Emails That Look Great On Mobile

If you are putting time, effort and budget into email marketing, the last thing you want is for your carefully crafted message to fall apart the moment someone opens it on their phone. And yet, this is exactly what happens to a surprising number of marketing emails every single day. The reality of modern email consumption is that the majority of people are reading their inbox on a mobile device, and if your email is not designed with that in mind, you are already fighting a losing battle before anyone has even read a single word you have written.

Designing marketing emails that look great on mobile is not just a technical concern, it is a fundamental part of good email marketing practice. The good news is that getting it right does not require you to become a developer or rebuild everything from scratch. It requires an understanding of how mobile email clients render content, and a commitment to designing with smaller screens as the starting point rather than an afterthought.

Start With A Mobile-First Mindset

The most significant shift you can make is in how you approach the design process itself. Rather than designing for desktop and then scaling down, start by asking how this email will look and feel on a five or six inch screen. This changes everything, from how much text you include in a single section, to how large your buttons need to be, to how your images are structured.

Mobile-first design means keeping layouts simple and linear. A single-column layout is almost always the safest and most effective choice for mobile email. Multi-column designs that look polished on a widescreen monitor can collapse into a jumbled, unreadable mess on a phone if they are not coded with responsive design in mind. Most of the leading email marketing platforms, including Mailchimp, Klaviyo and Campaign Monitor, offer responsive templates built specifically to handle this, and if you are starting from scratch, these are well worth using as your foundation.

Font Size And Readability Matter More Than You Think

One of the most common issues with mobile email design is text that is simply too small to read comfortably without zooming in. If a subscriber has to pinch and expand just to understand your message, the chances of them continuing to read, let alone clicking through, drop significantly.

Body text should be set at a minimum of 14 pixels, and many designers working specifically for mobile prefer 16 pixels as a standard. Your headline or subject-level copy within the email body should be larger still, typically between 22 and 28 pixels, to create a clear visual hierarchy that guides the reader naturally through the content. Line spacing also plays a role here. Text that is too tightly packed becomes difficult to follow on a small screen, and generous line height, generally around 1.5 times the font size, makes a noticeable difference to readability.

What to do: Review your current email templates and check all body and heading font sizes specifically on a mobile device. Adjust anything below 14 pixels and test again before sending.

Images Need To Be Handled Carefully

Images can make an email feel polished and on-brand, but they come with a set of challenges in the mobile environment that are worth addressing head on. Large image files increase load times, and on a mobile connection that can mean your beautifully designed header never actually appears. Worse still, many email clients, including certain versions of Outlook, block images by default, which means a significant portion of your audience may be looking at a broken layout with missing visuals.

Always include descriptive alt text for every image so that even when images are blocked, the reader understands what they are looking at and the email still makes sense. Keep image file sizes as small as possible without sacrificing quality. A general target of under 200KB per image is a sensible benchmark. Use the width attribute in your HTML to ensure images scale correctly within the container rather than overflowing the screen.

What to do: Run your email images through a compression tool such as TinyPNG before uploading them to your platform, and always write meaningful alt text that serves the message even in the absence of the image itself.

Buttons And Calls To Action Must Be Thumb-Friendly

Your call to action is arguably the most important element in the entire email. If it is a small, hard-to-tap hyperlink buried in a paragraph of text, you are making it unnecessarily difficult for mobile users to take the action you want them to take. People scroll through their emails with their thumbs, and buttons need to be large enough to tap comfortably without accidentally hitting something else.

A well-designed call to action button should be at least 44 pixels tall and ideally wider than it is tall, giving the reader a generous target area. The button should have a clear, contrasting colour that stands out from the surrounding content, and the copy on the button itself should be direct and action-led. Avoid centring multiple links or buttons too close together on mobile, as this increases the likelihood of accidental taps and a frustrating user experience.

What to do: Replace text-based calls to action with properly designed HTML buttons, check their dimensions on an actual mobile device, and ensure there is enough spacing between any secondary links so that each one is easy to tap independently.

Keep Your Preheader Text Working Hard

The preheader is the short line of text that appears in the inbox view immediately after your subject line, and it is one of the most underused elements in email marketing. On mobile, where screen space is limited and inboxes are crowded, that preheader text has real influence over whether someone opens your email at all.

If you do not define a preheader, most email clients will simply pull the first line of text from your email body, which can be anything from a navigation link to a legal disclaimer. Taking control of that text and using it to extend or complement your subject line is a straightforward way to improve open rates without changing anything about the email itself. Keep preheader text between 85 and 100 characters, as this tends to display well across most mobile email clients.

Test Before You Send, Every Single Time

No amount of careful design work replaces actual testing. Email clients render HTML differently, and what looks perfect in one environment can break entirely in another. Litmus and Email on Acid are two well-regarded platforms that allow you to preview your email across dozens of clients and devices simultaneously, which removes a great deal of guesswork from the process.

Beyond platform-based testing, always send a test email to your own phone and review it personally. Look at how it opens, how quickly images load, whether the fonts are readable, whether the button is easy to tap, and whether the overall layout holds together. If something feels awkward or difficult to navigate, your subscribers will feel the same way.

What to do: Build email testing into your standard pre-send checklist. It should be as routine as checking your subject line and proofreading your copy. A few minutes of testing can be the difference between an email that performs and one that gets deleted within seconds.

Do Not Overlook Load Speed

Mobile users are often on variable network connections, and an email that takes too long to load will simply be closed and moved on from. Beyond compressing your images, be mindful of how much HTML and CSS you are loading into the email. Overly complex code, excessive use of custom fonts, or embedding elements that require external resources can all slow things down in ways that are not immediately obvious during the design stage.

Stick to web-safe fonts where possible, or use Google Fonts with a fallback stack so that if the font does not load, the email still looks clean and professional rather than defaulting to something unexpected. Keep your overall email file size under 102KB where you can, as Gmail in particular clips emails that exceed this threshold, meaning your subscribers may miss key content including your call to action.

Getting Mobile Email Design Right Is Worth The Effort

Designing marketing emails that look great on mobile is one of those areas where attention to detail pays genuine dividends. A clean single-column layout, readable typography, properly sized images with descriptive alt text, thumb-friendly buttons, a strong preheader, and thorough testing before every send are the foundations of an email that works in the real world, not just on a design preview screen.

The brands and businesses that consistently get email marketing right are not necessarily the ones with the biggest budgets or the most sophisticated technology. They are the ones who understand that the email is ultimately going to be read by a real person, on a real device, in the middle of a busy day. Design with that person in mind, and everything else follows naturally.