Get off the <table>

As I publish this I've just given a brief presentation at Litmus Live in London about building emails without tables.

I've made a good start but the code isn't really production ready just yet so I'd like to open it up to the #emailgeeks community, so others can try and build on what I've started.

Why do we use tables in email?

The short answer is Outlook.

Instead of using an HTML rendering engine to render email code Outlook uses the Microsoft Word rendering engine. This only applies to the Windows desktop version of Outlook and the Windows 10 Mail app. Outlook on Mac and Outlook.com both use HTML rendering.

So because they don't use proper HTML standards, the layout has to be built using <table> elements.

What's wrong with tables?

They use more code

In email we're limited to ~102kb of code so any reduction of code means we can include more relevant quality content.

They aren't naturally accessible

<table> elements are not designed to be used for layout so assistive technology will treat them as data table unless you add role="presentation" you can read more about email accessibility here

They don't inherit styles well

All browsers and email clients come with some basic default styling. This results in having to reset things like font settings every time a new table is added.

They can be tricky to manipulate

When building a responsive layouts you often want to move parts of the content around. This can be tricky when using tables, particularly when you sometimes don't have control of the <!DOCTYPE html>

The Code

So I'm going to focus on getting a central 600px wide container to wrap our content.

To start off with the code that will work in all other email clients;

<div style="background:red;max-width:600px;margin:0 auto;text-align:center;">  

Then to get outlook to respect the width we want we add this code

mso-element-frame-width:600px;  

At this point outlook will actually convert the <div> element into a <table>.

Currently I don't have a way to do multiple columns inside our container so to be able to add a table inside here, we add this;

mso-element:para-border-div;  

Then to centre align the container we use this;

mso-element-left:center;  

Then to stop additional content floating alongside this we add;

mso-element-wrap:no-wrap-beside;  

And that's it, you now have a 600px wide centre aligned container for you email. Here it is in it's entirety.

<div style="background:red;max-width:600px;margin:0 auto;text-align:center;  
mso-element-frame-width:600px;  
mso-element:para-border-div;  
mso-element-left:center;  
mso-element-wrap:no-wrap-beside;">  
  <!-- Content -->
</div>  

However there are still a few issues that prevent this form being production ready.

Issues to solve

As these are solved I'll try and update this article and give credit.

  • Remove blue outline
  • <body> colour for Windows 10 mail
  • Changing the background for a section
  • Background images
  • Multi column layout inside the container
  • Padding that holds the background

Get involved

Take the code above, find bugs, find solutions and get involved. I want this to be a community effort.

Add to the project on github, write up your findings on your blog, share your them in the comments below or on twitter using the hashtag #GetOffTheTable. There's also a discussion on the Litmus Community

A few resources to help get you started

Rebel Shop

Turn your emails into a shop

We’re always amazed by the power of email in driving commerce. Email marketing drives more conversions than any other marketing channel, including search and social. Devices and consumer behavior have evolved rapidly over the years, yet email has remained largely static. More customers open their email on mobile devices which means there’s more friction and lower conversion when you drive users to an app or site.

With Rebel Shop, we’re able to finally bring end-to-end checkout into the inbox. Rebel Mail is about reducing a customer’s friction to action in an email, Rebel Shop takes that one step further with true one-click checkout in-email.

Security

There is no place on the internet where security is more important than when dealing with payments. When you are bringing payments to a new platform you need to be especially careful. Your email address is the key to your identity online, it's where your password reset emails go and all of your purchasing receipts. The inbox is already one of the most secure places for an individual's information on the internet, but to provide our customers the most secure experience we've implemented a number of security features in addition to being fully PCI compliant.

Get Started

Rebel Shop integrates with your existing commerce platform and email service provider. Have a store on Shopify? Install our Shopify App today.

If you are on another ecommerce platform sign up for a demo of our enterprise solution for Demandware, Hybris, ATG and custom solutions.

Partners

We’re partnering with the top email service providers to integrate to deliver RebelShop enabled emails to your customers inbox. If you are an ESP or commerce platform and you’d like to bring RebelShop functionality to your customers, email us at hi@rebelmail.com

Dropping the ‘mail'; Say hello to Rebel

Two years ago we launched Rebelmail with the goal of reducing friction by blurring the lines between the inbox and the web/applications. Our first product allowed marketers to build and send their customers quizzes, add to cart experiences and more that function completely within emails. Next, we launched our API to allow developers to turn emails into a surface for their applications. To date, we’ve sent hundreds of millions of emails with truly immersive interactivity.

