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.

  Outlook (2016) Outlook for Mac Apple Mac Mail iOS Mail Android Mail Gmail
Arial yes.png yes.png yes.png yes.png yes.png yes.png
Arial Black yes.png no.png yes.png no.png no.png yes.png
Tahoma yes.png yes.png yes.png yes.png yes.png yes.png
Trebuchet MS no.png yes.png yes.png yes.png yes.png yes.png
Verdana yes.png yes.png yes.png yes.png yes.png yes.png
Helvetica yes.png** yes.png** yes.png yes.png yes.png yes.png

Serif "Web Safe" Fonts

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

  Outlook (2016) Outlook for Mac Apple Mac Mail iOS Mail Android Mail Gmail
Courier* yes.png yes.png yes.png yes.png yes.png yes.png
Courier New yes.png yes.png yes.png yes.png yes.png yes.png
Georgia yes.png yes.png yes.png yes.png yes.png yes.png
Times* yes.png yes.png yes.png yes.png yes.png yes.png
Times New Roman yes.png yes.png yes.png yes.png yes.png yes.png

*-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:

Email Client Name Anchors (Jump Links) Back to Top Anchors
Outlook 2003/Express yes.png yes.png
Outlook 2007 yes.png yes.png
Gmail yes.png no.png
Windows Live Hotmail yes.png yes.png
iPhone* no.png no.png
Yahoo! Mail yes.png yes.png
Apple Mail 4 no.png yes.png
Thunderbird yes.png yes.png
Android 2.3 (default) no.png no.png

* 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.

 


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

Meaningful Information yes.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

Charging phone

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

Charging phone

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

Clear and informativeyes.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 Background Property Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
background-color yes.png yes.png yes.png yes.png yes.png yes.png yes.png
background-image no.png yes.png yes.png yes.png yes.png yes.png no.png
background-position no.png no.png yes.png yes.png yes.png yes.png no.png
background-repeat yes.png yes.png yes.png yes.png yes.png yes.png no.png
background-size yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Box and Border Property Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
border yes.png yes.png yes.png yes.png yes.png yes.png yes.png
border-image no.png yes.png yes.png yes.png yes.png yes.png no.png
border-radius yes.png yes.png yes.png yes.png yes.png yes.png no.png
rounded corners yes.png yes.png yes.png yes.png yes.png yes.png no.png
box-shadow yes.png yes.png yes.png yes.png yes.png yes.png no.png
height yes.png yes.png yes.png yes.png yes.png yes.png no.png
width yes.png yes.png yes.png yes.png yes.png yes.png no.png
max-width yes.png yes.png yes.png yes.png yes.png yes.png no.png
min-width yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Media Queries Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
@media no.png yes.png yes.png yes.png yes.png yes.png no.png
(max-device-width) no.png yes.png yes.png yes.png yes.png yes.png no.png
(min-pixel-width) no.png yes.png yes.png yes.png yes.png yes.png no.png
(max-width) no.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Positioning and Visibility Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
margin yes.png yes.png yes.png yes.png yes.png yes.png yes.png
padding yes.png yes.png yes.png yes.png yes.png yes.png no.png
position:absolute yes.png yes.png yes.png yes.png yes.png yes.png no.png
position:fixed yes.png yes.png yes.png yes.png yes.png yes.png no.png
z-index yes.png yes.png yes.png yes.png yes.png yes.png no.png
visibility:hidden yes.png yes.png yes.png yes.png yes.png yes.png no.png
display:none yes.png yes.png yes.png yes.png yes.png yes.png no.png
overflow:none yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Text Property Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
@font-face no.png yes.png no.png yes.png yes.png yes.png no.png
direction yes.png yes.png yes.png yes.png yes.png yes.png no.png
font yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-family yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-style yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-variant yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-size yes.png yes.png yes.png yes.png yes.png yes.png no.png
font-weight yes.png yes.png yes.png yes.png yes.png yes.png no.png
letter-spacing yes.png yes.png yes.png yes.png yes.png yes.png no.png
line-height yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-align yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-decoration yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-indent yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-overflow yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-shadow yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-transform yes.png yes.png yes.png yes.png yes.png yes.png no.png
white-space yes.png yes.png yes.png yes.png yes.png yes.png no.png
word-spacing yes.png yes.png yes.png yes.png yes.png yes.png no.png
word-wrap yes.png yes.png yes.png yes.png yes.png yes.png no.png
vertical-align yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-fill-color yes.png yes.png yes.png yes.png yes.png yes.png no.png
text-stroke yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Table Property Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
border-collapse yes.png yes.png yes.png yes.png yes.png yes.png no.png
border-spacing yes.png yes.png yes.png yes.png yes.png yes.png no.png
empty-cells yes.png yes.png yes.png yes.png yes.png yes.png no.png
CSS Link Properties Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
link:visited yes.png no.png no.png yes.png yes.png yes.png no.png
HTML Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
<audio> no.png no.png yes.png no.png yes.png no.png no.png
<canvas> no.png no.png yes.png no.png yes.png no.png no.png
<iframe> no.png no.png no.png no.png no.png yes.png no.png
<img srcset> no.png no.png no.png no.png yes.png yes.png no.png
<picture> no.png no.png no.png no.png no.png yes.png no.png
<video> no.png no.png yes.png no.png no.png no.png yes.png
Link Element Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
<link> in <head> no.png no.png yes.png yes.png yes.png yes.png yes.png
<link> in <body> no.png no.png yes.png yes.png yes.png yes.png yes.png
Style Element Outlook.com (Web) Gmail (Web) Gmail App (Mobile) Android Mail iOS Mail (Mobile) Apple Mac Mail Outlook (2010-2019)
<style> in <head> yes.png yes.png yes.png yes.png yes.png yes.png yes.png
<style> in <body> yes.png no.png yes.png no.png yes.png yes.png yes.png