responsive email design

In our Email FAQs series, we answer your email marketing questions! In this episode, Daniel Kohn, the Founder of SmartMail, answers this email marketing question he gets asked all the time by online retailers: What are some best practices for mobile and responsive email?

While you may have already put together a comprehensive eCommerce email marketing strategy, it’s essential to use email designs that are responsive for mobile and varied devices, as the number of people who read email on a mobile device is growing at an alarming rate!

Watch the video below to learn the most essential best practices for responsive email design You can also read the full article or listen to the audio at the bottom of the post.

Hi there. Welcome back to another episode of eCommerce Email FAQs. My name is Daniel Kohn. I’m your host. And today we’re asking the question, what are some best practices when it comes to optimizing for responsive email design?

A bit of a black hole…

Most People are Checking Email on Their Mobile Phones

A lot of people really still just think about email that it appears in people’s inboxes on their desktops, but the reality is that most people wake up in the morning today, I don’t know about you, but I do this sometimes, and we’ve seen this pattern happen a lot, is a lot of people are always gonna check their emails at [6:00] in the morning as soon as they wake up on their phone, or if you wake up at [8:00] in the morning, they’re gonna be checking their emails on their phone.

So responsive design is really important for emails and to consider that as part of your overall email design when you’re creating your templates.

Some of the things that you wanna think about and some best practices include trying to keep your emails as one column.

Usually if you have too many columns, what will happen is, when the template gets stacked, sometimes, you know, your headline might get stacked under an image. And usually in some email template as it is, you can control the stacking, and in some templates you actually can’t.

You gotta be really careful how the templates get stacked when you try and do email previews on responsive designs, because that can be an issue, and stacking can be an issue.

The best idea is to usually try and keep things in one column as opposed to having two or three, because the more columns that you have, the more the stacking becomes a bit of an issue. So that’s one thing to look out for for responsive designs.

Use Mobile-Friendly Imagery in Your eCommerce Emails

Another thing to really consider are the actual images that you use.

Now, you gotta remember that, when you look at an image on your desktop, and you’re sitting with your ad person, and they’ve got a nice, big, fancy 30-inch monitor, even bigger if they’re using Macs, things look really nice, right?

But when you scale it all the way down onto a phone, you really wanna test and preview how these images look, because sometimes if an image has too much detail and it’s too cluttered, it doesn’t really look so good, and it’s not gonna render so well when it’s sized down for a mobile phone.

Check your images before you actually send them out, and make sure they’re simplified. You don’t want too much detail in your email template images.

They don’t have to be detailed. The real point and the real seller if you’re selling products and you’re promoting products should really be the products themselves. The images are really secondary.

So remember that as well.

The One Thing You NEVER Want to Do

And the other thing with imagery is that you don’t ever wanna add HTML text over a specific image. You want the text to be part of the image itself, because when you start to scale it down on mobile, basically it causes nightmares, and I’m not gonna begin to even explain how problematic that is.

If you’re going to use imagery and you want text in the image, use the text as part of the image. So the text is saved as the image.

So it’s one file, and it scales down as opposed to dropping text on top of an image. Because when it comes to rendering and seeing how it comes up in different devices, it’s a very, very big problem. You don’t wanna go there. So that’s another tip about, you know, optimizing for mobile response and design.

Stack Email Product Recommendations for Optimized Viewing

And then the final thing you wanna be able to do as well is when you’re stacking, like, basically what happens is you can stack your products. So if you’re doing a product showcase, a really nice thing to do is because you want your products to be as visible as possible, and if you’re stacking three products in a row, and it comes down, and it fits on to, you know, your iPhone 7, you’ve got three products, the product images are gonna be really small.

One of the things that you really wanna try and do with your products, because you really wanna showcase your product as much as possible, is stack them one on top of the other, and most email clients can do this.

Email platforms with template editors, like in MailChimp, you can stack the products. And that is really another thing that you wanna be doing, because that allows you to have the product sort of really jump out and the imagery of the product jump out as much as possible as opposed to it being squashed down in a column with three other products in the same column.

One of the things that you don’t wanna do is squash your product items, and your pricing, or your call to action buttons. You wanna stack them. And that’s generally some basic functionality that you can use in your email template editors.

So there are a bunch of things you can consider around responsive design.

And, generally speaking, the most important thing really is to email yourself a copy and to take a look at how it looks on mobile before you actually press the Send button to the entire audience, because you’ll be able to see yourself if images don’t render properly, or if things don’t turn up properly, you can actually fix them, and, you know, it’s better to fix them before you send them.

So these are the best practices you want to keep in mind in order to really getting the most out of mobile responsive design for emails.

And if you’ve got any comments or any experiences, feel free to share them in the comments below. I’d love to hear from you, and I’d love to, you know, hear whatever your thoughts or feedback are on this particular topic, and I’ll do my best to respond as well. Thanks for watching.