How to improve the design of your responsive emails

Why is responsive email important?

Mobile email clients primarily use apps for opening emails. So we as email marketers need to build responsive emails to ensure our messages are compatible on mobile, specifically the latest iPhone models. Implementing responsive emails means reaching your audience effectively, regardless of the device they use.

As we mentioned above, responsive emails change their shape and size to be appropriately displayed based on different screen sizes. There are some great tutorials online for less savvy HTML email developers that teach simple techniques for creating responsive emails.

Traditionally, to style and format our emails, we use Cascading Style Sheets (CSS), just like they do in web design. We can use CSS to create mobile-friendly email templates, but there’s one issue. Gmail and other email clients can be more particular about CSS and can strip off your <style> tags, ruining how your emails look.

Tips to improve the design of your responsive emails

Now that you understand why these kinds of emails matter, let’s discuss how you can apply design tactics to take your responsive email development to the next level.

1. Single column layout

Displaying your content in a single-column format will make things better for you and your audience. For starters, information is easier to read when presented in one column. Not only that, single-column content is easily scalable for all screen sizes. This format empowers even beginners to send out responsive emails with minimal to no email coding abilities.

2. Font size

Use 16px-18px font for the body text in your email framework, and don’t use anything smaller than 20 pt font for section titles. Keeping this rule of thumb in mind will optimize your content for all readers, no matter how old they are or how small their screen is. After all, it's incredibly frustrating to receive an email that you can’t read.

3. Lead with the most important information

It might sound like a no-brainer, but the first and most crucial step in creating engaging messaging is grabbing the audience’s attention from the moment they start reading. And not to freak you out, but a known factor in digital email marketing is that your audience will only read your emails for a few seconds before they lose interest, exit, and leave that call-to-action (CTA) in the dust.

With this in mind, make your CTA or most appealing information the first thing your audience reads when they open your email. Limit any friction between your audience and the content you want them to see. The less you’re in control, the more they have to scroll (which isn’t an expression, but it sounds good because it rhymes, right?).

4. Optimize your hyperlinks

Hyperlinks in email newsletters and marketing emails are kind of a double-edged sword. They’re great because you can use them to gently nudge your audience towards your landing page or CTA. On the other hand, not using them properly can make your emails look like spam sent by a fraudster, giving you a one-way ticket to the ISP blocklist.

We suggest being careful with how you use hyperlinks in the body of your text. Avoid using link shorterners, as it’s a resource often utilized by bad actors trying to hide malicious links.

5. Strategic imagery

A picture is worth a thousand words, but they’re worthless in email marketing if they disrupt your email design compatibility. When using images in your email content, consider the following:

• Incorporate fluid design, which automatically adjusts the length and width of your images to adapt to the size of the screen they are viewed on.

• Apply alt tags as a backup in case the images don’t load for some reason.

6. Test your emails before sending 

Maybe you’ll think this is overkill, but sending yourself an email to see how it looks to a recipient can save you from embarrassment. Email on Acid can help you out with this. Do yourself a favor and be safe, not sorry.

Mistakes to avoid in a responsive email

Clearly, responsive email design isn’t the easiest or most intuitive technique in your email marketing arsenal. We’ve compiled the most common mistakes marketers make using responsive email design.

1. Changing something that’s already working

If your responsive email template is working, don’t monkey with it. Out-of-date idioms aside, consider the time and energy that goes into creating a responsive template. More innovating might break the responsiveness, and then you’re back to square one. Plus, by using the same template repeatedly, you’re maintaining consistency across your email marketing content.

2. Using bad content 

The truth is that some email marketers care more about the medium than the message. In this case, the medium is responsive email design, and even if marketers get it right, it’s meaningless if the content doesn’t make an impact.

We encourage you to do A/B testing for your messaging and get as much performance data as possible. Once you’ve nailed your copy, you’ll be closer to putting out effective, responsive emails.

3. Not considering the entire experience

Imagine you’ve put together the perfect responsive email:

