Month: February 2017


The Importance of Content-Type HTML Character Encoding in Email

There have been many questions raised by our members on how email clients set the Content-Type within their HTML emails. As you may already know, the Content-Type plays a major role in the way an email will be displayed, especially with respect to special characters in non-Latin languages or when copying from a text editor like Microsoft Word.

In summary, all email clients ignore the Content-Type defined within your meta tag. Instead, they read it from the Content-Type value that is in the header of your email. The character type value within the header is automatically set by the server sending your email. This value can be changed but you would need direct access to the email server. The safest solution is to convert all of your special characters to HTML entities and we have created a free online tool to help assist you in that process.

What is Content-Type?

A Content-Type tells the web browser or email application how to interpret the text characters in your HTML or the body of the email. The most popular character sets are UTF-8 and ISO-8859-1.

To illustrate, let’s take the following code:

UTF-8 Characters: ö ü ä


UTF-8 Chinese: 激 光 這


HTML Entity Characters: 漢 字

Here’s how it renders using each character set:

As you can see above, the Chinese symbols are not represented in the ISO-8859-1 character set. This is because ISO-8859-1 only includes Latin based language characters. The result is a bunch of jumbled text, which is the ISO-8859-1 interpretation of the symbols.

Where does this all fit into HTML emails?

In website development, we can tell the web browser what character set to use in a meta tag like this:

Emails are displayed in clients using the same premise. It will display the email based on what Content-Type has been set. However, email clients read the Content-Type value that is set in the email header and they completely ignore the META tag that is within the HTML.

How does the email header Content-Type get set?

The header content is set by the server sending the email and contains information like To, From, Date, Time, etc. Some of which is displayed at the top of each email when viewing it in an email client.

Here is a snippet of an email header (notice the Content-Type value):

Date: Wed, 15 Dec 2010 12:45:55 -0700
To: test@test.com
From: testfrom@test.com
Subject: UTF-8
Message-ID: 
X-Priority: 3
X-Mailer: EOAMailer 5.0.0
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
Content-Type: text/html; charset="UTF-8"

Email client test results

I sent the above code example to all the email clients that we support. Pretty much every client renders text based on the Content-Type value set in the email header. Gmail is the only client that automatically converts your text to UTF-8, no matter what the header Content-Type is set to.

Here are the test results:

Clients Content-Type
AOL
Hotmail
Outlook Express
Outlook 2003, 2007 and 2010
Lotus Notes 6.5, 7, 8 and 8.5
Live Mail
Windows Mail
Entourage 04 and 08
Yahoo Classic, Current, and Beta
Thunderbird 2 and 3
iPad
iPhone Mail
Android Mail
Each take the Content-Type from the header of your email
Gmail
Android Gmail
iPhone Gmail
iPad Gmail
Each convert the Content-Type to UTF-8

One thing that I found very suprising is the fact that the web-based clients convert your text to the Content-Type character set prior to displaying it in the browser. I was able to check this by viewing what Content-Type they were setting in their META tags. As it turns out most of them are using UTF-8.

The Solution

Now you might be saying to yourself, great just when I thought designing emails wasn’t complicated enough. It does in-fact add another layer of complexity but there are a couple fairly easy solutions.

Option 1:
Contact your email service provider and ask them what Content-Type they set in the header when sending the emails. Once you know the Content-Type use that value in your HTML Meta tag when designing the email.

Option 2:
Convert all special characters to their HTML entities and you won’t have to worry about the header Content-Type. For example, the following character “” has an HTML entity value of ““. To help assist you in the conversion we have created a free online tool that will convert all of your special characters for you! Just use this conversion tool before you send your email.

In Conclusion

It is always important to check your character sets using both IE and Firefox, especially if you are using non-Latin characters or copy/pasting content from a text editor like Microsoft Word.

At this time, when you submit an Acid Test, our servers are configured to send your email using the UTF-8 Content-Type to each of our supported email clients.

Just like making any other changes to your email, changing your content-type or the way you encode HTML characters can have a big knock-on effect throughout the rest of the email. Make sure you’re steering clear of any issues by testing for free with our 7 day trial of Email on Acid.


A How-To Guide on Embedding HTML5 Video in Email

Feb, 22, 2017 Update:
This article has been updated to address the changes in email clients since it was written in 2013.