Our goal remains to empower our users to change the way they engage with their customers. To help us do this, we are changing our name to Rebel. Rebel better represents our company ethos, approaching problems with humility and ingenuity, without regard for the status quo.

Our new home online is gorebel.com
With the new name comes the launch of our most advanced product yet Rebel Shop Read more on our blog

Introducing Rebelmail Modules: Tabs

An email with a 10% coupon may drive sales in the short term, but crafting a strong narrative in your email campaign builds the connection between your brand and your subscribers.

This connection is what keeps subscribers coming back to your website. An effective email marketing campaign in the long-term is personal, story driven and engaging.

Interactivity invites subscribers to participate in your brand story by empowering them with choice (just like the choose your own adventure books you read as a kid!).

The Tabs module, for example, condenses content into multiple sections.


Touching each tab reveals a new piece of content. Each tab is an opportunity for a subscriber to become more informed, more inspired, and more likely to take further action with your brand.

Through interactivity, subscribers are given control on whether or not they want to interact with email content on a deeper level. When they do interact, it is as if they have discovered the content on their own. It's a powerful experience.


Consequently, each subscriber becomes a much more engaged lead.

Performance and Best Practices

In the below example, a travel brand used the tab module to collect information on subscriber's dream destinations. Each tab featured a different style of vacation and once selected, the main image changed.

The email content depends on a subscriber's physical action.

Rebelmail also tracks which tabs were selected, so if you want to retarget and personalize a follow up campaign based on subscriber selection it is easy to do so!

Tabs see between a 3% - 6% interaction rate and subscribers interact with the tabs an average of three times each.

The first interaction requires the most push and that's where your content comes to play! Compelling imagery and clear instructional copy drive interaction.

Tabs Functionality

  • Use the Rebelmail builder to populate the tabs with content
  • This input accepts HTML.

Tabs Placement

Tabs are an awesome fit in your triggered email campaigns. Use it during your onboarding series to teach subscribers how to log-in or set up a profile. Each tab can be a different step in a tutorial.

Feature many different products in your emails? Tabs are also a great fit to showcase multiple sales and coupon codes.

Do you have ad units in your newsletter? Tabs allow you to get creative with them!

The tabs module is easy to set up through the builder or our API. Have a great use case for the modules? Want to see a demo? Drop us a line at hi@rebelmail.com.

Introducing Rebelmail Modules: Photogallery

An easy, quick way to enhance your email campaign with interactivity is through the photogallery module. The photogallery is immediately familiar to subscribers--it’s such a common website feature. Similar to the web, the photogallery module allows subscribers to tap on thumbnails or arrows to view multiple images. The photogallery module eliminates the need for super long email campaigns.

Does anyone scroll to the bottom, anyway?

You can use the photogallery to highlight content:


Use the photogallery to showcase multiple products or styles:


If user does not tap through the gallery, the module will automatically cycle through the images. Use the gallery to add context to content and showcase new features, but make sure you’re not hiding content from your subscribers.

Performance and Best Practices

Because it’s a familiar tool, it’s important to judge the photogallery module’s performance the same way as you would judge that of a photogallery on the web. Like on the web, the images featured in the photogallery module need to be compelling for it to perform. The content surrounding the photogallery needs to encourage the subscriber to interact, as well.

A photogallery alone will not convince a subscriber to convert.

In one example, a brand used the photogallery to encourage subscribers to clickthrough to various vacation destinations. Each thumbnail featureed a different location and once selected, the main image became a call to action. The beautiful images as well as the clear CTA, made this a powerful use for the photogallery module.

2.8% of subscribers who received the interactive version of this campaign interacted with the module. This campaign also resulted in a 5% lift in CTOR compared to the static send.

Photogallery Functionality

  • Upload images and thumbnails into the Rebelmail builder
  • Recommended thumbnail size is 64x64
  • Recommended feature image size is 400x600
  • Recommend using up to four thumbnails
  • Use a tooltip to drive interactions.

Photogallery Placement

You can place a photogallery anywhere! Use it to show various coupon codes during your holiday sale. Use it to celebrate the launch of a new product. Use it during your onboarding series as a teaching tool.

The photogallery module is easy to set up through the builder or our API. Have a great use case for the photogallery? Want to see a demo of the gallery? Drop us a line at hi@rebelmail.com.