New @ Rebel: Interactive Calendar

Every week, we're highlighting some of our favorite customer campaigns and Rebel solutions. This week, we're introducing the new interactive calendar.

Creator: Matt Schmitter & Jon Ellman


Matt and Jon created this date selector while brainstorming ideas for one of our travel clients; however, we’re pleased to announce that this email experience has taken on a life of its own. Use the campaign to select dates for departures and arrivals or confirm appointments in email. Alter the design slightly, and the calendar design can become a seating chart selector or a tool to reserve tables at a conference!

We are able to grow our product offering when Rebels (internally and externally) push the limits of email design. Sometimes we’re even surprised by everything the Rebel dashboard can do!


New @ Rebel: Preference Center

Every week, we're highlighting some of our favorite customer campaigns and Rebel solutions. This week, we're introducing the new preference center solution.

Creator: Rebel Team



Many of our best solutions come from our customers. We noticed that interactivity is often used in a welcome series. It makes sense--subscribers are highly engaged with initial messaging. Our customers take advantage of this attention and survey and collect data, using it to further personalize and target their subscribers.

The Rebel team designed a fun, visual in-email preference center to collect subscriber information. In this example for a beauty brand, subscribers are able to select their complexion and product interests. The template includes swatches, dropdowns, and other interactive elements and feels like a web experience!


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