Introducing Rebelmail Modules: Quiz

Up until January 2016, our modules were creations that lived in our top secret email laboratory. For almost a year now, they’ve been out in the wild. Whether it’s a promotion hidden in an in-email game or the ability to add a new product to cart without leaving the inbox, our clients are deploying interactive emails through the Rebelmail API and builder.

Working with brands to deliver unique experiences to subscribers has taught us about each Rebelmail module. What are the best use cases? How do subscribers interact with the module? How do brands gain the most value from the module?

Over the next few weeks, we’re going to introduce and share our learnings on each Rebelmail module right here on the blog—starting with the quiz.

We hope showing you our insights into the modules will help you further engage your audience and drive conversions.

Performance and Best Practices


The quiz module began with a suggestion from a client. A travel company wanted something fun to engage subscribers who had not interacted with the brand recently, something that would keep them in the email and get them excited about different locations. They wanted a module that would encourage the subscriber to act and inspire them to contact a host and plan a trip!

We decided a quiz asking subscribers to guess the location based on an image would be a fun way to feature places to stay around the world.

By allowing subscribers to interact with the content, we’ve increased their desire to learn more about the featured locations.

The module was a success! We saw a high interaction rate. Around 6% of subscribers who received the interactive version of the email engaged with the quiz. Through testing, we also discovered that subscribers who interacted with the quiz module typically completed all three questions.

Most importantly for the client, we saw that that the quiz module increased CTOR by 17% compared to the static version of this email.

Static version:

Quiz Functionality

  • The quiz allows for multiple questions with answers presented as radio buttons

  • The quiz allows for correct and incorrect answers

  • The module features an image placed on the left of the questions. We’ve learned that content impacts the interaction rate of the module. For example, if a client uses the same image for all three questions, there will be a drop in interactions.

  • Clients are able to auto advance the questions or use a “Next Question” button

  • The link featured in the second CTA can change depending on the subscriber’s choice

  • Rebelmail tracks all subscriber selections and interactions

Quiz Placement

The quiz can be used in a gamified-fashion like the example we discussed, or in the style of a survey. For example, place a style quiz (Do you like scarves, hats or shoes?) in an email campaign, lead them to relevant category pages based on their responses, and help subscribers think about the accessories that go with a new dress. You can also include the quiz in an abandoned cart or abandoned browse email to understand why a subscriber did not convert.

The quiz is also a phenomenal addition to a brand’s onboarding or welcome series. Use the quiz to understand a subscriber’s interests—what they are shopping for, budget, travel interests, etc. Brands can use the results of the quiz module to personalize the next set of email campaigns in a series.

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

The Rebelmail API

At Rebelmail we have been busy building the best tools available for building, sending, and reporting on interactive email. Today we get to share with the world a portion of our efforts.

We are excited to announce the public launch of our API for building and reporting on interactive email.

Since our founding we have been at the forefront of a revolution in email, allowing brands to send and extract value from interactive email. Now integrating with Rebelmail will allow you to send interactive emails from directly within your applications. All without having to know every finicky hack and obscure rendering change. Make a simple request to the Rebelmail platform and let us handle the magic on your behalf.

What does it mean for your recipients?

For time immemorial email has been a one way channel. You'd send recipients a message, hope that they open it and that the content was enticing enough to warrant a clickthrough. Those actions were the only thing anyone could track, open rates and clickthrough, while attribution still remains a difficult task.

Rebelmail's impetus from the beginning has been to invert these traditional metrics and mindsets. We build interactive emails that allow recipients to take action immediately. Instead of clicking to see a product page with more images, browse a slideshow or answer a quiz directly inside your inbox.

Gallery Quiz

Instead of having your recipients click to a landing page to capture a full review, input a weekly update or even change their password. Allow them to provide the information immediately, inside of the email and watch as your user engagement grows.

Reviews Password Reset

See all of our interactive modules now.

In addition to these groundbreaking experiences for recipients, we provide in depth analytics on every action a recipient takes, allowing you an unprecedented insight into what your customers are actually doing inside of your emails. You can leverage all this new data to take action on the intent a user expresses in your email, even if they don't clickthrough.

How does it work?

We are an API first company, and our API is the basis for all the work we do here at Rebelmail. While our API provides access to most features within our platform, the sending endpoints are what we'll focus on here. With our simple request structure and robust error reporting it's easy to get started.

We offer two powerful endpoints to get you sending interactivity quickly. You can use us transactionally, making one call to both build and send the email (We have a growing list of ESP integrations, including our launch partner Mailjet). Check out the example Curl request below and for more information check out the documentation.

Supported ESPs, Mailjet, Sailthru, Mandrill, SendGrid, ExactTarget

