Email Design:

Mobile-First Approach

Have you ever found yourself endlessly scrolling on your phone while you only wanted to “quickly see” what’s new on social media? Or have you ever felt “lost” when your phone is not around you? Yeah, we also know how that feels.

Phones have become such an inseparable part of our lives that we wouldn’t be surprised if one day they become a part of our physical bodies as well. Jk, of course, but if we really consider how much time we spend on all those apps, they really are a part of us.

Just for reference, smartphone users spend on average 3 hours and 15 minutes on their phones. Which is quite a lot, don’t you agree?

Also, recent research has shown that approximately 50% of overall website traffic comes from mobile phones, which means that the internet has become a mobile-first marketplace.

And with that in mind, it would make perfect sense for any designer, whether a web, app, product, or email designer, to shift their efforts from desktop to mobile or in other words, to follow and prioritize the mobile-first approach in design.

What is mobile-first approach in email design?

The answer is quite simple. It means designing first for the smallest screens and then working your way up to designing for desktops. If you think about it, that’s quite opposite of what is usually done since the designing process is done on desktop in most cases.

However, don’t confuse it with responsive design. Responsive design means making sure that the design is responsive on all screens and sizes but it always starts and prioritizes the size of the desktop screen.

How do we start the email design process, you might ask?

First and foremost, the mobile-first approach is in fact a content-first approach, which automatically means that it is a user-first approach. The heart of the design is the main content, and by knowing that, you get closer to the reason why the readers are consuming the content, and how to make it more enjoyable for them.

Of course, we wouldn’t be as awesome as we are if we didn’t share some practical tips that will help you nail the mobile-first approach.

  1. First, start by designing for the targeted audience. What does this mean? Put yourself in their shoes and think about what is the most important content that they want to see? Apply that in the clearest and most straightforward way possible.
  2. Continue with a clear reading path that will walk the user through the visual hierarchy of the elements. We all know how we all lose interest with every scroll that we make, so make sure to put the most important elements first.
  3. Leave more space around buttons and hyperlinks, and remember that fingers (unfortunately) are not mouse cursors (yet!), so there is no need to create the hovering effects which we all love. :)
  4. And in the end, look at the email as if you’re looking at a landing page. It should be easy and pleasant to use, read, and go through.

Is the mobile-first approach the best option for every brand?

As much as we would like to have a clear answer to that, the reality is that it depends on your target audience and the purpose of your client’s business.

But there is one thing that will make you stand out as a great designer among the sea of competitors. And that is knowing exactly who you are designing for, understanding their needs, and delivering that information flawlessly.

A mobile-first user will have different needs from a desktop-first user, so you, as a designer, need to think of both of them.

One good thing that we need to mention is that when you are designing for mobile, the progression to a large screen doesn’t require much effort since it’s easier to add elements than to subtract. This makes the whole process waaay easier and more convenient!

Also, believe it or not, people are so used to scrolling through a never-ending feed of information, so they wouldn’t mind scrolling through a little bit longer email as long as it grabs their attention and keeps it. And how to achieve that? That’s a whole other topic of discussion that we can talk about some other time. :)

Some final thoughts

In the end, let’s talk about something no designer feels comfortable admitting. And that’s the fact that design is not the most important thing, no matter how much it hurts us to say this.

Why do we say this?

Because, no matter how aesthetically pleasing something is and how perfect all the details are if it’s not user-friendly and easy to understand, and navigate through it, it will soon be closed and forgotten.

And, most certainly we don’t want that! We want them to enjoy our content and design and to be hitting those CTA buttons.

Last but not least, do you know what our mantra is? :D TEST, TEST, TEST!

You need to test your emails on real devices. Make sure to send it to your personal inbox and open it from your phone to see how it feels on your eyes and fingers. You would be surprised how much some small details can make a difference when seen on a smaller screen.
Aleksandra Azmanova
Email Designer @ The Better Creative
In collaboration with Simona Gelova, Content Marketing Expert
July 8, 2022

Need help with your email design?

Leave us your email and we'll reach out soon!