---

Last week we were excited to team up with eROI to bring you an hour-long webinar all about interactive email. We were thrilled to see so many people are interested in Interactive Email.

Missed the Webinar?

View the Slides Watch the recording

Questions

We had a lot of great questions from our attendees, so much so that we didn't have time to get through them all before the time was up. We've tried our best to answer the questions we can. If you still feel you have a burning question that needs answering, please reach out.

Q: If Outlook in the future works like Gmail with all CSS permitted (for example), what will be the impact in the future interactive email?

I think more brands will start to explore interactive techniques knowing that the number of subscribers that will receive it will be larger. Without a large email client market share, it’s hard to justify the time and effort it takes to create these experiences. It will also help overall build time since we won’t have to concentrate so much on creating robust fallbacks.

Q: What resource do you recommend for learning new code, that is email specific vs web design?

I love Email on Acid’s blog as well as following #EmailGeeks on Twitter. A lot of people share their experiments. Table Tr Td has a super fun email subscription where they send coding experiments directly to your inbox, as well as really great resources on their site.

Q: Is the code for your Taco Bell emails publically available? Or is there a blog post for these?

Absolutely! Feel free to DM me on Twitter with any specific questions (@swisswebmiss) or check out this blog post I wrote a year ago. We were also fortunate to have a couple of our emails featured on Really Good Emails that will show you the live code.

Q: How does the Filmstrip method degrade in clients that don't support interaction? Does it just show the first frame?

The Filmstrip technique displays a separate fallback block of content on clients that don’t support interaction. You can learn all about it in this article.

Q: If we’re B2B, should we be even bothering with Interactive email?

There are other techniques outside of interaction that can help make your campaigns more successful. Talking to fellow #EmailGeek Melanie Kinney (@melaniebeth_), to really stand out in the inbox you need to separate your brand from looking like everyone else. She recommends creating wider emails to take advantage of being on a desktop client (beyond 600px), using web fonts like Google fonts or Typekit, leveraging background images, and even incorporating animated GIFs which can make your emails feel like they are interactive. These are all techniques that are focusing on making your emails stand out from a visual point of view, but what can really take your B2B emails to the next level is personalization. Interactive emails aren’t about being flashy, but providing value to the user. Start incorporating A/B testing into your strategy to learn whether your subscribers prefer concise vs long form content. Track engagement on specific types of content or products to allow you to segment your users so you can target them better.

Q: My company is B2B and 25% of our mailing list is using Outlook, while the majority of the remainder is on Gmail and Yahoo. Are there any techniques we could implement even with our limited support?

Unfortunately, Gmail and Yahoo do not support CSS animations, but Yahoo does support the punchcard coding technique that Justin was referring to in the webinar. Another strategy is to build a more robust landing page experience since you have more control in the browser.

Q: Do interactive emails tend to be larger in size than a more traditional email? If so, by how much can it impact loading time?

It depends mostly on the complexity of the design. Rollovers and simple animations do not significantly bloat the size of an email. Generally, the images are the ones increate loading time so you have to be careful when building carousels and tabs. Techniques that use checkboxes can delay the loading of images by using placeholder background images and then swapping in the real backgrounds when an element is shown but can be tricky to implement.

Q: When creating a more complex interactive email, what is your normal development time before the email is ready to send?

This can definitely vary depending on if the technique has already been vetted in the real world or it’s something your team is attempting to figure out for the first time. To set myself up for success I create a prototype of the technology that I QA even before we start design. This allows me to better collaborate with the designers on the limitations and what is possible. Then when the design is finalized I have a foundation to work from which helps make QA more efficient. For a baseline amount of hours, I would take the normal amount of hours it takes you to develop an email and triple it :)

Q: I think that animated gifs are one thing, but are consumers really ready for true interactive emails - e.g. tabs, kinetic email. I assume it's not possible to track the usage of the tabs or the hot spots in a kinetic email?

Justin Khoo has a great article on Fresh Inbox outlining the process in adding tracking pixels to interactive tabs. Essentially how it works is adding a tracking pixel as a background image that is displayed when a tab is :checked. Every time the tab is active or :checked the pixel registers as a view. More on that here.

Q: What resource do you recommend for learning new code, that is email specific vs web design?

There are many introductions to HTML email courses out there and I haven’t personally tried any of them although I’ve heard that this one is pretty good. However, if you’re interested in interactive email, you can check out tabletrtd.com or my blog freshinbox.com.

Q: Do you have any support/techniques/ideas about using background images with Retina images?

Since the dimensions of Retina images need to be sized down from their native widths and heights, any client that supports the background-size attribute will support them. Just know that background attributes (vs CSS backgrounds) don’t support resizing, so they won’t work in those clients like Outlook.com. For a full list of support, check here.

Q: Can the Filmstrip technique be applied to a horizontal setting as well?

Since the filmstrip technique doesn’t show the strip scrolling it would not make a difference if the layout is vertical or horizontal. However having the layout being horizontal would work but is slightly more problematic. Using the filmstrip+ method, you can use margins to implement a sliding transition based on the state of the radio elements instead so you can make the strip slide left and right. That said, I haven’t tested it with a horizontal layout. If you’re looking to implement sliding carousels, this article goes into some details. Its not implemented using the filmstrip method and won’t work in the Gmail Android app.

Don't guess - test!

Want to give Email on Acid a try? We offer a free trial, free for 7 days, so you can see what we have to offer. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices to preview before you hit send.

Test today!