cat <<'EOF' | curl -X POST \  
-H 'Authorization: Bearer <API_KEY>' \
-H 'Content-Type: application/json' \
https://api.rebelmail.com/v0/emails -d @-  
{
  "email": {
    "campaignId": "58236acafe0189001c1f8164",
    "to": "friends@rebelmail.com",
    "from": "friends@rebelmail.com",
    "subject": "Example Subject",
    "context": {
      "rid": "%%emailaddr%%",
      "basics": {
        "preheader": ""
      },
      "customHeader": "<h1 style='background:#333;color:#fff;padding:1em;margin:0;'>Header</h1>",
      "customFooter": "<h2 style='background:#333;color:#fff;padding:1em;margin:0;'>Footer</h2>",
      "gallery": {
        "height": "400",
        "width": "600",
        "thumbHeight": "64",
        "thumbWidth": "64",
        "thumbBorder": "#333",
        "thumbBorderSelected": "#0096d6",
        "hasArrows": true,
        "tooltip": {
          "position": "",
          "background": "#0096d6",
          "color": "#000",
          "border": "#ffffff",
          "text": "Click thumbs for more images"
        },
        "images": [
          {
            "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery1.jpg",
            "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
            "value": "",
            "thumbColor": "",
            "thumbImg": ""
          },
          {
            "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery4.jpg",
            "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
            "value": "",
            "thumbColor": "",
            "thumbImg": ""
          },
          {
            "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery2.jpg",
            "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
            "value": "",
            "thumbColor": "",
            "thumbImg": ""
          },
          {
            "src": "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery3.jpg",
            "href": "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
            "value": "",
            "thumbColor": "",
            "thumbImg": ""
          }
        ],
        "fallback": {
          "type": "image",
          "href": "",
          "src": "http://dummyimage.com/600x600/ff6666/ffcccc&text=Fallback",
          "width": "600",
          "height": "600",
          "alt": "An Exclusive Gift, from us to you!"
        }
      }
    }
  }
}
EOF  

If you prefer to handle sending on your own, we have a solution for your needs too. Using the same request structure you can make a request to another endpoint on our platform and get a response containing a full interactive email as HTML. Once you have the HTML in your system you can send using your normal processes. Here is a quick code snippet and for more details check out the documentation.

const fetch = require('node-fetch');

const API_KEY = '<API_KEY>';

const body = {  
  campaign: {
    campaignId: "58236acafe0189001c1f8164",
    to: "friends@rebelmail.com",
    from: "friends@rebelmail.com",
    subject: "Example Subject",
    context: {
      rid: "%%emailaddr%%",
      basics: {
        preheader: ""
      },
      customHeader: "<h1 style='background:#333;color:#fff;padding:1em;margin:0;'>Header</h1>",
      customFooter: "<h2 style='background:#333;color:#fff;padding:1em;margin:0;'>Footer</h2>",
      gallery: {
        height: "400",
        width: "600",
        thumbHeight: "64",
        thumbWidth: "64",
        thumbBorder: "#333",
        thumbBorderSelected: "#0096d6",
        hasArrows: true,
        tooltip: {
          position: "",
          background: "#0096d6",
          color: "#000",
          border: "#ffffff",
          text: "Click thumbs for more images"
        },
        images: [
          {
            src: "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery1.jpg",
            href: "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
            value: "",
            thumbColor: "",
            thumbImg: ""
          },
          {
            src: "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery4.jpg",
            href: "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
            value: "",
            thumbColor: "",
            thumbImg: ""
          },
          {
            src: "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery2.jpg",
            href: "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
            value: "",
            thumbColor: "",
            thumbImg: ""
          },
          {
            src: "https://s3.amazonaws.com/rebelmail-templates/hp/envy-curved/images/version5/gallery3.jpg",
            href: "http://store.hp.com/us/en/ContentView?storeId=10151&langId=-1&catalogId=10051&eSpotName=Envyaio_34c",
            value: "",
            thumbColor: "",
            thumbImg: ""
          }
        ],
        fallback: {
          type: "image",
          href: "",
          src: "http://dummyimage.com/600x600/ff6666/ffcccc&text=Fallback",
          width: "600",
          height: "600",
          alt: "An Exclusive Gift, from us to you!"
        }
      }
    }
  }
};

fetch('https://api.rebelmail.com/v0/campaigns/58236acafe0189001c1f8164/html', {  
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(body),
}).then((res) => {
  if (!res.ok) {
    return Promise.reject(res.statusText);
  }

  return res.text();
}).then((html) => {
  console.log(html);
}).catch((err) => {
  console.error(err);
});

What does it all mean?

