{"id":257327,"date":"2026-08-21T11:36:37","date_gmt":"2026-08-21T09:36:37","guid":{"rendered":"https:\/\/spotler.com\/?post_type=blog&p=257327"},"modified":"2026-08-24T22:23:39","modified_gmt":"2026-08-24T20:23:39","slug":"mobile-email-design","status":"publish","type":"blog","link":"https:\/\/spotler.com\/en-gb\/blog\/mobile-email-design","title":{"rendered":"Mobile is not a smaller desktop: How to design better emails for mobile"},"content":{"rendered":"

A responsive email isn’t necessarily a mobile-friendly email. Learn how to design for the way people read, scroll and interact with emails on their phones, from the first screen to the final tap.<\/strong><\/p>\n

There’s a version of me that email marketers really don’t want on their mailing list at 7:30 in the morning.<\/p>\n

I’m on the train, coffee in hand, looking at all the emails that have arrived overnight and I’ve got one goal: get rid of that little red notification number on my email app. Welcome to swipe-a-geddon<\/em>. Swipe. Delete. Swipe. Delete. Swipe. Delete.<\/p>\n

I’m brutal. Even brands I like aren’t safe. Your subject line has a few seconds to make me stop, and if it’s so long that half of it has been cut off, I’m probably not going to spend time piecing together what you wanted to say.<\/p>\n

But even getting me to open doesn’t mean you’ve won my attention.<\/p>\n

When I have more time to look at emails on my phone, I often open one and immediately start scrolling. I’ll quickly scan down the email before swiping all the way back to the top if something catches my eye.<\/p>\n

I’m not really reading at that point. I’m looking for a reason to stop. And that’s the problem with treating mobile email as a smaller version of desktop.<\/p>\n

A responsive email can technically work perfectly on a phone and still be a poor mobile experience. The columns might stack. The images might resize. The copy might fit on the screen. But none of that means you’ve designed for how someone uses their phone.<\/p>\n

Mobile is a different environment, with different behaviours and far less attention. Good mobile email design isn’t simply about making your desktop email fit a smaller screen. It’s about designing for the person holding it.<\/p>\n

And sometimes that person is on the 7:30am train, ruthlessly swiping away everything you’ve spent all day creating.<\/p>\n

<\/div>\n
\"Reading<\/figure>\n

Subscribers aren’t sitting at a desk<\/h2>\n

One of the easiest mistakes to make when designing an email is forgetting the environment it’ll eventually be read in.<\/p>\n

You’re probably building it on a laptop or large monitor. You’ve got a mouse, plenty of screen space and, most importantly, the email has your full attention.<\/p>\n

Your subscriber might look at exactly the same campaign while standing on a train, waiting for the kettle to boil or half-watching something on TV.<\/p>\n

They’ve got one hand, one thumb and considerably less patience. That’s why designing for mobile isn’t just about screen size. You have to design for a completely different level of attention.<\/p>\n

An open doesn’t mean they’re reading<\/h2>\n

This is particularly important when we look at opens. Getting someone to open your email on mobile doesn’t necessarily mean they’ve stopped to read it. I’m a perfect example.<\/p>\n

When I’m not in ‘morning swipe-a-geddon mode’ <\/em>and an email does get my attention, I often open it and immediately start scrolling.<\/p>\n

I’ll scan quickly down the entire email, almost without thinking, before heading back to the top if something has caught my attention. Thanks to Facebook, Twitter and every other infinite feed I’ve spent years scrolling through, I suppose.<\/p>\n

The important bit for email marketers is that I’m not really reading during that first scroll. I’m scanning.<\/p>\n

I’m looking for something that makes me stop.<\/p>\n

A strong hero image. A big, clear headline. An interesting product. An offer. Something that gives my thumb a reason to take a few seconds off.<\/p>\n

\n

“On mobile, the first job of your email isn’t always to be read. It’s to stop the scroll.<\/strong>“<\/p>\n<\/blockquote>\n

That means strong visual hierarchy becomes even more important. Your subscriber should be able to move quickly through the email and still understand what’s important, where one section ends and another begins, and what deserves their attention.<\/p>\n

Mobile readers can be brutal. Your design needs to make their job easy.<\/p>\n

<\/div>\n
\"\"<\/figure>\n

Responsive doesn’t automatically mean mobile-friendly<\/h2>\n

Most modern email templates are responsive. That’s a good start, but it doesn’t mean the job is done.<\/p>\n

An email can pass all the obvious technical checks. The columns stack. Images resize. Nothing disappears off the side of the screen.<\/p>\n

And it can still be horrible to use on a phone.<\/p>\n

Stacking isn’t the same as designing<\/h3>\n

The more complex your desktop design becomes, the more thought you need to give to what happens when all that content is squeezed into a single column.<\/p>\n

Take a simple two-column block with an image on the left and copy on the right. Add another underneath with the copy on the left and image on the right.<\/p>\n

It looks great on desktop.<\/p>\n

Let everything stack automatically on mobile and you can suddenly end up with image, copy, copy, image. The visual pattern you carefully created on desktop has disappeared.<\/p>\n

\n

“That’s where techniques such as column swapping become important.”<\/strong><\/p>\n<\/blockquote>\n

You might need to deliberately change the order of your content on mobile so each image still sits alongside the copy it belongs to.<\/p>\n

Three-column layouts can be even trickier. What looked like one neat row on desktop can become a very long section once those three columns are stacked on top of each other.<\/p>\n

Sometimes, the best answer is to stop trying to make the desktop design work.<\/p>\n

Sometimes mobile needs its own creative<\/h3>\n

Back in the day, when I worked on Sainsbury’s Online creatives, we’d regularly swap desktop hero images for dedicated mobile versions using CSS.<\/p>\n

The desktop image had been designed for a wide space. Simply shrinking it down could make the product, message or focal point far less effective.<\/p>\n

So mobile got an image designed specifically for mobile.<\/p>\n

The same principle can apply to entire content blocks. If a particularly complex desktop section doesn’t translate well to a phone, it can sometimes be better to hide it on mobile and build an alternative version specifically for the smaller screen.<\/p>\n

Of course, that takes more time and resources, and it won’t be necessary for every campaign and business. But it highlights an important distinction:<\/p>\n