EOA News
Webinar Recap: Making the Case for Interactive Email: What’s Possible, Beautiful, and Relevant
EOA News
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 🙂
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.
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.
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.
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.
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.