Email is a key part of how any platform communicates with its users. We believe that there is a future where every email is immediately actionable for an end user from inside their client of choice. We want to make it as simple as possible for our customers to take full advantage of the latest changes in one of the world's oldest communication platforms.

Our early customers have been integrating with our API to give better experiences to their recipients. They are already taking advantage of these leaps in technology to increase engagement, activity and revenue.

Get in touch with us if you would like to add interactivity to your email program.

Hot off the Press

The Email Design Podcast

Hosts Kevin Mandeville and Jason Rodriguez interview our very own Mark “Godfather of Interactive Email” Robbins in the 30th episode of the Email Design Podcast.

Listen here:

They chat about everything, including Myspace themes and accessibility in email!

Cosmetics Design

Cosmetics Design asks “Is Interactive Email The Next Big Thing In Digital Beauty Sales?” Read the entire article here.

An Alternative Theory

As we strive to maintain and build more accessible content, we are sometimes required to build what is functional first and focus on accessibility second. However, in order to create new guidlines around email accessibility, we must be willing to break the status quo. This raises the question: Where do we draw the line, and if it’s not accessible, can it be considered functional?

As we continue to learn ways to implement accessibility into email, it’s still great to discover and share new hacks. Because that is what makes email so much fun. This idea is all about an alternative to alternative text.

What is alternative text?

Alternative text has been around since the beginning of grunge music, or somewhere around that era, and quickly became the easiest attribute to misunderstand and improperly implement. Most commonly, it functions to provide a textual alternative to non-text content, which helps optimize for SEO, and situations when images do not not load. It also plays an important role with screen reader interactions.

One misconception about alt text, is that it must be presented within the alt attribute of the img element. While this is the most common placement, it can also be presented within the surroundings of the image itself.

Alt text and email

Styling alt text with CSS is becoming a standard part of the email developer's workflow, and offers an opportunity to add a professional touch that that can elevate customer satisfaction.

. .. .but what if we want to serve different content in lieu of these images, and the beautifully written alt text? With a few lines of HTML and CSS, we can. While still incorporating images to present information in a visual manner as usual, this method will display completely different content for those who opt out of the visual experience.


The basic markup

Create the main container and apply dimensions to match the natural width and height of the image, and don't forget to set overflow:hidden. This will act as our viewport.

<div class="main-container" style="width:300px; height:300px; max-height:300px; overflow:hidden;">  
 <!-- content -->
</div>  

When adding the image, it's important to follow a few recommendations:

  • leave out width and height attributes
  • set alt as an empty value
  • include aria-hidden="true" to ensure screen readers ignore the element
  • use title to provide a meaningful link description

This example uses one image. However, you may choose to stack images, or even incorporate different content types.

<a href="https://www.google.com/?q=images+are+enabled" title="Link Description">  
 <img src="https://unsplash.it/300/300" style="display:block;" alt="" border="0" aria-hidden="true">
</a>

<!-- alternative content container here -->  

Everyone hides in their own unique way, here's how we do it

Since overflow:hidden is not supported 100%, and it's necessary for .main-container, we'll want to restrict the alternative content from rendering in certain email clients. This can be accomplished by using the checkbox hack, wrapped in a MSO conditional statement. Combined with a few lines of CSS, this will work just perfectly.

Applying role="img" informs the screen reader that the contained elements represent an image.

<!--[if mso]><!-->  
 <input type="checkbox" id="alternative" lang="x-alternative" class="hide-input" style="display:none !important;mso-hide:all;" checked>
  <div class="alt-content" lang="x-alt-content" style="display:none; overflow:hidden; mso-hide:all;" role="img">

   <!-- alternative content here -->

  </div>
<!--<![endif]-->  

Next, add the content that you want to display when image is disabled into its own containing element within .alt-content, and set the width height dimensions to match the image.

<div style="width:300px; height:300px;">  
 <a style="color:#e83634;" href="https://www.google.com/?q=images+are+NOT+enabled">
  Alternative link / Content
 </a>
</div>  

Finally, add the corresponding CSS to ensure the alternative content is displayed where it is supported.

<style>  
.hide-input {
 display:none !important;
}

#alternative:checked + .alt-content,
* [lang="x-alternative"]:checked + [lang="x-alt-content"] {
 display: block !important;
 max-height: none !important;
}
</style>  

Where do we go now?

This method can be used in a variety of scenarios. Which may be for custom link tracking, or changing a message completely based on environments.

Either way, used or not, let this spark your imagination to keep experimenting and innovating, while expanding on great ideas to build greater ones.

Here is a complete codepen.io/theotherstevenc example, that incorporates srcset for retina image support.

Accessibility in email: Part II

Coding email for accessibility

We recently posted an introduction to accessibility in email. This post if a follow up to that.

