{"id":15635,"date":"2014-04-10T14:59:00","date_gmt":"2014-04-10T14:59:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=15635"},"modified":"2023-07-13T13:34:33","modified_gmt":"2023-07-13T17:34:33","slug":"defining-and-understanding-mobile-email-approaches","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches","title":{"rendered":"Scalable, Fluid or Responsive: Understanding Mobile Email Approaches"},"content":{"rendered":"<p>Mobile is a wildly popular topic in <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-design\/\">email design<\/a>, which makes sense\u2014emails opened on mobile devices have grown more than 400% since 2011, and mobile email opens <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/email-client-market-share-where-people-opened-in-2013\">hit the 50% mark in 2013<\/a>. We\u2019ve talked before about how important mobile has become to email marketers and the need to optimize campaigns for mobile audiences. But it\u2019s not always clear which mobile email approaches (scalable, fluid, or responsive) work best for mobile audiences.<\/p>\n<div class=\"update\"><strong>Responsive vs. hybrid email design: Why use them?<\/strong><\/p>\n<p>Since the writing of this post, there has been a huge movement towards hybrid design. We examine the differences between responsive and hybrid design, and cover the pros and cons of each.<\/p>\n<p><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/understanding-responsive-and-hybrid-email-design\">Read more here \u2192<\/a><\/p>\n<\/div>\n<p>To make matters worse, many marketers are confused about what strategies actually exist. Eliminating the possibility of not doing anything at all, mobile email design can roughly be broken down into three categories:<\/p>\n<ul>\n<li>Scalable Design<\/li>\n<li>Fluid Design<\/li>\n<li>Responsive Design<\/li>\n<\/ul>\n<p>For marketers to choose the approach that best suits their needs, it\u2019s important to understand the differences between these three approaches.<\/p>\n<h2>Scalable Design<\/h2>\n<p>Let\u2019s begin with what many email marketers are currently using: scalable design. Scalable design can be defined as any design that works well across both desktop and mobile without using code to adjust table or image sizes, or display or hide content between the two platforms. While we&#8217;re using the term &#8220;scalable&#8221; to describe this approach, you may have also heard these concepts referred to as mobile aware, mobile friendly, agnostic or mobile first.<\/p>\n<figure id=\"post-7591 media-7591\" class=\"aligncenter nudged\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/definingmobile-scalable.jpg\" alt=\"definingmobile-scalable\" \/><\/figure>\n<p>Scalable designs are typically the easiest to implement. Since scalable emails don\u2019t adjust the widths of tables or images between devices, and don\u2019t use CSS media queries (we\u2019ll get to those later) to swap content or change the size of text, it\u2019s important to use a number of techniques to keep the content of scalable emails enjoyable not only on desktop, but when viewed on mobile devices as well.<\/p>\n<ul>\n<li>A simple (usually single-column) layout that scales down nicely.<\/li>\n<li>Large text that is readable on screens of all sizes.<\/li>\n<li>Large, touch-friendly calls-to-action.<\/li>\n<\/ul>\n<p>For more information on scalable design, <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/responsive-scalable-email-design-whats-the-difference\">Lauren\u2019s post<\/a> on the differences between scalable and responsive design is a great place to start. Our <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/anatomy-mobile-email\">Anatomy of the Perfect Mobile Email<\/a> infographic is another excellent resource.<\/p>\n<p>One thing to keep in mind when designing scalable emails (or any email) is the Android \u201c<a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/stylecampaign.com\/blog\/2012\/08\/android-grid-of-grim\/\">Grid of Grim<\/a>.\u201d In some Android email apps, messages are not scaled at all, resulting in the need for subscribers to scroll both vertically <em>and<\/em> horizontally. Ideally, you should place the most vital information in your campaign on the left side of your email\u2014keeping things like logos, important copy, and CTAs visible without having to scroll horizontally.<\/p>\n<p>When optimized using the techniques above, scalable emails are a great way for marketers to engage with their mobile audiences without the need to drastically change process or introduce new workflows. They typically require no extra coding or knowledge beyond what most email designers already know\u2014it&#8217;s just a matter of making mobile users a priority and altering the overall email layout to accommodate their needs.<\/p>\n<p>Check out these great examples of mobile-optimized, scalable emails:<\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/vo00fubxe43n\">Evernote<\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/ls3x0mi0kvxl\">Brit + Co<\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/ghn3aboznxvu\">Sprout Social<\/a><\/li>\n<\/ul>\n<p>While scalable emails are good for teams that need a quick solution, more advanced solutions allow for better control over campaigns on different devices.<\/p>\n<h2>Fluid Design<\/h2>\n<p>In between scalable and responsive is what we term \u201cfluid\u201d design. Fluid emails use percentage-based sizing to make the width of tables and images adapt to the screen size on which they are viewed, similar to what is known as &#8220;liquid&#8221; layouts on the web. Fluid emails are similar to scalable ones, in that they don\u2019t purposefully alter the layout or content of an email, but they have the added benefit of having content \u201cflow\u201d to fill space on the screen. For this reason, fluid designs typically work best for text-heavy layouts since there&#8217;s less control over how copy and images relate to each other.<\/p>\n<figure id=\"post-7754 media-7754\" class=\"aligncenter nudged\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/definingmobile-fluid1.jpg\" alt=\"definingmobile-fluid\" \/><\/figure>\n<p>Implementing a fluid layout is relatively simple. Instead of using pixels for sizing tables, you use percentages.<\/p>\n<pre><code>&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"&gt;\n    ...Content...\n&lt;\/table&gt;<\/code><\/pre>\n<p>However, Campaign Monitor makes a good point that you will need to constrain the width of your emails on larger screens. If left completely fluid, emails on these screens will be too wide and the copy will be hard to read.<\/p>\n<figure id=\"post-7626 media-7626\" class=\"aligncenter nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/fluid-wide.png\" alt=\"fluid-wide\" \/><\/figure>\n<p style=\"font-size: 14px;margin: 15px 0 35px 0;text-align: center\">Line lengths can become unwieldy in unconstrained fluid layouts<\/p>\n<p>While websites can use the CSS max-width property to constrain the layout to a specific size, this technique isn\u2019t widely supported in email clients. However, we can use alternative methods for limiting the width of a layout. The best way to achieve this is by wrapping the content of your email in a container table with a fixed width.<\/p>\n<pre><code>&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"500\" class=\"wrapper\"&gt;\n    &lt;tr&gt;\n        &lt;td&gt;\n            &lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\"&gt; \n                ...Content...\n            &lt;\/table&gt;\n        &lt;\/td&gt;\n    &lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n<p>Then, you can make that fixed width fluid by targeting it in a media query:<\/p>\n<pre><code>@media screen and (max-width: 525px) {\n    table[class=\"wrapper\"]{\n        width:100% !important;\n    }\n}<\/code><\/pre>\n<p>Now, your tables and images will flow beautifully on most mobile devices, while still being readable on larger screens, just like some of these great emails:<\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/t9p6oocz9qzj\">Treehouse<\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/d2m9h222dnob\">Basecamp<\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/x7g05ihxdze6\">United Pixel Workers<\/a><\/li>\n<\/ul>\n<p>It should be noted that fluid email designs are becoming less common these days. Fluid tables and images are almost always coupled with responsive design techniques to allow for the most control over email designs. Don&#8217;t let that discourage you from using fluid techniques, though! It&#8217;s still an excellent way to optimize for mobile if you don&#8217;t have the resources to devote to a completely responsive template.<\/p>\n<h2>Responsive Email<\/h2>\n<p>Responsive email takes everything from scalable and fluid emails and builds on it by adding more control via CSS media queries. While media queries are also used to help contain fluid layouts, it&#8217;s a simple implementation of media queries\u2014nothing too advanced was happening. Responsive email, on the other hand, uses media queries to change the layout of emails, adjust the size of text, images, and buttons, and, in some cases, hide or even swap content between desktop and mobile devices.<\/p>\n<figure id=\"post-7594 media-7594\" class=\"aligncenter nudged\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/definingmobile-responsive.jpg\" alt=\"definingmobile-responsive\" \/><\/figure>\n<p>CSS media queries allow you to target things like device and screen size to set up conditional styles for those sizes.<\/p>\n<pre><code>@media screen and (max-width: 525px) {\n    img[class=\"hide\"]{\n        display:none !important;\n    }\n}<\/code><\/pre>\n<p>Using media queries, you can perform some impressive email acrobatics. Content can be shifted around, hidden, and even swapped out, providing email designers with amazing control over their campaigns on mobile devices.<\/p>\n<p>For example, you can take a complex, multi-column layout on desktop and streamline it into a single-column, easy-to-scan, easy-to-scroll design on mobile\u2014complete with larger text and more touch-friendly buttons.<\/p>\n<figure id=\"post-7636 media-7636\" class=\"aligncenter nudged\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/defining-mobile-responsive-switch.jpg\" alt=\"defining-mobile-responsive-switch\" \/><\/figure>\n<p>Responsive design can be an amazing tool, but some designers have found it hard to wrap their heads around, which is why we made our <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/the-how-to-guide-to-responsive-email-design-infographic\">How-to Guide to Responsive Email Design<\/a>. Anna Yeaman over at STYLECampaign put together an <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/stylecampaign.com\/blog\/2013\/03\/responsive-email-design-red\/\">amazing video<\/a> that goes into what is possible with responsive email design. Our friends at Campaign Monitor also have a <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.campaignmonitor.com\/guides\/mobile\/\">wonderful guide<\/a> on the subject. Finally, if you don&#8217;t have the resources to build your own responsive templates, our friends at <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/stamplia.com\/\">Stamplia<\/a> recently built 7 Litmus-exclusive <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/go-responsive-with-these-7-free-email-templates-from-stamplia\">responsive email templates<\/a>.<\/p>\n<p>While responsive email design is the most powerful tool for dealing with mobile, designers should be aware that media queries and responsive techniques <em>don\u2019t work everywhere<\/em>. Depending on your audience, though, you can start using responsive techniques today. We suggest starting small by using simple techniques (enlarging fonts on small screens for example) and then gradually working your way to more advanced concepts as you grow more comfortable with media queries. Using mobile-aware techniques as a foundation for your responsive emails allows you to design an email that falls back gracefully in clients that don\u2019t support media queries.<\/p>\n<p>Here are some of our favorite responsive emails:<\/p>\n<ul>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/kxwyp9n33vii\">Quirky<\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/cl40zjremh5l\">Campaign Monitor<\/a><\/li>\n<li><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/zkip3cybvxvq\">The Learning People<\/a><\/li>\n<\/ul>\n<h3>Which of the mobile email approaches is best?<\/h3>\n<p>Once you understand the differences between scalable, fluid, and responsive email design, you can determine which strategy works best for your team. If you lack the know-how or resources to implement a responsive campaign, both scalable and fluid strategies are a great way to keep your emails friendly for mobile subscribers. However, if you have the time to go fully responsive, the added control can be exactly the thing needed to set your campaigns apart from the competition.<\/p>\n<div style=\"width: 100%;float: left;background: #f6f6f6;border: 1px solid #ddd;border-radius: 10px;padding: 15px;margin-bottom: 10px\">\n<table style=\"border: 0;margin: 0\" width=\"100%\">\n<tbody>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0;font-weight: bold;font-size: 24px;color: #4c5156\">Scalable Design<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0;font-weight: bold\">Perfect for:<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">Testing the mobile waters<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">Reliable rendering across clients and devices<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">Teams with limited resources<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0;font-weight: bold;font-size: 24px;color: #4c5156\">Fluid Design<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0;font-weight: bold\">Perfect for:<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">Simple layouts<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">Emails with mostly text that can flow<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">Teams with limited resources<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0;font-weight: bold;font-size: 24px;color: #4c5156\">Responsive Design<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0;font-weight: bold\">Perfect for:<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">Large mobile audiences<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">The most control over layout<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"border: 0\">\n<p style=\"margin: 0\">Teams with knowledge of media queries<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div class=\"cta\">\n<table>\n<tbody>\n<tr>\n<td class=\"block-1\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/template-gallery-cta.png\" alt=\"\" \/><\/td>\n<td class=\"block-2\">\n<h2>Try Litmus Community&#8217; Responsive Templates<\/h2>\n<p>Want mobile responsive designs right out of the box? Try Litmus Community Templates, a collection of free, pre-tested designs for you to use in your next campaign.<\/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","protected":false},"excerpt":{"rendered":"<p>Mobile is a wildly popular topic in email design, which &hellip;<\/p>\n","protected":false},"author":3,"featured_media":15636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"blog_category":[53],"class_list":["post-15635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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>Scalable, Fluid or Responsive: Understanding Mobile Email Approaches - Litmus<\/title>\n<meta name=\"description\" content=\"Mobile is a wildly popular topic in email design, which makes sense\u2014emails opened on mobile devices have grown more than 400% since 2011, and mobile email\" \/>\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\/defining-and-understanding-mobile-email-approaches\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scalable, Fluid or Responsive: Understanding Mobile Email Approaches\" \/>\n<meta property=\"og:description\" content=\"Mobile is a wildly popular topic in email design, which makes sense\u2014emails opened on mobile devices have grown more than 400% since 2011, and mobile email\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches\" \/>\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=\"2014-04-10T14:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-13T17:34:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-mobile-approaches-1000x525-1.jpg\" \/>\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\/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":"Scalable, Fluid or Responsive: Understanding Mobile Email Approaches - Litmus","description":"Mobile is a wildly popular topic in email design, which makes sense\u2014emails opened on mobile devices have grown more than 400% since 2011, and mobile email","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\/defining-and-understanding-mobile-email-approaches","og_locale":"en_US","og_type":"article","og_title":"Scalable, Fluid or Responsive: Understanding Mobile Email Approaches","og_description":"Mobile is a wildly popular topic in email design, which makes sense\u2014emails opened on mobile devices have grown more than 400% since 2011, and mobile email","og_url":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2014-04-10T14:59:00+00:00","article_modified_time":"2023-07-13T17:34:33+00:00","og_image":[{"width":1000,"height":525,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-mobile-approaches-1000x525-1.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\/defining-and-understanding-mobile-email-approaches#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches"},"author":{"name":"","@id":""},"headline":"Scalable, Fluid or Responsive: Understanding Mobile Email Approaches","datePublished":"2014-04-10T14:59:00+00:00","dateModified":"2023-07-13T17:34:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches"},"wordCount":1465,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-mobile-approaches-1000x525-1.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches","url":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches","name":"Scalable, Fluid or Responsive: Understanding Mobile Email Approaches - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-mobile-approaches-1000x525-1.jpg","datePublished":"2014-04-10T14:59:00+00:00","dateModified":"2023-07-13T17:34:33+00:00","description":"Mobile is a wildly popular topic in email design, which makes sense\u2014emails opened on mobile devices have grown more than 400% since 2011, and mobile email","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-mobile-approaches-1000x525-1.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-mobile-approaches-1000x525-1.jpg","width":1000,"height":525},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/defining-and-understanding-mobile-email-approaches#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Scalable, Fluid or Responsive: Understanding Mobile Email Approaches"}]},{"@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\/15635","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=15635"}],"version-history":[{"count":2,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15635\/revisions"}],"predecessor-version":[{"id":73692,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15635\/revisions\/73692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/15636"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=15635"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=15635"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=15635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}