10 ways to get the most out of your responsive email design
We’ve all opened emails on a phone or tablet where we had to scroll sideways to read everything, or struggled to click a tiny link, or seen missing blocks of content. It’s annoying!
Fortunately, an email marketing tool like MailerLite takes care of email responsiveness so it fits nicely on any screen. However, there are still important design best practices you should follow that will make your responsive emails look even better. Let’s take a looksy below along with some handy examples for inspiration.
What is responsive email design?
Responsive email design is when your design adapts to the size of the device screen. Elements in your newsletter are automatically resized or organized differently so the content can be shown correctly on smaller screens.
How does it work? Smart CSS media queries change fixed-width tables and images to make sure the content flows and adjusts from bigger to smaller screens.
If that sounds like gobbledegook, don’t worry—your email marketing tool should automatically do this for you.
In responsive email design templates, all your images, text blocks, videos, and so on will easily adapt to fit different screen sizes. For readers, it means that they don’t need to zoom in to clearly see buttons and text on small screens. All content will be displayed fully—creating a seamless, flowing user experience (yay)!
Why creating responsive emails is important
Responsive email design is a must. Here’s why:
Mobile devices are taking over: “Desktops are sooooo 2010!” Research by Adestra found that 61.9% of emails are now read on mobile devices. So if your emails aren’t adapted to these screen sizes, you’re probably alienating a big chunk of your subscribers.
Unresponsive emails get deleted, fast: Adestra also found that when people view an email on their smartphone that’s not displayed correctly, in 70% of cases, the email is deleted within 3 seconds. That’s basically an eye-blink or two—and if it happens a lot, they might also unsubscribe.
Responsive emails = happy subscribers: An adaptive email shows that you care about your audience’s reading experience, and they’ll be much more receptive to your message.
If you want your subscribers to experience high-quality interactions with you, the first step is to make sure your emails are ultra-responsive. Even though MailerLite will automatically take care of this, you still need to follow design best practices that can optimize the reader’s experience.
10 responsive email design best practices
Remember: your subscribers’ attention span is conditional on how responsive your email design is, and fortunately, there are several easy best practices to get your campaigns in shape.
1. Use a single-column email design
Though email campaigns that use multiple columns in their design can be aesthetically pleasing, it’s best to keep things simple when styling emails with mobile users in mind. A single-column layout is easy to digest, as each column is dedicated to one topic. When these columns are stacked underneath each other, it’s easy to read through the content.
Start with your most important content and work your way down. In mobile emails, it’s the hierarchy that counts. If your email gets too long, delete the columns that aren’t really necessary.
The email design from Perfectglasses.co.uk makes use of single columns only. This makes it easy for the eye to spot the Shop button, as they’re positioned on the same spot for each pair of glasses.
2. Write short paragraphs
The fewer words you can use, the better. When emails contain a lot of text, the reader needs to scroll more to get through the entire newsletter. On mobile devices, the amount of scrolling will be significantly more. That’s why it’s recommended to keep your writing short and compact.
And like we said before, make sure you position the most important text “above the fold” so that your subscribers don’t need to scroll to see it. Otherwise, they might miss out on some important communication!
Using fewer images also helps to shorten your email design vertically. Keep in mind that even when you use two columns (for example, a picture on the left and text on the right), you’re saving space on desktop but these columns will stack underneath each other on mobile, making your email longer.
This email from toothpaste manufacturer Bite shows how to keep your text short and to the point.
3. Craft a clear CTA (and buttons)
A clear call to action (CTA) is an overall email marketing best practice, and it holds true for responsive emails too. You have to tell people exactly what you want them to do, whether that’s visiting your online shop or clicking to read the rest of the article.
Your CTA influences the click-through rate, so it's important to have it nailed!
The best way to display the CTA is by using a button. Text links are small, and well, annoying and fiddly to click on mobile devices. Make sure your button is large and styled in a contrasting color, so it’s easy to spot. Aim for a button that’s at least 40 by 40 pixels. Make sure to test your CTA word length on a mobile device to make sure it’s not too long (and potentially takes up two lines).
At MailerLite, CTA buttons are designed so the entire button space is clickable, not just the text itself. This makes it easier to press the button.
Lastly, if you have several buttons next to each other (such as social icons), add enough white space between them so users can easily click on the button of their choice.
4. Check your font sizes
Before you deliver your email campaign to your subscribers, be sure to send yourself a test email to see what fonts look like on mobile. For example, you might find that the font is small and hard to read on mobile.
Opt for an easy-to-read font style type that is available on all devices, like Arial, Times New Roman, Georgia or Verdana. We recommend a minimum of 14 pixels for the normal text size and 20 pixels for headers. For mobile, 16 pixels is the best minimum font size for normal text.
The email newsletter below from ReadyMag is a good example of fonts, font sizes and CTA buttons that are super clear on desktop, tablet and mobile.
5. Review your images
When it comes to using images in email newsletters, make sure they show what you want to convey. For example, if you’re selling bags, check whether the bag details are clearly shown on mobile too. You might need a close-up shot or two.
Send yourself a test email to ensure that the images are easy to see on your smaller screens. Otherwise, you might want to think about restructuring, or using a different image.
In the example below from e-commerce Baggu, you can clearly see what the bag looks like, but this email could use a few additional close-up pictures to see the pattern in more detail.
6. Add ALT texts
In case your images are not displayed by an email service, or the reader is visually impaired, it’s good to have alternative texts as a backup.
Ideally, ALT texts should be added to all images within your email. They describe what’s happening in the picture. Even when the images aren’t shown, people can still get an idea of what your email content is about. This is also important for crafting accessible content.
Click here for a tutorial on where you can add ALT text in the MailerLite app.
7. Check widths and lengths
Minimize scrolling within the email design, both horizontally and vertically. The ideal max-width for images is 600 pixels on desktop, and 320 pixels on a mobile device.
Vertically, try to keep your email as compact as possible. If your email gets too long on the desktop, email clients like Gmail will clip your content to match the device width and display the “View entire message” notification at the bottom. On mobile, readers are likely to lose interest upon seeing how long your message is.
For example, this email by No7 makeup shares a concise, single-column message which gets straight to the point and keeps their subscribers’ attention.
8. Don’t overuse images, GIFs or emojis
When it comes to images, GIFs and emojis, having a good balance is key. For responsive purposes, it’s actually best to minimize their usage, as imagery can be blocked and using emojis in emails can look different depending on the email client that’s being used to read the email.
Stay away from image-only emails (in general). When images are blocked by the email client or user, your entire message will be gone. Furthermore, although the images will scale according to the screen size, the text you added on the images won’t. Essentially, this defeats the purpose of responsive email design.
For example, below you can see the responsive HTML email by London ceramic company Turning Earths. In the original email (click here to view), the design looks beautiful but in the example below something is missing.
The element showing the upcoming market dates is one entire picture. Should the reader’s email client block images, none of this information is visible. To be safe, it’s better to change the layout or add the dates in text-form as well. Furthermore, on mobile, the image text can become really small and hard to read.
In the MailerLite editor, you can let people RSVP to an event directly within the email by adding an event email block to your newsletter.
Want to learn more about design in email marketing? Learn everything you need to know in our design guide.
9. A/B test different responsive email designs
Unsure which email design is best? Put it to the test! With A/B testing, you can send two different versions of your email to two different sample groups of your subscribers. The email that gets the most opens and clicks will be sent to the rest of your audience.
This can be especially helpful when designing a responsive email because you can establish which layout generates the most clicks, and use that in future campaigns and automations.
To do this with MailerLite, you can opt to test for ‘email content’, which is where you make one small change or test two different versions of your email content. For example, you might try an image newsletter vs. a no-image newsletter, or test different CTA text and button positioning.
To learn more about A/B testing, take a look at this handy guide below.
10. Preview your responsive email before sending
To fine-tune your responsive email design, it’s best to preview it regularly as you build it—rather than getting a nasty surprise at the end! With MailerLite, you can see how your email will look on both desktop and mobile while you’re still in the editor. This means that you can make changes on the go, and make regular checks to see how it appears on different screen sizes.
4 responsive email design examples
Let’s see what these responsive email design best practices look like in real emails. Many MailerLite customers do a great job at creating email designs that are easy to digest on mobile screens. Below we’ll share a few of our favorites!
1. Breakfast with Audrey
This email, from Audrey Hepburn-inspired online magazine Breakfast with Audrey, looks great on all screens. The simple responsive email template uses a single-column layout and its elements are large enough to be clearly visible on every device. The images, CTA buttons, headings and social icons are all large enough so they can comfortably shrink to fit a mobile view without losing readability.
2. Caroline Svedbom
This newsletter design from Swedish jewelry designer Caroline Svedbom also uses a single-column layout. What’s nice about this email campaign are the repeated, clear CTA buttons and the diversity in the images. The first one sets the mood, the second image shows two jewelry pieces worn, and the last one shows the reader what the gift packaging will look like.
3. Sole Finess
This responsive HTML email, by Australian shop Sole Finess, promotes a new model of Nike sneakers. To make sure the details can be clearly seen on all devices, they opted for different images, each fairly close-up. The large CTA button clearly stands out in the email design. A small improvement would be to opt for a slightly larger text font size.
Though you can't see it in the image below, Sole Finess also nailed their email preheader (“Waffle locket included + up to 60% off sale items!”). This gives subscribers a tease of what to expect inside the email. Want to know how to best craft a preheader of your own? Click to read how to increase your email open rates with preheaders.
4. Harness Magazine
The newsletter below from Harness Magazine works for desktop, tablet and mobile. The dark green buttons are in contrast with the background. The simple design makes this email easy to digest on smaller screens. Because all texts are short, the font size could have even been bigger. This would barely affect the newsletter’s length but optimize the user experience.
With MailerLite, you can easily insert social media posts from Facebook and Instagram. These embedded posts are, of course, automatically responsive. Alternatively, you can take a screenshot of the post, add it to the MailerLite image block and link it to the post URL.
How to create responsive emails in MailerLite
Easy! If you're starting a new campaign, first head to your dashboard and click Create campaign. Then pick a newsletter template from the gallery or start building from scratch. Each design block that you drag and drop into your email template will automatically be made responsive.
Once you’re ready, click the Preview and test button on the upper right to see what your newsletter will look like when displayed on smaller screens in a mobile client.
P.S. You can also create mobile pop-ups with MailerLite to accommodate smaller screen sizes.
That's all, for now
Congratulations, you’re now a responsive email designer! Your emails will be readable on all screen sizes, giving your readers a pleasant user experience.
Design practices like one-column layouts, ALT texts and shorter texts with larger fonts will improve your design. And as a reward, better click-through rates and conversions will follow.
Ready to design your own responsive emails?
MailerLite lets you craft professional campaigns in minutes, and it automatically adapts them for different screen sizes.
Have you made your newsletter content adaptive to different screen sizes? Share your responsive email design tips with us in the comments below!
Editor's note: This article was originally published in September 2020. It has now been updated with new insights and examples.
