Responsive design isn’t new. Web designer Ethan Marcotte came up with the phrase in 2010. That’s fifteen years ago. And that’s a long, long time in ‘tech years’.
Today, responsive design is the norm both in web and email development. It is understood that a user may be viewing content on the biggest ultrawide monitor, the narrowest mobile phone, or anything in-between.
Why then do so many emails still look rubbish on mobile?
1. Designed on desktop… for desktop
It’s easy to get carried away when working in a creative application like Photoshop or Illustrator. A designer can go wild with typographical effects and gradients and overlapping visual elements and perhaps some fancy borders to wrap it all up.
But here’s the thing: we’re not dealing with a flyer that will be identically produced thousands of times over. We’re talking about digital content that must mould itself to any viewport. It’s all too common for the mobile layout to be an afterthough, if even a thought at all.
2. Overreliance on images
Eye-catching imagery is undoubtedly an important aspect of graphic design. The trouble with email is that the fancier the design, the more likely an email developer will need to resort to images in order to replicate it. Email applications simply are not as capable or standardised as web browsers.
Perhaps the most common problem is image-based typography. Headings are often incorporated into banners or ‘hero’ images. These sit above a paragraph of actual text. That’s all well and good on desktop, where the relative sizes make sense. But on mobile, that banner – and its copy – are going to shrink. That could happen to such an extent that the heading ends up smaller than the body copy below. There goes the emphasis.
3. Link saturation
Responsive design isn’t all about looks. It’s also about function. The implementation of links is a big part of that. And ultimately it boils down to a few common sense rules:
- Linked elements should be easy to identify and operate. Large buttons are perfect.
- The user should know what to expect when pressing any linked element. Clearly-stated calls-to-action go a long way.
- Secondary links should be used sparingly, and made visually distinct. Outlined ‘ghost’ buttons are a simple way to achieve that.
But often in reality this user-friendly simplicity is eschewed in favour of more stuff. A single feature in an email can end up with multiple links to multiple places. It all becomes uncomfortably crammed together on smaller screen sizes, and it’s more likely than not that the user won’t be able to tell what links to where. It’s a link lottery.
4. Scared of scrolling
Mobiles are best suited to single-column email layouts. Yes, two columns are technically possible. But just look at the shape of a phone – it’s clear at a glance that a single column is the most comfortable design for the device.
Increasingly often however there is a desire to squeeze in multiple columns on mobile. That might work out alright on an iPhone Pro Max, but not everyone is using such a wide handset. Where copy is involved, multiple columns can result in tiny text. That’s bad for accessibility and simply does not look good.
5. Lost in the darkness
Screen size isn’t the only factor in responsive design. There’s also display mode, with its light and dark themes. Dark mode remains a widely overlooked aspect of email design.
It’s worth mentioning that dark mode takes two forms in email:
- Forced dark mode. Email applications like Gmail and Outlook will force a dark mode colour scheme of their own.
- Explicit dark mode. Applications like Apple Mail, with superior rendering capabilities, allow the developer to take full control of an email’s appearance on dark mode.
If an email is not developed with forced dark mode in mind, it can result in a very ugly, partially inverted mailing.
Ignoring explicit dark mode environments isn’t quite so disastrous. In fact, nothing will happen to the email. But it often means ignoring the user’s preferences by showing them a white-backgrounded or otherwise brightly-coloured email.
What can be done about it?
That’s a whole lot of negativity above, so let’s look at ways to turn it around. To produce great emails for all devices and applications is an achievable goal.
1. Get to know the medium
Best case scenario is a specialist email design team, but not every company has the means for that. Every designer can however spend some time becoming more familiar with email. Have a look at emails on different devices. Browse the massive library on Really Good Emails. Check out some email marketing blogs. The resources are out there.
2. Let text be text
Image-based text is fundamentally flawed both in concept and execution. Text is the logical format for copy, not pictures of text. It can wrap naturally to its container without shrinking to silly tiny lettering on smaller screens.
This doesn’t mean that an email cannot incorporate rich imagery. It absolutely should. Photographs or illustrations can be paired with text to powerful effect. The creative possibilities are endless, while respecting the constraints of the medium.
3. Keep it focused
An marketing email’s job is usually to drive traffic to a website. A customer might spend mere seconds looking at the email. Keep the copy succinct and the links focused on the task. The website, not the email, is the place for in-depth browsing.
4. Give it room to breathe
A single column means more scrolling. But with mobile users spending as many as three hours per day doing that, it’s as instinctive in the digital space as walking is in the real world. Breathe, don’t squeeze.
5. Turn the lights out
It’s clear that many companies are blissfully unaware of how their emails look in dark mode. Don’t be one of those. Viewing emails in dark mode is an essential part of the modern testing process.
Better emails, better results
Roughly 50% of emails are opened on mobile. If a mailing’s appearance there is essentially a butchered version of the desktop design, then it’s a poor user experience. It’s worth going back to the drawing board to produce a truly email-friendly design that looks great everywhere. The results will speak for themselves.