This article will teach you how to embed HTML5 video so that it can be played in email clients that support video in email, specifically Apple Mail, iOS 10 and the Samsung email client. It will also cover various fallback techniques so that alternate content is displayed in the clients that cannot play video.

Click here to see the full code

Email Client Support

As you can see from the table below, support for HTML5 video is still limited but the clients that do support it represent over half of the market share. Email applications, like the native iOS client, Apple Mail and the Samsung email client will allow recipients to play your video within the email client itself. Other clients like Gmail and the Android devices will display a fallback image.

Client Plays Video     Shows Fallback
Apple Mail  
Lotus Notes  
Outlook 2003-2016  
Thunderbird  
iOS 10, Native Client  
iOS 9, Native Client  
iOS Gmail  
iOS Yahoo! Mail  
iOS Outlook  
Samsung Galaxy, Native Client  
Android 4, Native Client  
Android Gmail  
Android Yahoo! Mail  
AOL Mail  
Gmail  
Yahoo! Mail  
Outlook.com  

Basic Video Code

The following is the basic video code. Clients that will be able to display and play video will use the poster attribute as the cover image for the video and the file referenced by the source tag as the video. Clients that don’t support video will render the image within the video tag that is wrapped by a link.


Email Specific Fallbacks

However, as is the case with email, many email clients don’t play ball. Certain clients such as iOS 8 and Android 4 will render the video cover but the video remains unplayable, potentially causing confusion to the recipient. Thus, the safe bet is to display a separate fallback section by default and then only display the video section in clients that are able to play video like the code below.


Video Content: MP4

Fallback Content

Since Yahoo! Mail strips display:none inline, you also need to add this to the :


 .video-wrapper {display:none;}

Displaying Video in Clients That Support Video

Apple Mail

For Apple Mail, we can use the -webkit-min-device-pixel-ratio media query to enable video. However we also need to prevent the video from displaying in iOS 8 clients that match that media query but does not play video. The fix is to add a min-device-width query that is wider than the iPad’s email client device width. Interestingly, this media query will activate on AOL Mail (that does not support video) for webkit browsers such as Chrome and Safari, but luckily, AOL Mail will simply display the fallback image and link that is embedded within the video tag.

@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
{
  .video-wrapper { display:block!important; }
  .video-fallback { display:none!important; }
}

iOS 10

Video was supported in the iOS 7 email client but was removed in iOS 8 and 9. Apple then added video support back in iOS 10. Unfortunately, in iOS 8 and 9, the email client would still render the video with a play button but not play the video! We need a way to only show the video content in iOS 10. Our friend Remi Parmentier discovered a clever method to only display video in IOS 10 using the @supports declaration. It targets certain CSS that iOS 10 supports but not iOS 9. Read here for his explanation.

However, Yahoo! Mail does not like the @supports declaration and will expose any CSS within the block in the Webmail. (Yahoo! Mail used to break media queries as well but that has been fixed – see this article for background). To ensure the CSS within the @support block are not activated in Yahoo! Mail, I use the “starts with” (^=) attribute selector that Yahoo! Mail strips (it allows regular attribute selectors).

@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
  div[class^=video-wrapper] { display:block!important; }
  div[class^=video-fallback] { display:none!important; }
}

Samsung Email Client

Although not frequently discussed, the Samsung email client that comes pre-installed in the Galaxy line of phones supports video. If you want to display video within the client you can use the following CSS:

#MessageViewBody .video-wrapper { display:block!important; }
#MessageViewBody .video-fallback { display:none!important; }

Full Code




Video in Email Test

 .video-wrapper {display:none;}
 @media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px) 
 {
  .video-wrapper { display:block!important; }
  .video-fallback { display:none!important; }
 }
  @supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
    div[class^=video-wrapper] { display:block!important; }
    div[class^=video-fallback] { display:none!important; }
  }
  #MessageViewBody .video-wrapper { display:block!important; }
  #MessageViewBody .video-fallback { display:none!important; }



Video in Email Test

Video Content

Fallback Content

Video Formats

HTML5 supports three main video formats: MP4, OGG and WebM. Due to intellectual property issues, Apple decided to only support MP4 in their browsers and email clients, hence that’s the only format I’d recommend using for video in email.

You should also ensure that your server is configured to output the correct MIME type so that the email client is able to detect the proper video format when retrieving the video. Check out this article for more details. If you are using the Apache Web server, ensure that this entry is in your .htaccess file.

AddType video/mp4 .mp4 .m4v

Should You Use Video in Email?

