Email has come a long way since the early days of computer messaging in the 1970s. Today, according to Statista, it’s a key channel for over 80% of global marketing campaigns — and it’s used by individuals in all age groups.
But as technology has evolved, so have our habits around where and when we access email. For a number of years now, mobile and web email opens have far outpaced their desktop counterparts. More than ever, people are getting their information (and their emails) on the go — and marketers need to prioritise these mobile experiences.
In addition to changing consumption trends, what used to be a fairly simple rendering binary of mobile vs. desktop has also evolved. Now, there are thousands of screen variations to account for — from differently sized cell phones and tablets to laptops and desktop monitors.
As marketers send more emails than ever before, you can’t afford to hinder your readers with a negative user experience on their device of choice. Modern email design has to be responsive and cover all the bases, and that means adopting a mobile-first mindset.
In this article, we’re exploring the value of mobile-first email design and sharing some practical tips on how to set yourself up for success.
The risks of putting mobile second
Something I’ll do early in the morning before I start my work day — whether I’m commuting into the office or sipping my coffee before I sit at my WFH setup — is check my email on my phone to get a sense of what I need to prioritise. If I’ve received a marketing email that doesn’t look great or has a poor user experience on my phone, I’m much more likely to delete it on the spot rather than leave it in my inbox and go back to it once I’m at my desk.
I know I’m not alone here. With work being such a hybrid experience now, people access their email in a myriad of ways throughout the day, and capturing their attention effectively the first time is vital.
More often than not, however, marketing teams optimise their email design for the desktop experience. Then, they build different versions, with fewer or more rudimentary features, to suit mobile devices.
If you’re taking this approach, your mobile readers may lose out by:
- Missing out on impactful design features
- Receiving an inconsistent text experience
- Having a compromised user experience due to poor rendering or non-responsive design
And if your brand is delivering these inconsistent and frustrating experiences to your readers, they’re far less likely to engage with your brand and purchase your product (or download your report or watch your video). In other words, not designing with a mobile-first mindset risks negatively impacting your campaign’s performance — and that’s something brands can’t afford in today’s email landscape.
Despite these challenges, a lot of marketing teams are still lagging when it comes to creating responsive email content. I can’t tell you how many times in the last year I’ve seen a Figma file for an email design that only focuses on the desktop experience.
Here’s how you put mobile first
Adopting a truly mobile-first mindset takes time. It requires changing how your team does things, potentially incorporating new tools, and following best practices that might be new to your team. But it’s more than worth it.
As you start navigating this shift in perspective, there are some simple changes you can start making that will help guarantee your readers are getting a great experience, regardless of where they’re reading your email.
For starters, make sure you’re checking your design in the mobile preview of your email builder, and design with that in mind. Consider how elements like padding and images can affect your mobile version, and use them accordingly.
Beyond that, here are some other tactics you can implement that will put you well on the road to mobile-first thinking:
- Put your CTA above the fold. This one applies regardless of how you’re designing your email, but it’s particularly important for mobile, where people’s attention span is limited. Make it as easy as possible for your readers to understand what you want them to do.
- Keep things concise. Short subject lines and preview text, easy-to-digest copy, and minimal scroll length are all ideal for mobile. Less screen real estate means content quickly stacks up — so, if you have too much of it, your readers are unlikely to reach the end.
- Keep padding consistent or remove it from the mobile version. It’s really disconcerting when the text in an email gets all squished together due to padding settings — and worse, it adds even more to the scroll length.
- Be aware of how your content will stack in mobile. Will the columns or tables you’ve used in the desktop version keep a logical order once they’re viewed in mobile?
- Keep your alignment consistent. With the limited screen size, it can look messy if you have a mix of right-aligned and centred text.
- Don’t forget to check on your background images. Use a size that’s appropriate for mobile so that it doesn’t take up the whole screen when it loads on a phone or tablet.
How Knak can help with mobile-first email design
At Knak, we’ve been spending a lot of time thinking about mobile-first design and how we can make it easier for our customers. It’s why we created separate adjustable settings for mobile and desktop.
With our new mobile settings, users can adjust the padding, text size, and alignment settings for each version, with the same responsive abilities we already had to adjust to different screen sizes. Whereas users used to have to rely entirely on our show/hide features, which often meant building things twice, now they just have to set different values for mobile and desktop.
Now, instead of duplicating content in your email, you can keep the code weight down and reduce the chance of it getting clipped by the likes of Gmail.
As marketers continue to elevate how they use email, adopting a mobile-first mindset will be key. I for one am really excited to see how this paradigm shift keeps changing the game in email.
Want to find out more about marketing email best practices? The Knak blog is a great place to start.