- Awesome Mails Pro Edition 4 80 – Create Interactive Emails Gmail
- Awesome Mails Pro Edition 4 80 – Create Interactive Emails Using
Create an ecommerce website. Use our Website Builder to generate a mobile-responsive store for your industry with seamless site navigation, secure checkout, and more. Help people find you. Constant Contact helps you spread the word through email, social media, SEO and other forms of online marketing—all from one place. 3 WRITING GOOD EMAILS / LESSON PLAN DIGITAL LITERACY AND CITIZENSHIP IN A CONNECTED CULTURE ©2012 www.commonsense.org POINT OUT similarities between the parts of the letter and the email on page 1 of the You've Got Mail Student Handout by comparing how both examples have a header, greeting, body, closing, and signature. HAVE students circle the subtle differences in formatting as.
5 Awesome Examples of Interactive Content in Email
Expand your Outlook. We've developed a suite of premium Outlook features for people with advanced email and calendar needs. A Microsoft 365 subscription offers an ad-free interface, custom domains, enhanced security options, the full desktop version of Office, and 1 TB of cloud storage. Create professional pure HTML code according to advanced email templates coding experiences and responsive better engagement rate for emails opened on mobile email templates fast time reducing for every new email creation by optimizing processes and automation without any HTML skills advanced drag-n-drop email template builder with 300+ free designed templates and thousands of various ready-to. If you don't have welcome emails set up for new subscribers (whether a single message or a conversion-optimized email flow), create one. Get started with Scott Cohen's guide. Check out this simple yet effective #email #marketing example from Starbucks (plus 20 other brands).
Updated March 19, 2019.
According to a Litmus survey of email marketers, creating interactive experiences was the biggest email design trend of 2018, and one year prior, 2017 was declared the year of interactive email. Email marketing leaders are buzzing about creating app-like or microsite inspired experiences completely inside an email. https://bestvfile799.weebly.com/free-zorro-slots.html. If your idea of interactive email is 'Dear %%FIRST_NAME%%,' brace yourself for more possibilities.
Here are five examples of how you can incorporate interactive content into your next email.
Navigation bars, accordions, and menus
As brands strive to make email a fully interactive, app-like experience, users will continue seeing more web-like navigation and menu options. This is especially relevant to mobile email design, which has traditionally seen tightly constricted navigation options due to screen size. The ability to include hamburger menus and carousels into email code is changing that.
Here is an email we created for Rev that uses accordions to minimize the initial amount of information presented and imitate a web-like experience.
Shopping carts
The more barriers you can remove for customers, the easier, and more likely, it will be for them to go through with a transaction. Dali games. Some brands are making it possible for users to shop, manage their cart and initiate transactions completely inside an email.
Check out this example from Litmus. Users can peruse conference dates, options and packages, add tickets to a shopping cart, and hop to a landing page to finalize the purchase.
Real-time news and updates
EmailMonday blogger Jordie van Rijn predicts more email will use contextual data, in real-time. This includes content based on geolocation, device, weather, time, (Twitter) trends, and stock levels.
Based on real-time variables, these emails will generate content based on the moment of open, not on the moment of send.
According to Adobe, the definition of 'real-time email marketing' is email that delivers 'contextually relevant experiences, value, and utility at the appropriate moment in the customer lifecycle in ways that reflect the customer's preferences.'
An example from men's fashion brand Allen Edmonds shows how the brand used weather and geo-location as variables to deliver contextually relevant content to subscribers. Subscribers in areas experiencing weather warmer than 40º received content featuring rain gear, while recipients in areas experiencing weather below 40º received content offering winter shoes. This particular campaign saw a 300% jump in click-through rate.
HTML5 video and animated GIFs
While video is still not universally supported by different email clients, it is becoming more common, and if your subscriber base is especially active on Apple Mail, it's a good option.
Campaign Monitor listed some best practices for inserting video into your brand's email experience.
- Keep videos short.
- Keep the file size small.
- Default to mute.
- Make sure using video adds value to the email.
Animated GIFs add the interactive element of video with fewer limitations. A report compiled by Email Monks found that emails including an animated GIF see a click-through rate up to 26% higher than one without (Email Institute) and that using a GIF in an email can increase the conversion rate by 103% (Marketing Sherpa).
In this email we created for Indiana Sports Corp, we used a series of subtle, animated GIFs to draw the viewer in and guide them through the email. Another example from our work with the Indiana Pacers uses a GIF to feature several of their star players right as the user opens the email.
Games and puzzles
You have probably already heard about how gamification can be used to drive high-quality engagement with your audience. More brands are using gamification to drive interaction and conversions in email.
We recently incorporated a game into one of our own TrendyMinds emails. Users answered a series of questions inside the email to unlock which Halloween villain they are most like. Try it out here.
Interactive content may require access to more sophisticated data or infrastructure than your basic email, and many of these interactive elements will require fallbacks for email clients that don't support them. But incorporating interactive content into your email marketing efforts, in ways that add value to your audience, is sure to drive engagement and put you one step ahead of the game.
Interested in incorporating interactive content in your next email campaign? Give us a shout.
You may also be interested in
If you've been to any recent email conference or summit, then you're probably aware that interactive elements are some of the hottest email design trends. Not only do they entertain recipients, but they can also increase click-to-open rates and drive more conversions.
With the popularity of interactive email elements, it's becoming more important to use interactivity in new and unique ways. Subscribers are starting to get used to the usual rollover effects and buttons, so if you really want to surprise and engage them, we recommend thinking outside of the interactive box.
In this post, we've put together some ideas for using common interactive elements in new ways.
Email Client Compatibility
Before we dive in, we should note that only some email clients support interactive elements. While support will depend on the code, roughly 90% of interactive emails work in Apple Mail and 50% work in Gmail. And you guessed it, almost nothing works in Outlook 2016.
You can check Campaign Monitor's CSS support guideto see which email clients support which elements. This handy CSS animation guide also outlines some of the main compatibility issues.
It's also important to test and QA your email before each send, especially if you're using interactive elements. Adding code changes – simple or complicated – can easily throw off email rendering. Testing before you send can help avoid mistakes, protect your reputation and save you money down the line.
1. Image Rollover Effect
Email marketers typically use rollovers to show close-ups or the back side of products. But you can use a rollover for much more than that.
Tease a Product
In this email from lighting and furniture designer Tom Raffield, recipients look for the answer to 'Can you guess where we are going?' by hovering over the clues. This is a great example of an email combining interactivity and gamification. It would have been perfect if they'd provided recipients with a fallback.
Hidden Product Descriptions
Emails only have so much space to showcase products. Using a hover effect to show more detail can make good use of precious space.
You will need two images to implement this: the product image and a screenshot of the product details.
Quizzes
Hubspot uses a rollover effect to create a quiz about email marketing. This allows the user to know the result right away.
Correct answers are highlighted with green and incorrect are highlighted with red. For users with color vision deficiencies, Hubspot keeps the email accessible by specifying the answer below the quiz.
Tooltips
Tooltips are not only for websites and apps. Did you know that you can use them in email, as well?
Nike used the rollover effect to create tooltips with product details.
At first glance, the user only sees the image of a girl in the gym. But when the subscriber wants to get more information about the item without leaving the email, he or she can hover the cursor over the 'plus' sign.
Email Clients that Support Image Rollover Effect (Hover)
- Yahoo! Mail
- Apple Mail 1
- AOL
- Gmail
- iCloud Mail
- Outlook 2003
- Thunderbird
- net
Subscribers who use an email client that is not compatible will only see the primary image.
It's important to note that image rollover/hover effects don't work on mobile devices — recipients will only see the primary image (the one you insert first).
2. Radio Buttons
Email developers and marketers often use radio buttons to switch the colors of an email, or as a way for a user to choose an item from a list.
In this Beyond the Envelope email from Paul Airy, subscribers can toggle between small- or large-sized font with two buttons on the left side of the email.
By switching from 'S' to 'L', the user can change the font size.
Awesome Mails Pro Edition 4 80 – Create Interactive Emails Gmail
When a user doesn't click the toggle, nothing happens and he or she sees the default appearance settings.
Once the subscriber clicks the 'L' button, all fonts increase in size. Due to the transition property, the font change happens slowly.
To provide slow interchange, you need to add the tag 'transition' into the CSS code and set the time. Here, it's 0.3 s.
Because MS Outlook does not support transition and the input type radio, don't forget to hide these elements for MS Outlook — in this case, those recipients will see the default appearance of the email.
The CSS code:
If you want to implement this technique in your emails, you'll need to first insert the following into the HTML code before the class You will also need to insert this piece of code before your HTML You will also need to insert this code into your CSS. This code sets the font's size: It is important to note that you may edit the font size (set 50px instead of 130px, for example) and you can set as many headings as you wish. To add more headings, copy the first part of the code and, instead of h1, specify h2, h3, etc. To make this technique work seamlessly, you'll also need to make sure that your template consists of rows. When the font size is changing, the size of the containers also increases, and your email can look broken with buttons located in the wrong spot. When the email consists of stripes, the location of content elements will remain the same. We've all seen a button in an email, but what about buttons that change colors when you mouse over or click on it? There are two ways to do this technique: To execute this technique, you need to insert a piece of the CSS code into your email code. Because button layouts differ, we won't give you a universal code to embed in every email template. However, here are a few embed codes for certain mail editors: or . This code is responsible for the radio buttons. They will be fixed at the top of the page for desktop devices: and wrap it in the </code> … <code> tags. This piece of code sets the button style:3. Buttons
Working with the CSS
Check out this example from Litmus. Users can peruse conference dates, options and packages, add tickets to a shopping cart, and hop to a landing page to finalize the purchase.
Real-time news and updates
EmailMonday blogger Jordie van Rijn predicts more email will use contextual data, in real-time. This includes content based on geolocation, device, weather, time, (Twitter) trends, and stock levels.
Based on real-time variables, these emails will generate content based on the moment of open, not on the moment of send.
According to Adobe, the definition of 'real-time email marketing' is email that delivers 'contextually relevant experiences, value, and utility at the appropriate moment in the customer lifecycle in ways that reflect the customer's preferences.'
An example from men's fashion brand Allen Edmonds shows how the brand used weather and geo-location as variables to deliver contextually relevant content to subscribers. Subscribers in areas experiencing weather warmer than 40º received content featuring rain gear, while recipients in areas experiencing weather below 40º received content offering winter shoes. This particular campaign saw a 300% jump in click-through rate.
HTML5 video and animated GIFs
While video is still not universally supported by different email clients, it is becoming more common, and if your subscriber base is especially active on Apple Mail, it's a good option.
Campaign Monitor listed some best practices for inserting video into your brand's email experience.
- Keep videos short.
- Keep the file size small.
- Default to mute.
- Make sure using video adds value to the email.
Animated GIFs add the interactive element of video with fewer limitations. A report compiled by Email Monks found that emails including an animated GIF see a click-through rate up to 26% higher than one without (Email Institute) and that using a GIF in an email can increase the conversion rate by 103% (Marketing Sherpa).
In this email we created for Indiana Sports Corp, we used a series of subtle, animated GIFs to draw the viewer in and guide them through the email. Another example from our work with the Indiana Pacers uses a GIF to feature several of their star players right as the user opens the email.
Games and puzzles
You have probably already heard about how gamification can be used to drive high-quality engagement with your audience. More brands are using gamification to drive interaction and conversions in email.
We recently incorporated a game into one of our own TrendyMinds emails. Users answered a series of questions inside the email to unlock which Halloween villain they are most like. Try it out here.
Interactive content may require access to more sophisticated data or infrastructure than your basic email, and many of these interactive elements will require fallbacks for email clients that don't support them. But incorporating interactive content into your email marketing efforts, in ways that add value to your audience, is sure to drive engagement and put you one step ahead of the game.
Interested in incorporating interactive content in your next email campaign? Give us a shout.
You may also be interested in
If you've been to any recent email conference or summit, then you're probably aware that interactive elements are some of the hottest email design trends. Not only do they entertain recipients, but they can also increase click-to-open rates and drive more conversions.
With the popularity of interactive email elements, it's becoming more important to use interactivity in new and unique ways. Subscribers are starting to get used to the usual rollover effects and buttons, so if you really want to surprise and engage them, we recommend thinking outside of the interactive box.
In this post, we've put together some ideas for using common interactive elements in new ways.
Email Client Compatibility
Before we dive in, we should note that only some email clients support interactive elements. While support will depend on the code, roughly 90% of interactive emails work in Apple Mail and 50% work in Gmail. And you guessed it, almost nothing works in Outlook 2016.
You can check Campaign Monitor's CSS support guideto see which email clients support which elements. This handy CSS animation guide also outlines some of the main compatibility issues.
It's also important to test and QA your email before each send, especially if you're using interactive elements. Adding code changes – simple or complicated – can easily throw off email rendering. Testing before you send can help avoid mistakes, protect your reputation and save you money down the line.
1. Image Rollover Effect
Email marketers typically use rollovers to show close-ups or the back side of products. But you can use a rollover for much more than that.
Tease a Product
In this email from lighting and furniture designer Tom Raffield, recipients look for the answer to 'Can you guess where we are going?' by hovering over the clues. This is a great example of an email combining interactivity and gamification. It would have been perfect if they'd provided recipients with a fallback.
Hidden Product Descriptions
Emails only have so much space to showcase products. Using a hover effect to show more detail can make good use of precious space.
You will need two images to implement this: the product image and a screenshot of the product details.
Quizzes
Hubspot uses a rollover effect to create a quiz about email marketing. This allows the user to know the result right away.
Correct answers are highlighted with green and incorrect are highlighted with red. For users with color vision deficiencies, Hubspot keeps the email accessible by specifying the answer below the quiz.
Tooltips
Tooltips are not only for websites and apps. Did you know that you can use them in email, as well?
Nike used the rollover effect to create tooltips with product details.
At first glance, the user only sees the image of a girl in the gym. But when the subscriber wants to get more information about the item without leaving the email, he or she can hover the cursor over the 'plus' sign.
Email Clients that Support Image Rollover Effect (Hover)
- Yahoo! Mail
- Apple Mail 1
- AOL
- Gmail
- iCloud Mail
- Outlook 2003
- Thunderbird
- net
Subscribers who use an email client that is not compatible will only see the primary image.
It's important to note that image rollover/hover effects don't work on mobile devices — recipients will only see the primary image (the one you insert first).
2. Radio Buttons
Email developers and marketers often use radio buttons to switch the colors of an email, or as a way for a user to choose an item from a list.
In this Beyond the Envelope email from Paul Airy, subscribers can toggle between small- or large-sized font with two buttons on the left side of the email.
By switching from 'S' to 'L', the user can change the font size.
Awesome Mails Pro Edition 4 80 – Create Interactive Emails Gmail
When a user doesn't click the toggle, nothing happens and he or she sees the default appearance settings.
Once the subscriber clicks the 'L' button, all fonts increase in size. Due to the transition property, the font change happens slowly.
To provide slow interchange, you need to add the tag 'transition' into the CSS code and set the time. Here, it's 0.3 s.
Because MS Outlook does not support transition and the input type radio, don't forget to hide these elements for MS Outlook — in this case, those recipients will see the default appearance of the email.
The CSS code:
If you want to implement this technique in your emails, you'll need to first insert the following into the HTML code before the class You will also need to insert this piece of code before your HTML You will also need to insert this code into your CSS. This code sets the font's size: It is important to note that you may edit the font size (set 50px instead of 130px, for example) and you can set as many headings as you wish. To add more headings, copy the first part of the code and, instead of h1, specify h2, h3, etc. To make this technique work seamlessly, you'll also need to make sure that your template consists of rows. When the font size is changing, the size of the containers also increases, and your email can look broken with buttons located in the wrong spot. When the email consists of stripes, the location of content elements will remain the same. We've all seen a button in an email, but what about buttons that change colors when you mouse over or click on it? There are two ways to do this technique: To execute this technique, you need to insert a piece of the CSS code into your email code. Because button layouts differ, we won't give you a universal code to embed in every email template. However, here are a few embed codes for certain mail editors: Replace the 'FEFEFE' and '333333' with the colors you prefer. The transition property provides the seamless color interchange. Here's an example of the technique: You'll need to design a CTA button, take a screenshot of it, then create a new button of the same size with the same text, but set other colors to the font and the button itself, and a take a screenshot of it, too. Then by using these two images, implement the image rollover effect. Remember to add a link to these images that will take customers to a landing page once they click the button. Email marketers often ask customers for feedback through a survey. This is sometimes a single-question survey where participants click the image that matches their answer. If the survey contains more than one question, marketers can create a Google Form and send the link in an email. But there is a better alternative to both options — embed the questionnaire into the email. To embed the Google Form: Keep in mind that only some editors support this code (Email on Acid and Stripo.email included). You can tick checkboxes in the embedded Google Form on desktop devices only. It does not work on mobiles, but your recipients will have the link to the web version of this questionnaire. We've all seen complex interactive 'game' emails – Halloween games, shaking snow globes (or Magic 8 Balls), or unwrapping Christmas presents. These can be very complicated and will certainly require a developer's help. These interactive emails also work in a limited number of email clients. So, how can email marketers create interactive games that don't require lots of complicated coding? This email example we created below asks recipients to find his or personal present. The subscriber needs to hover each image to find a special greeting or a promo code. (See above for the list of clients that support image rollover effects). https://minmenglilan1971.mystrikingly.com/blog/list-of-all-mac-lipsticks. Wonderpen 1 4 0. This is not exactly an interactive email, but it will work for all subscribers and give everyone a chance to have some fun. This Omnisend email does exactly that: In this email, Omnisend asked the subscriber to 'click to start scratching'. Once I clicked, I was redirected to an external web page, where I had some fun scratching the circle. The CTA button only appeared once I 'cleaned' the circle. Before you dive into some of these interactive email elements, keep these notes in mind: Make sure your email looks flawless before you send it out to your subscribers. Remember: only live email tests can guarantee fully accurate email rendering previews. With Email on Acid, you can preview your email in more than 90 email clients and devices before you hit 'send.' Sign up for our free trial and start testing today. Hanna Kuznietsova is the chief content officer at Stripo.email. Working with email is one of Hanna's passions; she loves analyzing email and conducts research to write about the latest trends in email marketing on theStripo.email blog. Hanna Kuznietsova is the chief content officer at Stripo.email. Working with email is one of Hanna's passions; she loves analyzing email and conducts research to write about the latest trends in email marketing on theStripo.email blog. or . This code is responsible for the radio buttons. They will be fixed at the top of the page for desktop devices: and wrap it in the </code> … <code> tags. This piece of code sets the button style:3. Buttons
Working with the CSS
MailChimp Editor
Email on Acid Editor
Stripo email Editor
Awesome Mails Pro Edition 4 80 – Create Interactive Emails Using
Use Image Rollover Effect
Both Button Options will Work in the Following Email Clients:
4. Survey
5. Gamification
Use the Rollover Effect
Provide an external link to the game
Closing Words of Advice
Test Your Email First!