Although embedding video in email is not difficult, it is not exactly trivial either. Some email marketers advocate for just displaying a fake play button on an image and having that open the browser to a landing page that hosts the video. Others prefer displaying an animated gif converted from a video since animated gifs are supported in all email clients except for Microsoft Outlook.

Personally I think it depends on your audience and your brand. Having a video play right in the email client can add a wow factor to your newsletters and if you use video a lot, the experience of having the video play without taking the user outside to a browser may make your recipients more likely to play the video. Either way, its your call!

If you’ve decided to use video in your email, make sure that you verify that your email will render nicely across the most popular email clients. Email on Acid can help you test your email across these clients in seconds.

Big Thanks to Big Buck Bunny!

This video was used for testing coutesy of Big Buck Bunny.


What are you going to do with HTML5 video in your next email? Let us know in the comments below.


600+ Free Email Templates from Email on Acid

A good email template can make or break your marketing, but designing and building a template from scratch can be a very time-intensive process. Instead of creating a template from the ground up, let us save you hours of precious time with these 10 places to grab your very own email template. Simply download a template and customize it to fit your specific needs. Oh and did we mention… They’re free!

The following sites offer free email templates or template builders to get your next email campaign up and running in no time. Take a look at what’s out there for free and grab a new template to make your next campaign capture more clicks than ever before!

1. Email on Acid’s Responsive Template Library

Cost: Free!
Not to pat our own backs too hard or anything, but our templates have gotten a lot of attention. Over the years, we’ve been building up a bulletproof selection of templates created both by us, and some excellent email designers and developers. All of these templates are free to use with any Email on Acid account.

2. ZURB

Cost: Free!
We can’t write about free templates without mentioning ZURB’s awesome tool. They offer five different templates, all of which are responsive and pretty well made. The best part is, it’s totally free. Go to their site for yourself, or check out one of the templates in your browser, below.

3. Campaign Monitor

Cost: Free!
Campaign Monitor provides excellent email services from start to finish, including a super cool template builder. You can use it for free, no account required, and it does a bang up job of making templates for your needs. Once you’re done creating, you can import it straight into your Campaign Monitor account or download it for free and go from there. The folks at Campaign Monitor also run an excellent blog with lots of helpful tips, go check it out!

4. ActiveCampaign

Cost: Free (with account)
ActiveCampaign is a full service ESP that provides sending services, marketing automation and email templates, along with their online email designer tool. Check out some previews of the templates they offer here, or sign up for a free account and log in to see for yourself. To find their templates once logged in, click on the Campaigns tab, then on “Email Templates” on the right side of the screen. Their library includes 52 templates that range from very simple (single column, white background) to more complex.

5. 99 Designs

Cost: Free!
99 Designs offers this free template pack on their blog, which includes 3 templates in 4 colors. These include a newsletter, a promotional email and a notifications template. This trio would make a great starter package for a business that’s trying to establish a consistent look. If you want something a little more custom, consider taking advantage of 99 Designs’ crowd sourced design contests. You should have no problem finding an amazing design at a good price.

6. Free Email Templates.com

Cost: Free!
This site offers 70+ of email templates for free, so it shouldn’t be hard to find the right one for you. Use the categories on the right side of the page to browse for the perfect free template. All you have to do is download and customize their readymade email templates for your business!

7. Benchmark Email

Cost: Free (as part of service)
Benchmark Email offers some free templates with its service, which you can try free for 30 days. Benchmark focuses on promoting events through email, and they have a huge library of over 400 templates to support this. They categorize their templates by industry, but it only takes a few copy and image changes to convert a template for your specific niche.

8. GraphicMail

Cost: Free (as part of service)
GraphicMail is an ESP that hosts a sizeable library of email templates. You’ll have to sign up for an account to get access to their templates, but don’t worry: it’s free. For 15 days you’ll have access to their support team and all their cool features, but after that you’ll have to pony up to keep getting the good stuff. 15 days should be plenty of time to check out their templates and see if they’ve got something to offer for you and your business.

9. Cerberus

Cost: Free
If you’re looking for a template which is a little less designed but has a solid foundation, look no further than Cerberus. Created by Ted Goas, it features a series of responsive, hybrid, and fluid templates that are not only solidly built but boast good accessibility too.

Want to customize these templates to better reflect your business? Personalize these templates in a flash with fresh copy and images to ensure your brand is resonating through the design.  In no time you can turn your next email campaign into a lean, mean prospect converting machine!

