Accessibility in email

An introduction

I started writing this the day after I got back from Amsterdam where I was speaking at the brilliant CSS Day conference. I learned a lot, I met some amazing people and I did a talk on interactive email, which can be scary in front of a few hundred web developers (who notoriously hate writing email code) but it went down really well.

Out of all the things I learned at the conference, one thing really stuck with me, accessibility. Léonie Watson did a great talk on the subject, I also had a chat with her in the bar afterwards about accessibility in email and the lack there of.

What is accessibility?

Not everyone can easily use a monitor, keyboard or mouse, some people use what's classed as 'assistive technology'. For example people with visual disabilities may use screen reader software to read the text on the screen, or a magnifier to dramatically enlarge it. People with physical disabilities may have to navigate using alternative input devices such as joysticks, eye tracking, a sip 'n' puff device or specialist keyboards.

Accessibility in email is simply about building emails in a way that can be accessed by these assistive technologies, allowing more people to access the content being sent.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

You're probably already writing code so people using Outlook, Gmail and other clients with poor rendering can read your emails, think of this as an extension of that. It's just increasing support to get your message to more users.

What can we do?

Email accessibility is bad because of two factors. Email developers not writing accessible code and email clients not supporting accessible code.

I often spend my days working out better ways to write email code so now I'm focusing my attention on making that code accessible too. Once the code is built and being sent it'll hopefully be easier to convince the email clients they need to catch up too.

I will then share my findings and encourage others to do the same.

Absolute positioning in email

You can't use absolute positioning in email.

Well actually you can a bit. It is supported in modern email clients; iOS, Android, Applemail, AOL etc. But it still gets stripped from the likes of Gmail, Outlook.com, Outlook 365 and obviously Outlook desktop.

Yahoo mail is a funny one, it supports position:absolute; but not top bottom left or right therefore rendering it useless.

It was actually when testing the below hack that I found Yahoo supports position:absolute; and prematurely shared the news on twitter without realising the debilitating caveat. So by way of apology here's how to do position absolute in Yahoo and almost every other email client.

Absolute positioning that works everywhere

(Except Outlook on desktop pc, but what do you expect from Microsoft Word rendering)

So first of all you need to set a container to position against.

<div style="width:300px;height:300px;">  
</div>  

Then place an element inside that, set display as inline-block and position it with margin-top and margin-left.

<div style="width:300px;height:300px;">  
    <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
    </div>
</div>  

N.B. Unfortunately negative values in the margin won't work in Gmail, Outlook.com or 365.

The element is now behaving similar to position:relative but we want position:absolute so as not to affect the flow of any neighbouring elements. To achieve this wrap the inner element in a div with max-height:0;max-width:0 this now mean that div takes up no space on the page, but the overflow can still be seen.

<div style="width:300px;height:300px;">  
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;">
        </div>
    </div>
</div>  

You can now place multiple elements in that container and position them absolute. In this example I've added outlines and semi transparent background colours to clear display the outcome.

<div style="width:300px;height:300px;outline:2px solid black;margin:0 auto;">  
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:100px;margin-left:100px;display:inline-block;outline:2px solid red;text-align:center;line-height:100px;font-size:50px;background:rgba(255,0,0,0.2)">
            1
        </div>
    </div>
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:150px;margin-left:150px;display:inline-block;outline:2px solid blue;text-align:center;line-height:100px;font-size:50px;background:rgba(0,0,255,0.2)">
            2
        </div>
    </div>
    <div style="max-height:0;max-width:0;overflow: visible;">
        <div style="width:100px;height:100px;margin-top:50px;margin-left:50px;display:inline-block;outline:2px solid green;text-align:center;line-height:100px;font-size:50px;background:rgba(0,255,0,0.2)">
            3
        </div>
    </div>
</div>  
1
2
3


Outlook

Ok so it still doesn't work in desktop Outlook but it does work pretty much everywhere else I've test.

But please do use this wisely. Do consider Outlook, perhaps a VML fallback or simply using Outlook conditional comments.

Update

Thanks to JK who pointed out in the comments that the Yahoo overflow update affects this. So I've added overflow: visible; to the above code which fixes that problem.

A new table structure

The Past

For years developers have been building email in the same way, a 2 table structure where the outer table is set to 100% width and the inner table is set to something like 600px wide resulting in a 600px centered container for your content.

The Present

More recently people have been using the spongy/hybrid approach that sets the inner table width a max width of 600px and a width of 100%, so the content will fit the viewport when viewed under 600px. With this method there is also the need for a ‘ghost table’ hidden from everything but Outlook and set to a fixed width of 600px as Outlook doesn’t recognise the max-width property.

More recently I’ve been replacing this inner table with a div as it uses a little less code, but now...

The Future?

My new approach uses just one table. The width is set to 100% and it contains 3 table cells, the center cell has a width of 600px and the other 2 are left blank so they will automatically fill the remaining space and center the content. It's the same concept as setting margin:0 auto; often used on the web.

If the viewport is less than 600px the width of the table overrides that of the table cell so it will adjust to fit, therefor giving the same result as the max-width:600px; trick.