Someone from your target demographic has opted in to receive your personal email marketing material. You send a responsive email at the appropriate time, and they’re captivated by your fantastic copy. You’ve held their attention, and they’ve clicked on your CTA only to land on your half-baked landing page. This person loses interest, clicks away, and your transactional email fails. Then the user unsubscribes. (Thankfully, there are plenty of cute GIFs on the internet to cheer you up.)

Your audience will probably view your emails and landing page on the same device. Everything from the fonts to the background colors to the voice your copy is written in should be consistent with what you’re using in your responsive emails. By keeping the entire experience in mind, you can increase your conversions and build more customer equity.

4. Not being succinct

Long paragraphs can be so intimidating that they deter readers from actually reading content, no matter the quality. But what if those long paragraphs used a 12px font to fit the screen of the smallest smartphone on the market? That reading experience hasn’t been designed for success.

We implore you to write your responsive email copy in a short sentence and small paragraph format. Your copy should be so simple that a corporate commercial lawyer with no extra time can skim it, understand its value proposition, and click your CTA with as little effort as possible. Also, make your paragraphs left-aligned to maintain consistent character and word spacing and improves readability and email accessibility.

5. Underthinking your images 

We’ve given you tips on using images in responsive emails because it’s an area that email marketers often overlook. Your email copy could be neatly wrapped around an image on a desktop, but it could end up under that image when viewed on a tablet.

We recommend testing your emails across as many different screens as possible to avoid potential mishaps. This way, you can catch or fix any possible garbled experiences.

How to optimize your responsive emails across major email clients and email apps

Email is ubiquitous, but only a select number of email clients have skin in the game. The top three most used clients in the US and the UK have a combined market share of 97%. Once you have these few locked down, plus some of the most popular apps to read email, you’ll be well versed in creating responsive emails. In this post, we’ll concentrate on these five major email service providers:

• Apple 

• Gmail 

• Outlook 

• Yahoo! Mail 

• Google Android 

The following chart explores other typical email clients and indicates whether or not they support responsive email design:

You might be scratching your head about what technique to use so your emails look good on all major platforms. Here are some tips to help you make your emails look good no matter where or how they’re viewed.

Apple iPhone 

When designing emails to render correctly on iPhones, especially the latest iPhone models, pay close attention to your email width. Creating your emails with the screen size in mind is critical here. To display emails correctly on all mobile devices, use “media queries” to tell your email to adjust to the device’s screen size.

Gmail

As touched on earlier, Gmail is not a fan of CSS, so to render correctly on mobiles and Gmail, you need to place the most basic styles inline.

This is how your CSS would look embedded on top of your email:

This is how you would want your CSS to look when it’s inline.

Apple iPad

Here we use a very similar technique to optimizing emails for mobiles. By looking at your campaign reports, you can see what model and device your customers use to open your emails. Use the dimension of the popular devices and media query to ensure your emails render correctly for iPads or any other tablet your customers use most.

Microsoft Outlook

Outlook is one of the longest running email clients, dating back to 1997. Since then, it has gone through many changes. Outlook 2003 used Internet Explorer to render emails, however, they started using Microsoft Word for rendering in the next release. Word now generates emails in Outlook.

There are many CSS properties that Outlook doesn’t recognize. However, the main takeaway should be that for your emails to render correctly in Outlook, inline your CSS instead of having them in the header. You can use some free tools to inline your CSS easily.

Apple Mail

Webkit rendering engine is used in Apple Mail to render emails. Webkit is used to power browsers such as Google Chrome and Apple Safari, and Apple Mail is known to be one of the most robust, mainstream email clients. You will rarely run into issues with rendering on Apple Mail.

Wrapping up

You won’t be able to have your emails render 100% on all clients without spending some time designing and testing. If you learn which two or three email clients your customers use most often, you can create your emails for them more effectively.

To avoid duplicating your efforts, create a few email templates for your workflow that you can edit and reuse easily for regular campaigns.

And finally: Test, test, and test some more. Once you create those email templates, try them on different platforms and devices to ensure they’re optimized for your customers. We wish you and your marketing team the best of luck, and we’re here to help if you need anything else.