But wait, you still need to test!

After you download your new template, make sure to continue to test as you tinker with and customize your new template. A simple tweak in the HTML could cause rendering issues across multiple devices.

Email on Acid even offers a free 7-day trial, which includes unlimited email testing in the most popular inboxes so you can thoroughly test as you integrate your new template into your emailing efforts.


Free Responsive Email Template

With mobile here to stay and so many of our users inquiring about best practices for developing responsive emails, we figured it’s a great time to offer up a series of free email templates to get you up and running as fast as possible.

There are several approaches to responsive email designs. This particular template offers 3 different “layouts” which trigger based on the width of the screen. By default, it supports 1-3 columns and as you trigger each media query conditional statement, it converts to a one a column layout for easy reading on mobile devices.

If you already have an account with us or are a community member, you already have access to this template in our resources section! Simply log in and navigate to the resource center in the left navigation bar. If at any point you have issues with the download, contact our support team!

Template Details

When developing this template, our first order of business was to research the most common dimensions that are used in popular devices today. With that study, along with our own media query test we’ve identified the most common device widths to target.

The breakpoints we’ve selected for this template are as follows:

  1. A width less than 480px for the iPhone and smaller smart phones.
  2. A width between 481px and 640px for medium sized Android devices
  3. A default dimension of 580px for tablets, web, and desktop email clients

What’s interesting about the above dimensions is that the breakpoint for medium sized handheld devices is actually greater than the real-estate your email will get in most web and desktop email clients. For that reason, the default width for our template is set to 580px. This dimension is less than the media query dimensions that we’ve used for medium sized mobile devices.

You can mix and match each section of this layout and we tried to make it super generic because your needs will likely change over time.

This template has been tested across most major email clients.

So how’d we do it?

1.) Media Queries

