{"id":6320,"date":"2015-04-24T00:00:00","date_gmt":"2015-04-24T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design\/"},"modified":"2025-12-22T11:19:20","modified_gmt":"2025-12-22T16:19:20","slug":"is-this-the-future-of-email-design","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design","title":{"rendered":"This Is The Future Of Email Design"},"content":{"rendered":"<p>A lot has been said about email design being stuck in the past. Designers tackling their first projects bemoan the use of tables and inline styles. Marketers plotting out their first campaigns refuse to think beyond the batch-and-blast mentality.<\/p>\n<p>But a few intrepid senders refuse to let the (sometimes) outdated technologies and mentalities surrounding email design hold them back. They are pushing the boundaries of email design, using techniques commonly found in advanced web design to surprise, delight, and connect with their subscribers.<\/p>\n<p>Let\u2019s take a look at the challenges associated with experimental email design and round up some of our favorite futuristic email campaigns.<\/p>\n<div class=\"cta\">\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-blue rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Power up your email strategy<\/p>\n\t\t\t\t<p>Gain expert insights and industry benchmarks from the latest State of Email Report. Elevate your email game.\n<\/p>\n\t\t\t\t<button class=\"button-blue download\"><a href=\"https:\/\/www.litmus.com\/state-of-email-reports\" class=\"text-white text-decoration-none\">Access the insights<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/09\/download-blog-cta-09232024.svg\" width=\"221\" height=\"175\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n<\/div>\n<h2>Email design doesn\u2019t have to be limiting<\/h2>\n<p>When most people think of email marketing, they think of stodgy, boring newsletters sent out by companies looking to sell something. And, if you\u2019re tasked with creating an email campaign, you\u2019re likely looking at a pile of HTML tables and inline CSS and counting the minutes until you\u2019re done hacking together an email that works OK everywhere.<\/p>\n<p>While it\u2019s true that the foundations of email design are a bit old, there\u2019s really no limit to what you can do with them, given a little creativity, planning, and <a rel=\"noopener\" href=\"https:\/\/litmus.com\/email-testing\">lots of testing<\/a>. Yes, email designers have to use table-based designs (thanks, Outlook!), inline CSS, and swim through a sea of hacks but, as the examples below show, you can still pull off some amazing things in the inbox.<\/p>\n<p>To prove the point, here are some of our favorite examples of emails that are breaking the rules and pushing the boundaries of email design.<\/p>\n<h2>A Carousel in an email?<\/h2>\n<p>A while back, UK retailer <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.diy.com\/\">B&amp;Q<\/a> sent an email that set the industry ablaze.<\/p>\n<figure id=\"post-9709 media-9709\" class=\"aligncenter\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/bqemail.gif\" alt=\"b&amp;qemail\" \/><\/figure>\n<p>In this campaign, users can hover over or tap on buttons and watch as different content sections slide smoothly in and out of the email. Commonly termed a carousel, this technique has been widely used in the web world, but is rare for email campaigns. Some may complain that carousels are ineffective and merely for show, but the B&amp;Q campaign is a great example of how to use cutting edge techniques to surprise email subscribers.<\/p>\n<p>The email uses a number of CSS3 properties, along with some clever targeting, to perform its magic. By using CSS transitions, animations, z-index, and the overflow property, the designers have crafted a clever email that just begs to be tapped.<\/p>\n<p>What\u2019s even more impressive is that everything falls back beautifully for email clients that don\u2019t support these more advanced techniques.<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script type=\"text\/javascript\" src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\"><\/script><\/figure>\n<h2>Crazy colors and Star Wars<\/h2>\n<p>UK email agency <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/actionrocket.co\/\">Action Rocket<\/a> has been leading the charge in email design for a while. With their cleverly titled weekly digest of email news, <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/actionrocket.co\/\">Email Weekly<\/a>, they test out some creative techniques that may eventually see their way into client campaigns.<\/p>\n<p>One of our favorite examples is their email that asked the question, \u201cWhat colour is this email?\u201d.<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" type=\"text\/javascript\"><\/script><\/figure>\n<p>Using CSS keyframe animations, they animate the background colors of the heading section, which creates a mesmerizing, hallucinatory effect. It\u2019s subtle at first, but once a subscriber catches on to the animation, they can\u2019t turn away.<\/p>\n<p>Another great example from Action Rocket is their recent Star Wars-inspired digest that made use of the experimental -webkit-perspective property, along with CSS transforms, to recreate the iconic opening crawl of everyone\u2019s favorite sci-fi movie.<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" type=\"text\/javascript\"><\/script><\/figure>\n<h2>Infographics in an email?<\/h2>\n<p>While email agency <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.displayblock.com\/\">display block<\/a> consistently sends great emails, it\u2019s their recent infographic email that really caught our attention.<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" type=\"text\/javascript\"><\/script><\/figure>\n<p>Similar to the background colors in the Email Weekly example, display block uses CSS keyframe animations to add some life to an already well-designed campaign. What\u2019s really great is that the email is beautifully responsive, stacking each section nicely on mobile devices. The responsive design and animated icons all serve to enhance some great data about mobile email usage.<\/p>\n<p>We haven\u2019t seen many infographics like this in an email, which makes it all the more impressive and ground-breaking. We\u2019d love to see more examples of infographics, which is why we\u2019re holding a <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/1272-community-contest-creative-data-design-in-email\">Community Contest<\/a> devoted to them!<\/p>\n<h2>HTML5 Video and Interactive Tours<\/h2>\n<p>We like to practice what we preach, which is why we make our emails nice and responsive, despite having a predominantly desktop audience. That\u2019s also the reasoning behind some of our own cutting-edge email campaigns, like our HTML5 video background from last year\u2019s Email Design Conference (which we\u2019re hosting again this summer\u2026).<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" type=\"text\/javascript\"><\/script><\/figure>\n<p>Our designer, Kevin, used some advanced email client targeting to progressively enhance an otherwise simple design. If you\u2019re curious how exactly he pulled it off, he wrote a <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/how-to-code-html5-video-background-in-email\">blog post<\/a> detailing the process.<\/p>\n<p>And, to celebrate the launch of our email code editor, Builder, he took things even further by building an interactive tour right in an email.<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" type=\"text\/javascript\"><\/script><\/figure>\n<p>Making use of CSS animations, the checkbox hack, and liberal use of the CSS content property, he shows off some of the features of Builder right in the inbox\u2014giving subscribers a taste of the product without even having to log in. There\u2019s a lot of code powering it, but you can check it out right in Builder (kind of like email Inception).<\/p>\n<h2>Tastier Email Menus<\/h2>\n<p>Like the carousel email, designer <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/999-hamburger-in-email\">Jerry Martinez<\/a> took inspiration from the web to implement a hamburger menu for mobile subscribers.<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" type=\"text\/javascript\"><\/script><\/figure>\n<p>Navigation elements are always a trick for email designers\u2014especially on mobile. Since they tend to take up significant amounts of space when stacked, they can distract from the main call-to-action in a campaign. To solve the problem, Jerry crafted an elegant hamburger menu that allows mobile users to selectively display navigation items.<\/p>\n<p>We were so impressed with Jerry\u2019s solution, that we invited people to show off other creative navigation patterns in one of our Community Contests\u2026<\/p>\n<h2>Community Contests: The Truly Cutting Edge<\/h2>\n<p>Our Community Contests are where we really challenge people to come up with some crazy ideas. Each month, we give them a theme and let them stretch their skills. Our <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/980-community-contest-creative-use-of-alt-text\">first contest<\/a>, looking at creative uses of ALT text, yielded some amazing results, like Space Invaders in an email:<\/p>\n<figure id=\"post-9459 media-9459\" class=\"aligncenter\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/space-1.png\" alt=\"Space Invaders\" \/><figcaption>With images on.<\/figcaption><\/figure>\n<figure id=\"post-9460 media-9460\" class=\"aligncenter\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/space-2.png\" alt=\"Space Invaders\" \/><figcaption>With images off.<\/figcaption><\/figure>\n<p>For our <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/1086-community-contest-creative-navigation-in-email\">second contest<\/a>, we had people come up with interesting navigation patterns. We were blown away by some of the results, like Remi Parmentier\u2019s gooey navigation concept:<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" type=\"text\/javascript\"><\/script><\/figure>\n<h2>Trying something new?<\/h2>\n<p>While it\u2019s exciting to try out new things in email, a lot can go wrong if you don\u2019t test your campaigns thoroughly. Email Previews make it easy to test any technique in desktop, webmail, and mobile email clients.<\/p>\n<p><a class=\"btn orange medium\" style=\"color: #fff; font-weight: bold; font-size: 16px;\" rel=\"noopener\" href=\"https:\/\/litmus.com\/pricing\">Try Litmus free \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Despite outcries against old markup from decades past, the email world is changing fast. Long gone are the days where email designers were truly limited by the constraints of technology. See what the future has in store for the email world.<\/p>\n","protected":false},"author":3,"featured_media":6321,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478],"blog_category":[78,53],"class_list":["post-6320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","blog_category-inspiration","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>This Is The Future Of Email Design - Litmus<\/title>\n<meta name=\"description\" content=\"Long gone are the days when email designers are constrained by technology. See what the future has in store for the email world.\" \/>\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\/is-this-the-future-of-email-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"This Is The Future Of Email Design\" \/>\n<meta property=\"og:description\" content=\"Long gone are the days when email designers are constrained by technology. See what the future has in store for the email world.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design\" \/>\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=\"2015-04-24T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-22T16:19:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-future.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"690\" \/>\n\t<meta property=\"og:image:height\" content=\"362\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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":"This Is The Future Of Email Design - Litmus","description":"Long gone are the days when email designers are constrained by technology. See what the future has in store for the email world.","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\/is-this-the-future-of-email-design","og_locale":"en_US","og_type":"article","og_title":"This Is The Future Of Email Design","og_description":"Long gone are the days when email designers are constrained by technology. See what the future has in store for the email world.","og_url":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2015-04-24T00:00:00+00:00","article_modified_time":"2025-12-22T16:19:20+00:00","og_image":[{"width":690,"height":362,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-future.jpg","type":"image\/jpeg"}],"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\/is-this-the-future-of-email-design#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design"},"author":{"name":"","@id":""},"headline":"This Is The Future Of Email Design","datePublished":"2015-04-24T00:00:00+00:00","dateModified":"2025-12-22T16:19:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design"},"wordCount":1123,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-future.jpg","keywords":["Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design","url":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design","name":"This Is The Future Of Email Design - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-future.jpg","datePublished":"2015-04-24T00:00:00+00:00","dateModified":"2025-12-22T16:19:20+00:00","description":"Long gone are the days when email designers are constrained by technology. See what the future has in store for the email world.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-future.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/featured-image-future.jpg","width":690,"height":362},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/is-this-the-future-of-email-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"This Is The Future Of Email Design"}]},{"@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\/6320","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=6320"}],"version-history":[{"count":2,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/6320\/revisions"}],"predecessor-version":[{"id":121747,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/6320\/revisions\/121747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/6321"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=6320"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=6320"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=6320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}