A Beginner’s Guide to Designing Responsive Emails

Have you ever been checking email on your phone, and you get one that doesn’t look quite right? It seems like it’s zoomed in, and the pictures don’t fit in the frame. You do the pinch thing just in case you actually had it zoomed in for some reason, and nothing.

Later on, you click on that same email on your laptop, and all of a sudden, it’s perfect. Text is the right size, you can see all of the photos and links, and you wonder, what went wrong? That's an email that isn’t responsive.

Overview: What is a responsive email?

A responsive email is one that looks the same no matter what device you’re viewing it on, similar to CSS responsive web pages. Whether it be your laptop, desktop, phone, or tablet, the email will look exactly the same. For some viewers on the customer side, a non-responsive email might not be a huge deal. But for other customers, business owners, and marketing teams, it is crucial to your business’s email marketing campaigns.

How to create a responsive email to boost email conversions

Email responsiveness can have a direct correlation to sales, clicks, unique visits, and conversions, all of which are analytics carefully tracked by businesses, especially small businesses. You want to turn every person who receives your emails into a paying customer. Let’s take a look at how to create a responsive email in these easy-to-follow steps.

1. Choose the right design approach

Many email marketing software programs will help you create eye-catching emails, but not all of them are going to produce responsive emails. Make sure to pick a design program that specifically states it’s responsive or uses other wording to convey the same message.

You would hate to get to the end of the design process, try out your email, only to find out it only works properly on one device. Your mobile email design should look the same on a laptop or any other device your customers might be using.

Whatever program you choose, it should contain step-by-step guides for creating responsive emails or how to make a newsletter. Another option is to have your responsive emails custom coded. You can do that yourself, or you can hire a web designer. Going with a web designer might make it more difficult down the road if any changes need to be made to the actual code. It also might be more expensive, so that’s something to consider.

2. Get the actual design right

Once you’ve found a program that offers what you need, start designing and working on the dynamic email content. Remember, the goal of a responsive email is to get people to respond no matter what device they’re using, and convert those email opens into purchases.

Your email branding has to look inviting, but it needs to match the rest of your branding. Many programs feature drag-and-drop style editing, where you can grab text, photos, and other elements and drag them right into the email template. These are the main design elements that should be in your email:

• Your logo
• A large header that tells the reader the gist of the email
• Relevant images to break up text and fill in empty space
• Clickable buttons with engaging wording instead of hyperlinks

Likewise, omit some items from your emails. With phishing running rampant and people receiving so much spam email, it’s good practice to avoid using spam trigger words. Otherwise, your emails will most likely end up in the trash or marked as spam.

3. Test it once, and then a few more times

Automated platforms such as Mailchimp and Constant Contact allow you to send the email to a certain email address as if you’re sending it out to subscribers. This way, you’ll be able to scrutinize how it looks and go over it with a fine-toothed comb. Do this multiple times, and be sure to do it after every single change you make.

Also, make sure to view it on multiple device types, as well as email providers, to check the accuracy of the responsiveness. Emails might look different on an Apple device than they will on an Android, same with Google Gmail vs. Microsoft Outlook.

If you’re testing out two versions of an email, such as different subject lines or headlines, you’ll want to use A/B testing and send the emails out as normal to subscribers and track which version of the email has more success in terms of opens and click-throughs.

4. Track the numbers

The whole point of sending emails to customers or subscribers is to convert them into active buyers. The only way you'll know if you’re succeeding is to track how many leads your website gets directly from your responsive email. Some programs have inbuilt tracking analytics, but there are also separate programs out there you can use. Here are a few things you’ll want to track:

• Email opens and deletes
• Click-throughs
• Unique visits to your website
• Purchases as a direct result of your email
• Email deliverability

5. Make adjustments as necessary

You don't have to stick with your initial approach. If you aren’t seeing the results you wanted from your first responsive email rollout, go back to the drawing board and see what you can do differently. Send out different versions to friends, family, or coworkers, and encourage them to give honest feedback about what they like and don’t like. You also might want to check out some email design best practices if you’re feeling stuck.

Examples of responsive emails

Some companies you already know and love use responsive email, and you may not even know it. Below are a few examples, but note how different, or similar, they look between the two versions. The left is what each of these emails looks like on Google’s Gmail on an Apple iPhone 12, and the right is on Gmail on a Macbook Air.

Rakuten

Rakuten has chosen the single bar type of responsive email, meaning all of their important information and bulk of the email is all in one vertical bar. When viewed on a laptop, there is a lot of white space on either side of the blue bar, but when viewed on a smartphone, the blue bar takes up the whole screen.

It’s important with this style to put all of the most crucial information at the top since viewers will have to scroll to see the whole message.

Viewing this Rakuten email on a smartphone (left) vs. a laptop (right), you’ll see the bar design leaves a lot of white space on the laptop and none on the smartphone. Image source: Author

New York Times Cooking

The New York Times Cooking newsletter image presents similarly to the Rakuten one, except it has an ad at the top. The difference in background color is due to dark vs. light mode settings on the individual device, but aside from that, the emails present very much the same on a smartphone and a laptop.

The New York Times Cooking email newsletter displays similarly on a smartphone (left) and on a laptop (right), aside from background settings on the individual devices. Image source: Author

TurboTax

This one is a bit different from the other two. You will see that not only the layout has changed, but font size as well, between the two devices. If you’re viewing on a bigger screen, the font size doesn’t need to be as large as it does on a smartphone. TurboTax is a good example of a responsive email where certain aspects adjust based on the device you’re viewing it on.

TurboTax uses a different style of responsive email where the layout and font adjust based on the device the viewer is using. Image source: Author

Final thoughts

Email is one of the best ways to convert people into customers, but if it’s not done right, you won’t see results. Responsive email design ensures your content displays correctly across different devices. Incorporate it into your emails to increase your success rate with all your campaigns. Follow the steps above and see how far email can take your business.