Here’s the entire style block:


   .ReadMsgBody {width: 100%; background-color: #ffffff;}
   .ExternalClass {width: 100%; background-color: #ffffff;}
   body	 {width: 100%; background-color: #ffffff; margin:0; padding:0;}
   table {border-collapse: collapse;}
 
    @media only screen and (max-width: 640px)  {
      body[yahoo] .deviceWidth {width:440px!important; padding:0 4px;}	
      body[yahoo] .center {text-align: center!important;}	  	
    }
 
   @media only screen and (max-width: 479px) {
      body[yahoo] .deviceWidth {width:280px!important; padding:0 4px;}	
      body[yahoo] .center {text-align: center!important;}	 
   }
 

We then used the ‘deviceWidth’ class on all tables and images throughout. This resets the width for each element based on the width of the mobile device. You could add more media queries if you want – feel free check out our latest research for more breakpoint ideas.

2.) Floating Elements

The next challenge was creating floating elements that naturally stack when there’s not enough room for them to float. Floating elements for email is rather tricky because several email clients do not support the ‘float’ property. Instead, we used the ‘align’ attribute within table elements.

For example:

Simple enough right? Well yes and no. Whenever you ‘left’ or ‘right’ align tables in Outlook 2007, 2010, and 2013, you end up with extra table padding. So if you are trying to accomplish a pixel perfect layout, you might want to check out this Outlook padding work-around for getting aligned tables to match up perfectly. In the case of this template, we used percentage based widths for each floating table and in some instances we had to rely on the ‘

‘ fix as defined in that blog post.

Conclusion

Obviously you will need to customize this template for your needs.  Just remember, you can keep it short and sweet for your mobile readers by hiding some elements within your layout using media queries. Both the Android and the iOS support the display:none property.

Hopefully this will save you some time and stress when creating your first responsive email!  Stay tuned for more creative solutions from Email on Acid.  Cheers and happy testing!

We’ve tested this template thoroughly and we trust it, that being said when it comes time for you to update it with your content, you’ll need to test it again. Any number of little changes can have massive consequences in the world of email. That’s why we’re offering you a 7 day free trial to test in Email on Acid.

Comments on this Blog

Comments on this blog are now closed, but please feel free to contact us with questions about this template, or post questions in the forum.

Notice: This blog post is intended for educational purposes. The materials used, including but not limited to, artwork, research, coding techniques, and the overall layout are to be considered ‘derivative’ and in no way do we intend to infringe on any unknown copyrights. We give our utmost respect to the millions of designers and developers who continuously inspire us to learn and create.

If you’d like to obtain rights to use any of the fonts that where included in the artowrk of our template, they are availible for purchase online: Hand Gothic, Thirsty Rough, Thirsty Script, Veneer.

  • Free Download

Enter your email here.

We’ll reply back with a link to download the template.

Email Address:


Are Chatbots the Death of Email Marketing?

Spoiler alert: Chatbots are not the death of email marketing. Every year or so a new technology comes around claiming to bring about the end of email marketing. Fortunately, for people such as myself (email marketers), this is far from the truth. While email marketing should co-exist and even thrive off of new technology like chatbots, it still is the #1 preferred channel for consumers to hear from their favorite brand. Plus, it also brings in $40 in ROI to every $1 spent. While chatbots bring about great potential, they still have a way to go before they can rake in that much ROI. In this article we’ll break down chatbots, what they hold in store for 2017 and how this technology will co-exist with email marketing.

What is a bot anyway?

A bot is software that impersonates a real-live person. While bots exist now to eliminate mundane tasks, that was not always the case. Bots started off actually annoying the common marketer. By increasing page views or spamming your Twitter feed, bots have been around for quite some time, but now they finally work in favor of the marketer.

With the help of technology, chat bots are progressing and becoming more contextually relevant for the end user. For example, TechCrunch has toted that Facebook’s Messenger bot store could be the most important launch since the App Store.

Below are major companies that embraced this trend within the past two years:

Messaging apps are not the only platform to succeed with bots. eCommerce is seeing a huge surge in bots being adopted on their website. For example, if someone was searching for shoes on a shoe store site, they could message with the bot asking for grey dress shoes, opposed to searching the site for a while in an effort to find the type and color of shoe they are looking for. With this type of personalization and customer service, bots are a powerful tool.

The issues at hand

Frankly, one of the main reasons email marketing has nothing to fear is that the technology just isn’t there yet for bots to be taking over anything. “The conversations aren’t fluent or smart enough to either trick the consumer to believe they’re talking to a human, or to deliver a good enough experience so that the human doesn’t care,” said Dean Withey, the CEO of ubisend, a mobile messaging solutions firm.

Plus, according to Forrester research only 4% of digital business professionals are actually using chatbots. Andrew Hogan, an analyst serving customer service professionals at Forrester said, “What’s really happening is that there’s been an explosion of attention and development but not necessarily a real business impact.”

There is just too much room for error at the moment for businesses to reply solely on chatbots to provide the support a real customer is looking for. Let’s put it this way, chatbots are good for engaging, not necessarily closing.

Chatbots, email and AI

When thinking about chatbots moving forward, you shouldn’t look at it as email vs. chatbots, having to choose one or the other. Instead, think about chatbots as being a new component to test and interweave into your email strategy.

A great example of this already in motion is through a company called Conversica. Conversica offers a virtual sales assistance that starts reaching out to leads 24/7 within minutes of a user showing interest in your brand. Through email, this virtual assistant sends AI emails that appear to be coming from an employee. Wondering if the copy reads like a robot? Not quite. In fact, 50% of leads reply to AI emails as they are written in a conversational manner and can be more engaging than lead-nurturing autoresponders.

With Conversica, it’s almost like having a little robot on payroll, engaging and nurturing a lead for days, weeks or even months until they make that sale or the lead opts out. When a lead is ready to purchase, Conversica’s lead nurturing software alerts a sales representative that it’s time to reach out and make the sales pitch. We’re still not at the point yet where human interaction is completely removed from the sales cycle.

Relevancy is what matters most

At the end of the day, the most powerful strategy on your side is providing relevant information to the end user. That’s why email is here to stay and thanks to the new and helpful technology chatbots provide, us marketers are even closer to ensuring we deliver the right message, at the right time, to the right person. So email marketers, embrace the bots and incorporate them into your email strategy to ensure you’re delivering to the best of your ability.

With email here to stay, how are you testing your email before you hit send? Every email client is different, so test your campaign across the most popular inboxes in seconds to ensure your message is not only relevant, but will look fantastic in every inbox.


How to Restart CSS Animations in Email Using The :active Pseudo-class

This article shows you a technique to restart CSS animations with a single click or tap using the :active pseudo-class.

There are two kinds of CSS animations, those that only run once, and those than run continuously. Some CSS animations that run in loops may be distracting to the recipient of your email so you might only want to run an animation once. However, it would be useful if the recipient were given an option to replay the animation on demand.

Although the CSS animation-play-state property supports paused and running, it there is no property that makes the animation “restart”. On the web, restarting animations commonly involve the use of Javascript. Unfortunately we don’t have such a luxury with email.

Thankfully there’s a simple technique to restart CSS animations that works in email clients.

My code snippets use the -webkit prefix. This is because for the most part animations only work in Webkit based clients.

Using the :active pseudo-class

The key to restarting a CSS animation is to set the animation-name of an animation to ‘none’ and then setting it back to the original animation.

As you can see this requires two steps. One to switch it to a different animation and one to set it back. You need a mechanism that can toggle these states in one action. Although checkboxes can be used to toggle between two states, if you used a checkbox you’d need to tap twice.

We have two pseudo-classes that fit our needs: :hover and :active. Both of these selectors only operate either while the cursor is over an element or when the user is clicking on an element. Since our goal is to restart an animation when the user clicks on a “restart” button, the :active pseudo-class is preferred.

Here’s the code to play an animation:


.box{
  -webkit-animation: launch 2s; 
}
@-webkit-keyframes launch{
  from {
    transform:translateX(0px);
  }
  to{
    transform:translateX(250px);
  }
}

replay animation

In our example, we set the animation property to none when a user is clicking on the “replay” button. When the user releases the button, the :active selector becomes inactive and the animation reverts back to the original animation, thus restarting the animation.

#replay:active + .anim-container .box{
  -webkit-animation-name:none!important;
}

View code example

Support for :active in email clients

Interestingly :active has a wide support among Webkit based email clients including iOS.

The peculiar thing about iOS is that the :active selector only fires briefly when an element is tapped. Unlike on a browser, where the :active selector stays active as long as the element in clicked, in iOS tapping and holding a button will not prolong the :active selector. That’s why for the longest time, there was very little value in using the :active selector in interactive email.

However, for the purpose of restarting animations, this brief firing of the selector is perfect!

Outlook for iOS quirk

Outlook on iOS has a quirk where clicking on a link with a named anchor will cause Outlook to launch the web browser. One method to address the Outlook on iOS quirk is to quickly move the element away when the :active selector is fired preventing the actual link from firing and opening the browser.

This can be done by using the CSS translate transform to move the element 1000px to the left when the :active selector is fired. Note CSS transforms can only be applied to block level elements.

#replay:active{
  transform:translateX(-1000px);
}

