Tips for Creating Responsive Emails

Follow

Summary:

This article outlines how to keep your email designs responsive across mail clients and devices so that your emails look consistent whether your reader is using Gmail, Outlook, Android, or Apple.

What is included:

Font Responsiveness

Many fonts are designed to be 'web safe' while some fonts are specific to the operating system; not counting fonts that are entirely custom. When sending to users across multiple platforms, you may see some of your font selections adjust based on which fonts are supported on the mail client or operating system.

Cross Platform Fonts

Sans Serif "Web Safe" fonts - The below fonts are your best bet for Sans Serif fonts that are compatible with most (if not all) platforms.

Cross_Okatfirn_Fonts.jpg

Serif "Web Safe" Fonts

Normally your best bet for Serif fonts that are supported across most platforms:

Serif_Web_Safe_Fonts.jpg

*-Not currently supported through the Bananatag Email Designer
*--Support for this font may vary between specific versions or builds of the mail clients 

How Anchor Links (Table of Contents) are Treated Across Email Clients

We've noticed that more and more Communicators are using anchor links within their emails. They are a great way to quickly navigate through the email and provide for a helpful way to bring the recipient to a specific spot on the email. However, each email client (mobile or desktop) treats anchor links differently.

The two main anchor links that our customers use are: 

  1. Name Anchors: <a href="#anchorname">...</a> & <a name="anchorname">...</a>
  2. Back to Top Anchors: <a href="#top">Back to top</a>

The following table shows the different email clients and their treatment of anchor links:

How_Anchor_Links_are_Treated.jpg

* Anchor links are disabled as of iOS8

In the Internal Communications space, 90% of the email clients deal with anchor links just fine. Which is great news for Communicators!

Accessibility

When it comes to accessibility on the web for users with disabilities, there are various ways that websites introduce features to allow those users to continue accessing the content they are looking for in the easiest way possible.

Bananatag's website is designed with these considerations in mind, however Email Designs are typically user-driven, and as such there are still various ways that you can maximize the accessibility of your designs with a few simple tricks!


TIP: Use headings to convey meaning and structure

Use clear and descript headings to group paragraphs with related content. Good headings provide an outline of the content.

mceclip0.pngmceclip1.png

 


TIP: Make link text meaningful

Write link text so that it describes the content of the link target. Avoid using ambiguous link text, such as ‘click here’ or ‘read more’. Indicate relevant information about the link target, such as document type and size, for example, ‘Proposal Documents (RTF, 20MB)’, if linking to items like attachments.

No Information no.png

mceclip2.png

Meaningful Information yes.png

mceclip3.png

 


TIP: Write meaningful text alternatives for images

For every image, write alternative text that provides the information or function of the image. For purely decorative images, there is no need to write alternative text.

No Informationno.png

phone_charging.png

Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided.

Alternative text for image:
"Charging Cable" 

Informativeyes.png

phone_charging__1_.png

Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided.

Alternative text for image:
"Plug the cable in from the bottom of the phone"

 


TIP: Provide clear instructions

Ensure that instructions are clear, easy to understand, and avoid unnecessarily technical language. Try to describe the input type as best as possible (ex. smiles = 'how happy are you?')

tip.pngThis accessibility tip will primarily be used with email survey responses.

No Informationno.png

mceclip1__1_.png

Clear and informativeyes.png

mceclip0__1_.png


Other Resources

While there are many industry standards as it pertains to accessibility, such as WCAG guidelines, these standards and principles primarily only apply to websites. There are no established accessibility standards for emails specifically, but you can utilize some of the below resources to help test and improve the accessibility of your communications. (Please Note: These resources are externally provided and are not managed or maintained by the Bananatag team)

Articles and text based sources:
Why Ignoring Email Accessibility is Hurting Your Business -- (Sharon Hurley Hall - optinmonster.com)
WCAG Guidelines
Creating Accessible Emails in MS Outlook (Win/Mac) - (Queen's University at Kingston)

Tools:
Source Code Accessibility Scanner

Supported Email CSS/Styling Guide

Not all mail clients are designed equally. As such, many will enforce their own styling parameters or will support/not support certain CSS styling elements commonly used on the web.

Here's a breakdown of some of the most common styling elements and which mail clients support them:

CSS_1.jpg

CSS_2.jpg

CSS_3.jpg

CSS_4.jpg

CSS_5.jpg

CSS_6.jpg

CSS_7.jpg

CSS_8.jpg

CSS_9.jpg

CSS_10.jpg

 

Was this article helpful?