Accessibility is not often talked about in relation to email but it should be. As email developers we spend hours getting an email to look just right in a client with less than 1% market share but very few of us will spend a few minuets making the email accessible. I'll admit, I've been guilty of this too in the past. So I've put together a quick guide to get you started with some basics.

Tables

Tables are not meant for layout, they are designed to be used for displaying tables of data, so assistive technology will treat them as such, giving context to each cell in the table. This makes navigation slow and complicated, you need to navigate to each cell, enter the cell to read the content, then leave it then move to the next one. Whereas with a div based layout you can simply move from one piece of content to the next.

There is one simple and quick fix to this issue. Add role="presentation" to each <table> and it will be treated like a div based layout.

You only need to add it to each <table> element not every <td> so it’s a very quick and simple change to make. Go and do it now, you’ll dramatically increase the accessibility of your emails.

I made this video to show the difference role="presentation" makes to a screen reader.

 

N.B If you do have a table used as for it’s intended purpose, as a table of data, then don’t add this role.

Alt text

You’re hopefully already using alt text to describe images for people who have images turned off in their email client. Well that’s just the same for screen readers, simply use the alt text to enhance the experience by replacing the function of the image. Remember to be descriptive.

There are however times when you don’t want alt text, a spacer gif for example. Simply leaving the alt attribute off the img tag isn’t good enough, in this case the screen reader will read the full URL of the image, not good. So instead use alt="" to let the screen reader know this is intended to be blank.

HTML1 Semantic tags

There is often a bit of debate about whether to use <p> and <h> tags in email. I’ll settle that for you now. Do it!

Ok so you may have to add some additional styles to get the layout you want but that’s not hard.

So why use them? If you look at this article you can see there are a few heading, if one of these interests you, you read it, if not skip to the next one. If you’ve already read the article and just want a recap on one section you can quickly and easily find that. This can be done easily with a screen reader too but if there are no heading then the user will have to read the entire article.

HTML5 Semantic tags

When HTML5 came out, they introduced a series of new semantic tags to give better context to the code.

<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>

This means the user can have clear context of weather they are navigating in the <header> <footer> or <main> part of the page for example.

Unfortunately it’s a bit too early to start relying on these in our email code as some clients will strip them completely (more details on support below) so instead we can use the role attribute. For example role="header" role="footer".

So when and how do we use these? This is quite an in depth topic so I’d say use sparingly to begin with, you don’t want to end up confusing people with misuse of these attributes.

One thing I should point out though is avoid using role="main". The accessibility spec says there should only be one main element per page so this could end up being confusing as we'd hope the webmail page or email app has already defined a main element.

So if not main what do you define your email wrapper as? I’m still undecided. I would think role="article" or role="section" would make the most sense but webmail clients are already wrapping your content, so maybe we should avoid any double wrapping.

Gmail wraps your code with role="listitem" inside role="list" but only a single list item in the list which seems odd to me.

Yahoo! use role="presentation" on a div and that is inside role="main" which is also odd. There should only be one main per page and a div is presentational by default.

Outlook.com (older version) doesn’t appear to use any HTML5 tags or roles anywhere in the page, but this site is nearly phased out so I'll forgive them.

Outlook.com (newer version) uses role="document" this probably makes the most sense but I'm still on the fence here.

So as you can see there is no agreement between the major webmail clients on the best structure to use, so I’m going to hang back on this until I’ve done some more research. I'll try and update this section as I learn more.

Email client support

Well we’re off to a good start as <h> tags, <p> tags and alt text are supported everywhere, so if you’re not using them already, please start.

I ran a quick test on some HTML5 elements and found Inbox, AOL, Yahoo, Outlook.com, Outlook 365 GMX, Web.de and Alto, all strip HTML5 elements. They remove the tag completely so you’ll loose any class, id, role or inline styles applied to these but do leave the content. Out of that list, they all also strip role from a div, with the exception of Inbox.

But remember role won’t affect the visual appearance of your email in anyway, it will only enhance it for assistive technology so there’s no reason not to use it.

Gmail supports most HTML5 tags but removes, main, nav details and summary.

iOS, Apple mail, Outlook Mac, Android, Samsung, BB10, all look like they have great support for HTML5 tags and the role attribute. So if you are a user of assistive technology these are probably the ones to use.

In summary

Accessibility it is a very big and complex issue but making one small change today can have a huge effect. So go and put role="presentation" on all your presentational tables right now, you don’t even need to retest anything it just works. If you use snippets or modular build then this is even quicker.

Then moving forward in your next build start thinking more about semantic elements, maybe just use a few <h> and <p> tags to begin with if you're not already using them.

Small steps can have a big impact. You don’t need to strive for perfection at your first attempt, do something small today, then add a little something extra next week and so on. It should become a part of your day to day workflow.