Alternatively, you can use an image as the trigger instead. The default iOS Mail client will only fire the :hover or :active selectors when applied to links, images or labels.

Arrangement of elements

As you’ve probably noticed, this technique requires that the replay trigger is placed before the animated element in the code, since the sibling selector can only target elements that are ahead and not behind itself.

What if you want to place the trigger after the animated element? The simplest way to achieve that is to either use absolute positioning or CSS transforms to visually place your trigger after the animated element on the email. (Keep in mind the Samsung Android client does not support absolute positioning).


View code example

Starting animations manually

Sometimes you don’t want an animation to automatically start. This can be done by using the :checked state using a label that targets a radio element. Clicking the label the first time will activate the :checked state of the radio element causing the animation to run once. By targeting the label using the :active selector, clicking the label again will cause the animation state to switch and switch back, and thus restarting the animation.


#cbox:checked + .anim-container .box{
  -webkit-animation: launch 2s; 
}
#replay:active + .box{
  -webkit-animation-name: none!important;
}



View code example

Keep in mind that email clients such as Outlook on iOS and Mac (and certain email service providers like MailChimp) do not support form elements in email, so you won’t be able to apply this trick.

Make sure you hide the checkboxes in your email. Here’s an article that goes into the details of hiding form elements.

Examples

View email example

A cool use of a replay button is to allow the recipient to replay an intro animation in an email. Here’s an email that plays fireworks with a recipient opens the email. The replay button allows the recipient to enjoy the fireworks as many times without having to reopen the email.

Another use of a replay button is to play animations that may be embedded further down the email content (below the fold), by having a replay button recipients will be able to start the animation when they are ready to view the animation.

Fallbacks

When working with interactivity and animations in email, you need to ensure the experience on less capable clients are not negatively impacted, so be sure to plan for those clients as well. This article goes into how you can display fallback content for clients that don’t support these features.

Testing on the multitudes of email clients is where Email on Acid can save you a ton of time. Get over 70 previews in just one minute by testing with Email on Acid.