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.

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.

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. :)