{"id":3450,"date":"2019-01-31T00:00:00","date_gmt":"2019-01-31T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity\/"},"modified":"2023-08-14T17:01:13","modified_gmt":"2023-08-14T21:01:13","slug":"fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity","title":{"rendered":"Fallbacks for Interactive Email: How to Combat Limited Support for Interactivity"},"content":{"rendered":"

For the third year in a row, interactive email experiences were voted one of the <\/span>hottest email design trends<\/span><\/a>. So why don\u2019t we see more interactive emails in our inboxes? For many brands, limited inbox provider support is the main reason they don\u2019t send more interactive campaigns.<\/span><\/p>\n

You don\u2019t have to fear limited support if you have a fallback in place. There are plenty of methods that help you create engaging, interactive emails where they are supported, while still guaranteeing a functional and beautiful experience in all other inboxes. <\/span><\/p>\n

Why Fallbacks Matter<\/h2>\n

Support for HTML and CSS varies across email clients, and many of the HTML and CSS elements that you might use to power interactivity in email might not be supported everywhere.<\/span><\/p>\n

If you don\u2019t account for cases where it\u2019s not supported, your email can look broken. Let\u2019s look at this example of a beautiful interactive image carousel<\/a>:<\/span><\/p>\n

\"Interactive
Interactive email from Offset by Shutterstock featuring an image carousel.
\nSee it in CodePen.<\/a><\/figcaption><\/figure>\n

The interactive carousel with its powerful imagery looks great in Apple Mail, allowing subscribers to flip through the pictures using the arrows or checkboxes. But here\u2019s how that very same email renders in Yahoo! Mail if there\u2019s no fallback in place:<\/span><\/p>\n

\"Without
Interactive email with no fallbacks in place<\/figcaption><\/figure>\n

Without fallbacks, the email appears broken and likely won\u2019t see a lot of clicks. We don\u2019t want that to happen! So let\u2019s look at how we can make interactive emails work everywhere with bulletproof fallbacks.<\/span><\/p>\n

Using the power of the hide and show framework<\/span><\/h2>\n

The hide and show framework is the most basic and common tactic to set up interactivity and fallbacks in email. While simple, it\u2019s still very powerful.<\/span><\/p>\n

The framework does exactly what its name suggests: It hides the interactivity for clients that don\u2019t support it and shows a fallback instead. <\/span><\/p>\n

You set up two completely separate sections in your HTML\u2014one for your interactive content, and one for your static fallback. That way, you can not only specify those two different types of content, but also set up different links and different tracking for each version of your email, making it possible to track and compare interactive vs. the static versions. Think of it as an A\/B test within <\/span>one<\/span><\/i> email.<\/span><\/p>\n

Let\u2019s look at how you make this happen within your email code with this simplified example (or check out the CodePen<\/a>):<\/span><\/p>\n

\n<!-- start INTERACTIVE_SECTION --><\/span>\n\n<!--[if (!mso)&(gte IE 10)]> <! -- --><\/span>\n\n<div <\/span>id=\"<\/span>interactive<\/b>\" <\/span>style=\"display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;\"<\/span>><\/span>\n\n<div <\/span>class=\"<\/span>content<\/b>\"<\/span>><\/span>\n\nThis is where the Interactive Content goes.<\/span>\n\n<\/div><\/span>\n\n<\/div><\/span>\n\n<!--<![endif]--><\/span>\n\n<!-- end INTERACTIVE_SECTION --><\/span>\n\n \n\n<!-- start FALLBACK_SECTION --><\/span>\n\n<div <\/span>id=\"<\/span>staticfallback<\/b>\"<\/span>><\/span>\n\nThis is where the Fallback Content goes.<\/span>\n\n<\/div><\/span>\n\n<!-- end FALLBACK_SECTION --><\/span>\n<\/code><\/pre>\n
We wanted to call out \u201cvisually\u201d because the content still loads, even if it isn\u2019t visible. This is important to note because all of the images and other files you might pull in on the interactive section will impact the loading time for the fallback layout. As a workaround, try leveraging the same images as much as possible for both layouts.<\/span><\/p>\n
For the content, you can populate the <\/span>fallback section<\/b> with any conventional email code or simply wrap those <\/span><div><\/span>s around any existing static email code you might have. For the <\/span>interactive section<\/b>, feel free to play around with any sort of CSS-only techniques you\u2019re interested in implementing. Searching for CSS-only carousels<\/a>, hotspots, quizzes<\/a>, scrolling effects, etc. can yield some great inspiration!<\/span><\/p>\n
Utilizing externally-linked stylesheets<\/h3>\n
Meanwhile, the CSS referenced in the dark red code is hosted in an externally-linked CSS file that contains code like this:<\/span><\/p>\n
\n\n#interactive<\/b> {<\/span>\n\ndisplay: block !important;<\/span>\n\nmax-height: inherit !important;<\/span>\n\noverflow: visible !important;<\/span>\n\n}<\/span>\n\n#staticfallback<\/b> {<\/span>\n\ndisplay: none !important;<\/span>\n\n}<\/span>\n\n \n\n#interactive .content<\/b> {<\/span>\n\nFont-family: Arial, Helvetica, sans-serif;<\/span>\n\nfont-size: 20px;<\/span>\n\nline-height: 30px;<\/span>\n\ndisplay: block;<\/span>\n\ncolor:#ffffff;<\/span>\n\n}<\/span>\n<\/code><\/pre>\n
The <\/span>#interactive<\/strong> and <\/span>#staticfallback<\/strong> styles all have <\/span>!important;<\/span> rules to allow them to override the inline CSS in your HTML. These are the key style declarations that hide and show your layouts. The <\/span>#interactive .content<\/strong>  declaration represents the code you\u2019d use to actually style your interactive content, though interactive layouts would usually require more than this example to work. For example, if you wanted to style a CTA that only appears in the interactive layout, you would create a new declaration like <\/span>#interactive .cta<\/strong> (or <\/span>.interactive-cta<\/strong>, as long as the selector is unique to the interactive section) and add your styles to the CSS file.<\/span><\/p>\n
Then you would add a link tag to your HTML referencing this external stylesheet at the very bottom of your <\/span><head><\/span> tag, like in this simplified example.<\/span><\/p>\n
\n\n<head><\/span>\n\n<style type=\"text\/css\"><\/span>\n\n\/* Boilerplate Styles *\/<\/span>\n\n\/* Responsive Media Query Styles *\/<\/span>\n\n\/* Progressive Enhancement Styles *\/<\/span>\n\n<\/style><\/span>\n\n<!-- External CSS for Interactive Version --><\/span>\n\n<link rel=\"stylesheet\" type=\"text\/css\" rel=\"noopener\" target=\"_blank\" href=\"<\/span><\/b>\"><\/span>\n\n<\/head><\/span>\n<\/code><\/pre>\n
Mastering CSS specificity<\/h3>\n
As you can tell, there\u2019s a lot of CSS specificity trickery involved. CSS itself stands for \u201c<\/span>Cascading<\/b> Style Sheets\u201d, which refers to the order that your CSS <\/span>cascades<\/span><\/i> in when it comes to specificity. And specificity determines which rule is the one that wins out. Therefore, the placement of the <\/span><link><\/span> tag after all of your embedded CSS is crucial for allowing all the styles in the external CSS file to override the styles that came before it. <\/span><\/p>\n
So why an externally-linked CSS file, instead of embedded or inline CSS? Because if an email client supports this feature, then it most likely supports all the styles contained within the external CSS file. Keeping your interactive CSS separated in this way means that you reduce the likelihood of your interactive styles conflicting with your non-interactive code, so you don\u2019t end up with unintended results.<\/span><\/p>\n
The icing on the cake: Optimize for limited interactive support with progressive enhancements<\/span><\/h3>\n
Once you\u2019ve set up your two main versions\u2014the interactive one and the static fallback\u2014you can go ahead and enhance your static fallback version with some basic interactive elements. Here\u2019s the static version of the email above, made more engaging using hover effects for the logo and the CTA: <\/span><\/p>\n
\"Interactive
Progressively enhanced fallback utilizing hover effects from Offset by Shutterstock. See it in Litmus Builder<\/a>.<\/figcaption><\/figure>\n
You can learn how to create these simple but powerful hover effects <\/span>here<\/span><\/a>.<\/span><\/p>\n
WANT MORE RESOURCES LIKE THIS?<\/h2>\n
Get the best email marketing and design tips, stats, and resources straight to your inbox and stay at the forefront of email innovation.<\/p>\n
Stay in the know \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
For the third year in a row, interactive email experiences were voted one of the hottest email design trends. So why don\u2019t we see more interactive emails in our inboxes? For many brands, limited inbox provider support is the main reason they don\u2019t send more interactive campaigns.<\/p>\n
But you don\u2019t have to fear limited support if you have a fallback in place. There are plenty of methods that help you create engaging, interactive emails where they are supported, while still guaranteeing a functional and beautiful experience in all other inboxes.<\/p>\n","protected":false},"author":3,"featured_media":3451,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[206],"blog_category":[53],"class_list":["post-3450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-dynamic-content","blog_category-tips-resources"],"yoast_head":"\nFallbacks for Interactive Email: How to Combat Limited Support for Interactivity - Litmus<\/title>\n<meta name=\"description\" content=\"For the third year in a row, interactive email experiences were voted one of the hottest email design trends. So why don\u2019t we see more interactive emails in our inboxes? For many brands, limited inbox provider support is the main reason they don\u2019t send more interactive campaigns. But you don\u2019t have to fear limited support if you have a fallback in place. There are plenty of methods that help you create engaging, interactive emails where they are supported, while still guaranteeing a functional and beautiful experience in all other inboxes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fallbacks for Interactive Email: How to Combat Limited Support for Interactivity\" \/>\n<meta property=\"og:description\" content=\"For the third year in a row, interactive email experiences were voted one of the hottest email design trends. So why don\u2019t we see more interactive emails in our inboxes? For many brands, limited inbox provider support is the main reason they don\u2019t send more interactive campaigns. But you don\u2019t have to fear limited support if you have a fallback in place. There are plenty of methods that help you create engaging, interactive emails where they are supported, while still guaranteeing a functional and beautiful experience in all other inboxes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-31T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-14T21:01:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/fallback-strategies-for-interactive-email.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fallbacks for Interactive Email: How to Combat Limited Support for Interactivity - Litmus","description":"For the third year in a row, interactive email experiences were voted one of the hottest email design trends. So why don\u2019t we see more interactive emails in our inboxes? For many brands, limited inbox provider support is the main reason they don\u2019t send more interactive campaigns. But you don\u2019t have to fear limited support if you have a fallback in place. There are plenty of methods that help you create engaging, interactive emails where they are supported, while still guaranteeing a functional and beautiful experience in all other inboxes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity","og_locale":"en_US","og_type":"article","og_title":"Fallbacks for Interactive Email: How to Combat Limited Support for Interactivity","og_description":"For the third year in a row, interactive email experiences were voted one of the hottest email design trends. So why don\u2019t we see more interactive emails in our inboxes? For many brands, limited inbox provider support is the main reason they don\u2019t send more interactive campaigns. But you don\u2019t have to fear limited support if you have a fallback in place. There are plenty of methods that help you create engaging, interactive emails where they are supported, while still guaranteeing a functional and beautiful experience in all other inboxes.","og_url":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2019-01-31T00:00:00+00:00","article_modified_time":"2023-08-14T21:01:13+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/fallback-strategies-for-interactive-email.gif","type":"image\/gif"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity"},"author":{"name":"","@id":""},"headline":"Fallbacks for Interactive Email: How to Combat Limited Support for Interactivity","datePublished":"2019-01-31T00:00:00+00:00","dateModified":"2023-08-14T21:01:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity"},"wordCount":1069,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/fallback-strategies-for-interactive-email.gif","keywords":["Dynamic Content"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity","url":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity","name":"Fallbacks for Interactive Email: How to Combat Limited Support for Interactivity - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/fallback-strategies-for-interactive-email.gif","datePublished":"2019-01-31T00:00:00+00:00","dateModified":"2023-08-14T21:01:13+00:00","description":"For the third year in a row, interactive email experiences were voted one of the hottest email design trends. So why don\u2019t we see more interactive emails in our inboxes? For many brands, limited inbox provider support is the main reason they don\u2019t send more interactive campaigns. But you don\u2019t have to fear limited support if you have a fallback in place. There are plenty of methods that help you create engaging, interactive emails where they are supported, while still guaranteeing a functional and beautiful experience in all other inboxes.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/fallback-strategies-for-interactive-email.gif","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/fallback-strategies-for-interactive-email.gif","width":1380,"height":724},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/fallbacks-for-interactive-email-how-to-combat-limited-support-for-interactivity#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Fallbacks for Interactive Email: How to Combat Limited Support for Interactivity"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3450"}],"version-history":[{"count":1,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3450\/revisions"}],"predecessor-version":[{"id":76110,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3450\/revisions\/76110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/3451"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3450"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3450"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The <\/span>interactive section<\/strong> uses conditional statements to hide content from email clients that don’t support interactivity. <\/span>This includes MSO conditional statements<\/a> that will hide everything in between them from versions of Outlook that don\u2019t support interactivity, as well as inline CSS that visually<\/em> hides content for other non-interactive email clients (that’s the code in green). Then the code <\/span>highlighted in dark red<\/span> pulls in styles that override the code for the interactive section while forcing the <\/span>fallback section<\/strong> to hide instead.<\/span><\/p>\n