Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Bold, eye-catching graphics – social media has taught us to have short attention spans, but how can you capitalize on this in your email campaigns? After all, as a marketer, you are always looking for a better way to highlight email content and engage your readers. Well, we have two words for you: interactive emails.
You can shape content by using interactive images with hover and scroll effects or by adding animated GIFs, accordions, countdown timers, and carousels Grab your readers' attention to increase engagement and increase conversion and click-through rates.
Don't know where to start? We have them. We'll explain why you should use interactive images and how to code interactive elements in emails.
Why use interactive images in emails?
If a picture is worth a thousand words, how much is an interactive picture worth? Although this cannot be precisely quantified, Here are some reasons for inclusion interactive email content in your next email marketing campaign:
- Increase engagement. Use interactive elements to allow readers to enter information into forms, scroll, and browse without leaving their inbox. By reducing friction in the user experience, you encourage your subscribers to engage more with your content.
- increase Conversions. By increasing engagement, you increase your conversion rate. Readers are more likely to click on your landing page if they find your email engaging.
- Stand out from the crowd. We all know inboxes are crowded, and just because your subject line convinces readers to open your email doesn't mean they'll click through to your website. Interactive images captivate and capture your readers' attention, driving engagement and click-through rates.
Four ways to code interactive images in your email designs
Now that we’ve covered the “why,” let’s dive into the “how.” This section describes four different ways to encode interactive content into your emails, including:
- Add hover animations
- Create side-scrolling images
- Design image carousels
- Embed animated GIFs
For the following subsections you will need a working knowledge of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). Need a refresher? Check out our article on the basics of email development.
Without further ado, let’s dive in!
1. Add hover animations
Learn how to add a hover effect to an image in your email. Let's start with this graphic:
It looks good. But we can do better. With a little coding we can make it interactive. We want our icons to invert colors when subscribers hover over them, like this:
Although this may look complicated, the implementation is quite simple. Take a look at the following code snippet:
|
All three symbols are encoded in the same way. We use a table
| to contain the image. You'll notice that the cell has the class iconArea1BG and the image itself has the ID iconArea1.
The next step is to add some CSS |
