{"id":15593,"date":"2013-09-06T14:48:00","date_gmt":"2013-09-06T14:48:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=15593"},"modified":"2023-07-13T13:31:20","modified_gmt":"2023-07-13T17:31:20","slug":"the-how-to-guide-to-responsive-email-design-infographic","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic","title":{"rendered":"The How-To Guide to Responsive Email Design"},"content":{"rendered":"<p>Responsive <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-design\/\">email design<\/a> has been growing steadily in popularity, and it&#8217;s no surprise as to why: <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/mobile-opens-hit-record-high-of-47\">47% of email opens are on a mobile device<\/a>, and some brands see upwards of 70% of their emails opened on mobile. These brands turn to responsive design techniques to create better experiences for their subscribers, and in many cases, increase their click and engagement rates.<\/p>\n<p>The foundation of responsive email design is built upon CSS3 media queries, which can be confusing and complicated to learn. And like everything else in email, they don&#8217;t work quite the same way in our inboxes as they do on the websites we view in browsers.<\/p>\n<p>Enter our how-to guide for responsive email design. See what is possible with responsive email design, how to implement media queries in your design, and support for responsive emails in various mobile email applications. When you&#8217;re ready to move to the next step, check out comprehensive list of <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/our-favorite-responsive-and-mobile-email-resources\">mobile email resources<\/a>, which includes templates, tutorials, responsive case studies, and more.<\/p>\n<p>Click on the graphic for an enlarged view. The entire text of the graphic is also available below.<\/p>\n<h2>Make your emails responsive with Litmus Community Templates<\/h2>\n<div class=\"cta\">\n<table>\n<tbody>\n<tr>\n<td class=\"block-1\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/template-gallery-cta.png\" alt=\"Litmus Community Templates\" width=\"640\" height=\"742\" \/><\/td>\n<td class=\"block-2\">\n<h2>Litmus Community Templates<\/h2>\n<p>Kickstart your next campaign with one of Litmus&#8217; pre-tested templates.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/templates\" target=\"_blank\" rel=\"noopener noreferrer\">Access the templates \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<hr style=\"color: #ccc; background-color: #ccc; height: 1px; margin-bottom: 35px;\" \/>\n<h3>Embed this infographic:<\/h3>\n<div style=\"margin-bottom: 50px;\"><textarea cols=\"50\" rows=\"6\">&lt;a rel=\"noopener\" target=\"_blank\" href=&#8221;https:\/\/litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic\/full-view&#8221; target=&#8221;_blank&#8221;&gt;&lt;img class=&#8221;alignnone&#8221; alt=&#8221;how-to-responsive-email-design-infographic&#8221; src=&#8221;https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/how-to-responsive-email-design-infographic.png&#8221; \/&gt;&lt;\/a&gt;&lt;br \/&gt;Source: &lt;a rel=\"noopener\" target=\"_blank\" href=&#8221;https:\/\/litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic&#8221; &gt;The How to Guide to Responsive Email Design&lt;\/a&gt;<\/textarea><\/div>\n<h3>Stats to Tweet:<\/h3>\n<ul>\n<li>47% of email opens happen on mobile devices [<a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/clicktotweet.com\/fgjAD\" target=\"_blank\" rel=\"noopener noreferrer\">Tweet<\/a>\u00a0this]<\/li>\n<li>80% of people delete an email if it doesn&#8217;t look good on their mobile device [<a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/clicktotweet.com\/fblyg\" target=\"_blank\" rel=\"noopener noreferrer\">Tweet<\/a>\u00a0this]<\/li>\n<li>Studies find people look at their phones an avg of 150 times\/day [<a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/clicktotweet.com\/fId9f\" target=\"_blank\" rel=\"noopener noreferrer\">Tweet<\/a>\u00a0this]<\/li>\n<li>iPhone Gmail app &amp; Android Gmail app do not support responsive email [<a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/clicktotweet.com\/U83y5\" target=\"_blank\" rel=\"noopener noreferrer\">Tweet<\/a>\u00a0this]<\/li>\n<\/ul>\n<hr style=\"color: #ccc; background-color: #ccc; height: 1px; margin-bottom: 35px;\" \/>\n<p><strong>Re\u00b7spon\u00b7sive de\u00b7sign (noun) <\/strong><br \/>\nA collection of techniques, such as media queries, fluid grids, and fluid images, which aim to provide the optimal viewing experience across various platforms.<\/p>\n<h3>Why Responsive Design?<\/h3>\n<ul>\n<li><strong>47%\u00a0of email opens are on mobile devices,<\/strong> yet many emails are only designed for desktop viewing. Text is often difficult to read, details in images are hard to see, and links are impossible to click on mobile.<\/li>\n<li>Studies have found that people look at their phones <strong>an average of 150 times a day<\/strong>. These brief interactions mean that you must focus on getting your point across quickly.<\/li>\n<li><strong>80% of people delete an email<\/strong> if it doesn\u2019t look good on their mobile device.<\/li>\n<\/ul>\n<h2>What is Possible with Responsive Design?<\/h2>\n<p>The possibilities are endless, but some common uses of responsive design techniques include:<\/p>\n<ul>\n<li>Changing hierarchy<\/li>\n<li>Changing navigation<\/li>\n<li>Enlarging fonts<\/li>\n<li>Changing colors<\/li>\n<li>Changing layout<\/li>\n<li>Scaling images<\/li>\n<li>Adding padding<\/li>\n<li>Changing or hiding content<\/li>\n<\/ul>\n<h3>How to implement responsive email design<\/h3>\n<p>Responsive email uses a <strong>media query<\/strong>, also known as <strong>@media<\/strong>\u2014a special set of CSS styles that act like conditional statements or dynamic rules. Carefully planned, they can help make emails more readable on different screen sizes.<\/p>\n<p>Media queries <strong>detect the screen size of a device<\/strong> and then &#8220;turn on&#8221; different sets of rules based on that screen size. These can be very simple to implement or quite complex, depending on what you&#8217;d like to accomplish. They do require more planning and testing than standard emails, and don&#8217;t work in all email clients.<\/p>\n<h3>The Query<\/h3>\n<p>In the context of email, media types define which CSS styles to use based on screen size.\u00a0This media type states \u201cIf the email is viewed \u0003on a screen size of 480px or less, use the following CSS.\u201d<\/p>\n<pre><code>@media screen and (max-width: 480px)<\/code><\/pre>\n<h3>The Styles<\/h3>\n<p>Combined with the media query, the style rules act like conditional \u2018if-then\u2019 statements, triggered when the specified screen size is detected. There can be many styles, or just a few.<\/p>\n<p><strong> Change Navigation<\/strong><br \/>\nThis style moves navigation items to their own row that spans the entire width (100%) of the table<\/p>\n<pre><code>table[class=\"nav\"]{ width: 100% !important; padding: 10px 0 20px 20px !important; }<\/code><\/pre>\n<p><strong>Enlarge Fonts<br \/>\n<\/strong>Here, font sizes inside table cells named \u2018body-header\u2019 are increased to 18px<\/p>\n<pre><code>td[class=\"body-header\"]{ font-size: 18px !important; }\u00a0<\/code><\/pre>\n<p><strong>Change Colors<\/strong><br \/>\nAny fonts contained in a table cell named \u2018body-copy\u2019 will display as the color #dddddd<\/p>\n<pre><code>td[class=\u201dbody-copy\u201d]{ color: #dddddd; }\u00a0<\/code><\/pre>\n<p><strong>Add Padding<\/strong><br \/>\nA simple style adds 15px of padding to table cells with a class of \u2018body\u2019<\/p>\n<pre><code>td[class=\"body\"]{ padding: 15px !important; }\u00a0<\/code><\/pre>\n<p><strong>Change or Hide Content<\/strong><br \/>\nThe display property can be used to hide table cells<\/p>\n<pre><code>td[class=\"mobile-hide\"]{ display: none; }<\/code><\/pre>\n<h3>THE HTML<\/h3>\n<p>Each style in the CSS rule block specifies the type of container or element (for instance, the entire table or just a table cell) the style should effect. These rules must be assigned and referenced in the HTML in order to be applied.<\/p>\n<p><strong>CSS:<\/strong><\/p>\n<pre><code>td[class=\"body-header\"]{ font-size: 18px !important; }<\/code><\/pre>\n<p><strong>HTML:<\/strong><\/p>\n<pre><code>&lt;td align=\u201cleft\u201d class=\u201cbody-header\u201d&gt;<\/code><\/pre>\n<p>For example, the element (td) and the class (\u201dbody-header\u201d) used in the CSS must match those used in the HTML.<\/p>\n<h2>Support for responsive email<\/h2>\n<p>Don\u2019t forget to test your responsive design in a variety of email clients and mobile devices to be sure it displays the way you planned\u2014differences in devices, manufacturers, applications and screen sizes can all impact how your email appears. With the help of responsive design, you can simplify your message and make it easier to read and interact with on the small screens of mobile devices. Responsive email design offers benefits such as increased usability, higher read rates, along with better performance and click-through rates.<\/p>\n<p>Responsive emails are supported by:<\/p>\n<ul>\n<li>iOS Mail app<\/li>\n<li>Android 4.x Email (OEM) app<\/li>\n<li>Windows Phone 7.5<\/li>\n<li>BlackBerry OS7<\/li>\n<li>BlackBerry Z10<\/li>\n<\/ul>\n<p>Responsive emails are <strong>not<\/strong> supported by:<\/p>\n<ul>\n<li>iPhone Gmail app<\/li>\n<li>iPhone Mailbox app<\/li>\n<li>iPhone Yahoo! Mail app<\/li>\n<li>Android Gmail app<\/li>\n<li>Android Yahoo! Mail app<\/li>\n<li>BlackBerry OS5<\/li>\n<li>Windows Mobile 6.1<\/li>\n<li>Windows Phone 7<\/li>\n<li>Windows Phone 8<\/li>\n<\/ul>\n<p>For a comprehensive list, visit the <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/stylecampaign.com\/blog\/2012\/10\/responsive-email-support\/\" target=\"_blank\" rel=\"noopener noreferrer\">StyleCampaign blog<\/a>.<\/p>\n<h3>Devices vs. apps: What determines support?<\/h3>\n<p>It\u2019s a common misconception that media query and responsive email support is based on the <strong>device<\/strong> or operating system being used. In fact, it\u2019s the <strong>application<\/strong> used to view the email that determines support. In other words, it\u2019s possible to view the same email in two apps on the same phone, each with different support for responsive design.<\/p>\n<h3>Sources<\/h3>\n<ul>\n<li>Article: &#8220;Smartphone users check their phones an average of 150 times a day&#8221;<\/li>\n<li>BlueHornet Study: &#8220;Consumer View of Email Marketing&#8221;<\/li>\n<li>StyleCampaign Blog: <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/stylecampaign.com\/blog\/2012\/10\/responsive-email-support\/\" target=\"_blank\" rel=\"noopener noreferrer\">Responsive email support\u00a0<\/a><\/li>\n<\/ul>\n<hr style=\"color: #ccc; background-color: #ccc; height: 1px; margin-bottom: 35px;\" \/>\n<h2>Try our free Litmus Community Templates<\/h2>\n<a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic\/full-view\"><img decoding=\"async\" class=\"shaded alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/how-to-responsive-email-design-infographic.png\" alt=\"how to responsive email design infographic\" width=\"975\" height=\"5571\" \/><\/a>\n<h2>Responsive design is easy with Litmus Community Templates<\/h2>\n<p>The Litmus Community Templates are a collection of free, elegant, and pre-tested templates for you to use for anything from product launches to welcome emails.<\/p>\n<p><a class=\"orange btn medium\" style=\"color: #fff; font-weight: bold; font-size: 18px;\" rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/templates\" target=\"_blank\" rel=\"noopener noreferrer\">Get the templates \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive email design has been growing steadily in popularity, and &hellip;<\/p>\n","protected":false},"author":3,"featured_media":15594,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"blog_category":[117],"class_list":["post-15593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","blog_category-infographs"],"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>The How-To Guide to Responsive Email Design - Litmus<\/title>\n<meta name=\"description\" content=\"Responsive email design has been growing steadily in popularity, and it&#039;s no surprise as to why: 47% of email opens are on a mobile device, and some\" \/>\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\/the-how-to-guide-to-responsive-email-design-infographic\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The How-To Guide to Responsive Email Design\" \/>\n<meta property=\"og:description\" content=\"Responsive email design has been growing steadily in popularity, and it&#039;s no surprise as to why: 47% of email opens are on a mobile device, and some\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic\" \/>\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=\"2013-09-06T14:48:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-13T17:31:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/responsive-email-header-1000x525-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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":"The How-To Guide to Responsive Email Design - Litmus","description":"Responsive email design has been growing steadily in popularity, and it's no surprise as to why: 47% of email opens are on a mobile device, and some","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\/the-how-to-guide-to-responsive-email-design-infographic","og_locale":"en_US","og_type":"article","og_title":"The How-To Guide to Responsive Email Design","og_description":"Responsive email design has been growing steadily in popularity, and it's no surprise as to why: 47% of email opens are on a mobile device, and some","og_url":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2013-09-06T14:48:00+00:00","article_modified_time":"2023-07-13T17:31:20+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/responsive-email-header-1000x525-1.png","type":"image\/png"}],"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\/the-how-to-guide-to-responsive-email-design-infographic#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic"},"author":{"name":"","@id":""},"headline":"The How-To Guide to Responsive Email Design","datePublished":"2013-09-06T14:48:00+00:00","dateModified":"2023-07-13T17:31:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic"},"wordCount":1088,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/responsive-email-header-1000x525-1.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic","url":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic","name":"The How-To Guide to Responsive Email Design - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/responsive-email-header-1000x525-1.png","datePublished":"2013-09-06T14:48:00+00:00","dateModified":"2023-07-13T17:31:20+00:00","description":"Responsive email design has been growing steadily in popularity, and it's no surprise as to why: 47% of email opens are on a mobile device, and some","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/responsive-email-header-1000x525-1.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/responsive-email-header-1000x525-1.png","width":1000,"height":525},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The How-To Guide to Responsive 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\/15593","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=15593"}],"version-history":[{"count":3,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15593\/revisions"}],"predecessor-version":[{"id":73687,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15593\/revisions\/73687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/15594"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=15593"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=15593"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=15593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}