This new technique uses less code and also gives you a couple more design options.

You can now control the background of the left and right side of the email separately, to give this cool flag effect.

Frence flag

You could maybe use background images instead of colours to recreate the classic Smith and Jones head to heads (British comedians from the 80's).

Smith and Jones

You can even add additional empty table cells to offset the content, these will automatically align as the viewport gets smaller.

Offset tables

The Code

So here is the basic code I use.

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333" role="presentation" style="table-layout:fixed">  
  <tr>
    <td style="font-size:0px">&nbsp;
    </td>
    <td align="center" width="600" bgcolor="white">
        <h1>
            New Table Structure
        </h1>
    </td>
    <td style="font-size:0px">&nbsp;
    </td>
  </tr>
</table>  

And you can view the code for all the examples here

The left and right table cells both contain &nbsp; as if they are empty they it can break in some clients. This however has the side effect of creating a one character space either side of the content on mobile. This may well be an effect you like but if not simple add style="font-size:0px" to remove it.

As an extra plus this new technique also fixes things like the Yahoo! left align bug.

It's still early days and although I've tested this in a few campaigns already, there may still be some limitations I've not yet come across.


N.B I'm already working on a new structure that uses no tables at all. Just need a little more testing on that one first.

Announcing Rebelmail

Today we are beyond excited to launch Rebelmail. Rebelmail allows brands large and small to build and send truly interactive emails to their customers.

Interactive emails allow users to take immediate action in-email, considerably reducing friction. Our emails have resulted in a huge boost in email engagement for our pilot brands, particularly on mobile devices.

 

Our first emails feature elements like photo galleries and dropdowns. These allow users to learn about products, select options (size,color, or quantity ) and add a product directly to their cart, within an email.

We track every interaction a user has with our emails.

Beyond Opens and Clicks

Opens and clicks have been the top level metrics for email performance since the inception of email marketing. With interactive email we’ve unlocked a trove of new engagement data that has proven invaluable to our customers. We track every interaction a user has with our emails. Every photo viewed in a gallery and every dropdown used is recorded and surfaced in realtime to better inform future marketing decisions.

These stats can be consumed via our new analytics dashboard or our API to pull metrics into an existing business intelligence or CRM tool.

 

The future of email

We take much of these features for granted on the web and we at Rebelmail are excited to bring email into the future. We’re starting with powerful templates for commerce in-email but we’re already working with brands on templates with functionality we never thought possible inside of emails.

I am so grateful to team Rebelmail for the countless hours and love put into this product. One of our customers told us we empowered him to deliver magical experiences to his customers and some have even accused us of witchcraft :)

Its been many long nights playing with old Blackberries and slaving over Lotus Notes in the device lab. I know we are all excited to unleash this magic to the world.

Email client support

Email clients are fickle and render the same email differently. We’ve worked to ensure our interactive emails work on as many clients as possible and degrade elegantly to a static fallback in clients that do not yet support interactivity. Around 70% of emails globally are opened on clients that support our interactivity. Read more on client support here.

Keep your ESP

Rebelmail sits on top of some of the best ESPs in the world. We are already sending emails for brands through ExactTarget, SailThru, SendGrid, Mandrill and others. You can continue using your existing tool and maintain your sender reputation and deliverability score.

Get Started

We are finalizing partners for Q1 and excited to work with brands who would like to empower their customers to act quicker and engage with their users in new ways.

Request access to the product on our site or email Joe@rebelmail.com with any questions.

Every user matters

Email client support at Rebelmail.

One of the first questions people often ask about Rebelmail is about support. It's a fair question, the things we build haven't been seen in email before so not all email clients are ready to support them.

The way we see it, every user is important, whether they are using a modern email client like Apple Mail, or an old fashioned client like Outlook. So we use some very clever code to only show the advanced parts of the email to the users who are able to engage with them and users who can't will see a simple layout like they always have done.

To simplify all the rendering differences across the hundreds of email clients, we group them into 3 groups; Interactive, Limited and Static.

Interactive - these email clients support all the advanced features we build, we ❤ these ones the most.

Limited - these email clients support some of our advanced features, some features may also require a slightly different layout to get them working here.

Static - these clients don't support any advanced features. However we will still deliver a beautifully rendered email, it just won't be interactive.

Interactive email clients

61% of email opens1

  • iOS
  • Apple Mail
  • Android - Ice Cream Sandwich and up 2

Limited email clients

3% of email opens1

  • Yahoo!
  • AOL
  • Android - Gingerbread, Honeycomb

Static email clients

36% of email opens1

  • Gmail
  • Outlook desktop3
  • Outlook.com
  • Windows Live mail
  • Gmail mobile app
  1. Stats taken from emailclientmarketshare.com based on 1.27 billion opens in October 2016

  2. Android KitKat and up no longer has a native email clients, instead it uses Gmail app as default. But these stats refer to other apps on Android

  3. Outlook on Mac can render as Interactive but is usually delivered as Static as there is no support to submit the data gathered in the email