{"id":1959,"date":"2016-02-18T17:33:19","date_gmt":"2016-02-19T01:33:19","guid":{"rendered":"https:\/\/hellbach.us\/blog\/?p=1959"},"modified":"2022-11-24T14:38:37","modified_gmt":"2022-11-24T22:38:37","slug":"the-fab-four-technique-to-create-responsive-emails-without-media-queries","status":"publish","type":"post","link":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/","title":{"rendered":"The Fab Four technique to create Responsive Emails without Media Queries"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:671,&quot;href&quot;:&quot;https:\\\/\\\/julie.io\\\/writing\\\/gmail-first-strategy-for-responsive-emails&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250819143000\\\/https:\\\/\\\/julie.io\\\/writing\\\/gmail-first-strategy-for-responsive-emails\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:37:10&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-11-28 01:34:39&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-10 19:45:44&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-23 13:29:45&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-23 13:29:45&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:672,&quot;href&quot;:&quot;http:\\\/\\\/webdesign.tutsplus.com\\\/tutorials\\\/creating-a-future-proof-responsive-email-without-media-queries--cms-23919&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20230530032416\\\/https:\\\/\\\/webdesign.tutsplus.com\\\/tutorials\\\/creating-a-future-proof-responsive-email-without-media-queries--cms-23919&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:37:13&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2025-11-28 01:34:38&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-10 19:45:42&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-20 23:50:36&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-24 11:27:35&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-24 11:27:35&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:673,&quot;href&quot;:&quot;https:\\\/\\\/medium.com\\\/@hteumeuleu\\\/using-flexbox-in-an-email-4b1aa7a69886#.83apq23wx&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/medium.com\\\/emails-hteumeuleu\\\/using-flexbox-in-an-email-4b1aa7a69886&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:674,&quot;href&quot;:&quot;http:\\\/\\\/goetter.tumblr.com\\\/post\\\/64119638003\\\/quiz-parce-que-la-taille-%C3%A7a-compte&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20190523122532\\\/https:\\\/\\\/goetter.tumblr.com\\\/post\\\/64119638003\\\/quiz-parce-que-la-taille-%C3%A7a-compte&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:37:58&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:37:58&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:675,&quot;href&quot;:&quot;https:\\\/\\\/dribbble.com\\\/shots\\\/2012203-Paul-George&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250819143114\\\/https:\\\/\\\/dribbble.com\\\/shots\\\/2012203-Paul-George&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:37:59&quot;,&quot;http_code&quot;:202}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:37:59&quot;,&quot;http_code&quot;:202},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:676,&quot;href&quot;:&quot;http:\\\/\\\/caniuse.com\\\/#search=calc%28%29&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20251118122928\\\/https:\\\/\\\/caniuse.com\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:38:00&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:38:00&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:677,&quot;href&quot;:&quot;https:\\\/\\\/medium.freecodecamp.com\\\/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.8hqfl9u8p&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/www.freecodecamp.org\\\/news\\\/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>I think I found a new way to create responsive emails, without media queries. The solution involves the CSS <em>calc()<\/em> function and the three <em>width<\/em>, <em>min-width<\/em>and <em>max-width<\/em> properties.<\/p>\n<p>Or as I like to call them all together: the Fab Four (in CSS).<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png\" alt=\"\" \/><figcaption>calc() &amp; width &amp; min-width &amp; max-width, aka The Fab Four (in CSS).<\/figcaption><\/figure>\n<h2>The problem<\/h2>\n<p>Making responsive emails is hard, especially since email clients on mobile (like Gmail, Yahoo or Outlook.com) don\u2019t support media queries. An <a href=\"https:\/\/web.archive.org\/web\/20190714181845\/http:\/\/labs.actionrocket.co\/the-hybrid-coding-approach\" target=\"_blank\" rel=\"nofollow noopener\">hybrid approach<\/a>, a <a href=\"https:\/\/julie.io\/writing\/gmail-first-strategy-for-responsive-emails\/\" target=\"_blank\" rel=\"nofollow noopener\" data-href=\"https:\/\/julie.io\/writing\/gmail-first-strategy-for-responsive-emails\/\">Gmail first strategy<\/a>, or <a href=\"http:\/\/webdesign.tutsplus.com\/tutorials\/creating-a-future-proof-responsive-email-without-media-queries--cms-23919\" rel=\"nofollow\" data-href=\"http:\/\/webdesign.tutsplus.com\/tutorials\/creating-a-future-proof-responsive-email-without-media-queries--cms-23919\">a responsive email without media queries<\/a>are great ways to adapt to this situation.<\/p>\n<p>That last approach has been my favorite so far. The big idea is to have columns as <em>&lt;div&gt;<\/em>s with a fixed width aligned with \u201c<em>display:inline-block\u201d<\/em>. Once a screen can longer contain two blocks side by side, they will naturally flow below each other. But I\u2019ve always had a problem with this.<\/p>\n<p>Once all the blocks are stacked, they don\u2019t take the full width of the email.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*ybAI7RS4xjmQY3Y_B4jUnw.png\" alt=\"\" \/><figcaption>Without media queries, columns can stack up but not grow full width. <a href=\"http:\/\/webdesign.tutsplus.com\/tutorials\/creating-a-future-proof-responsive-email-without-media-queries--cms-23919\" target=\"_blank\" rel=\"nofollow noopener\">Illustration by Nicole Merlin<\/a>.<\/figcaption><\/figure>\n<p>I\u2019ve been looking for ways to solve this problem for a long time. Flexbox is a great contender, but unfortunately <a href=\"https:\/\/medium.com\/@hteumeuleu\/using-flexbox-in-an-email-4b1aa7a69886#.83apq23wx\" target=\"_blank\" rel=\"nofollow noopener\">Flexbox support in an email<\/a> is abysmal.<\/p>\n<h2>A solution<\/h2>\n<h4><em>Remembering width<\/em>, <em>min-width<\/em> and <em>max-width<\/em><\/h4>\n<p>On top of the <em>calc()<\/em> function, the solution I found involves these three CSS properties. In order to fully understand how it works, here\u2019s a reminder of how <em>width<\/em>, <em>min-width<\/em> and <em>max-width<\/em> behave when used together (as <a href=\"http:\/\/goetter.tumblr.com\/post\/64119638003\/quiz-parce-que-la-taille-%C3%A7a-compte\" target=\"_blank\" rel=\"nofollow noopener\">clearly summarized<\/a> by fellow french front-end developer Rapha\u00ebl Goetter).<\/p>\n<ul>\n<li>If the <em>width<\/em> value is greater than the <em>max-width<\/em> value, <em>max-width<\/em> wins.<\/li>\n<li>If the <em>min-width<\/em> value is greater than the <em>width<\/em> or <em>max-width<\/em> values, <em>min-width<\/em> wins.<\/li>\n<\/ul>\n<p>Can guess what the width of a box with the following styles would be\u00a0?<\/p>\n<pre>.box {\r\n    width:320px;\r\n    min-width:480px;\r\n    max-width:160px;\r\n}<\/pre>\n<p><em>(Answer\u00a0: the box would be 480px wide.)<\/em><\/p>\n<h4>Introducing calc() and the magic formula<\/h4>\n<p>Without further ado, here is an example of the Fab Four to create two columns that will stack and grow below 480px.<\/p>\n<pre>.block {\r\n    display:inline-block;\r\n    min-width:50%;\r\n    max-width:100%;\r\n    width:calc((480px \u2014 100%) * 480);\r\n}<\/pre>\n<p>Let\u2019s break it down for each <em>width<\/em> property.<\/p>\n<pre>min-width:50%;<\/pre>\n<p>The <em>min-width<\/em> property defines our column widths on what we could call our desktop version. We can change this value to add more columns (for example, 25% for a four columns layout), or set columns with fixed pixel widths.<\/p>\n<pre>max-width:100%;<\/pre>\n<p>The <em>max-width<\/em> property defines our column widths on what we could call our mobile version. At 100%, each column will grow and adapt to the full width of their parent container. We can change this value to keep columns on mobile (for example, 50% for a two columns layout).<\/p>\n<pre>width:calc((480px \u2014 100%) * 480);<\/pre>\n<p>Thanks to the <em>calc()<\/em> function, the <em>width<\/em> property is where the magic happens. The <em>480<\/em> value matches our desired breakpoint value. The 100% corresponds to the width of the parent container of our columns. The goal of this calculation is to create a value bigger than our <em>max-width<\/em> or smaller than our<em>min-width<\/em>, so that either one of those property is applied instead.<\/p>\n<p>Here are two examples.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*zCzf5ZChfB1WB5FGULzpig.png\" alt=\"\" \/><\/figure>\n<p>With a parent of 500px, the calculated <em>width<\/em> equals -9600px. It is smaller than the min-width. So the min-width of 50% wins. Thus we have a two columns layout.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*PJANsECXH1VCJ5UxxaJ-5w.png\" alt=\"\" \/><\/figure>\n<p>With a parent of 400px, the calculated <em>width<\/em> equals 38400px. It is bigger than the min-width, but max-width is smaller. So the max-width of 100% wins. Thus we have a one column layout.<\/p>\n<h2>Demo<\/h2>\n<p>Here is a demo of what this technique can do. You can <a href=\"https:\/\/web.archive.org\/web\/20210927212225\/https:\/\/emails.hteumeuleu.fr\/wp-content\/uploads\/2016\/02\/the-fab-four.html\" target=\"_blank\" rel=\"nofollow noopener\">see the full demo online here<\/a>.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*YcVo7AGzJekmg5eupqLK0A.png\" alt=\"\" \/><figcaption>Illustrations by <a href=\"https:\/\/dribbble.com\/shots\/2012203-Paul-George\" target=\"_blank\" rel=\"nofollow noopener\">Elias Stein<\/a><\/figcaption><\/figure>\n<p>And here are two screenshots of this demo in Gmail, on the desktop webmail and on the mobile app on iOS. Same code, different render.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*GUknMjQDihG2WkqHIEBBUA.png\" alt=\"\" \/><figcaption>The Fab Four demo as seen on the Gmail desktop webmail and on the Gmail iOS app.<\/figcaption><\/figure>\n<p>In this demo, I\u2019ve set a few examples of different grids (with two, three, four columns). The first grid, with the images, is built to go from four columns on desktop to two columns on mobile. The other grids are built to grow full width on mobile.<\/p>\n<p>Also, notice how the title switches from a left aligned position on desktop to a centered position on mobile. This is achieved by giving the title a fixed width of 190px and a \u201c<em>margin:0 auto;<\/em>\u201d to center it. On desktop, the title\u2019s parent container has a min-width of 190px applied, so the logo stays on the left. On mobile, the parent container grows full width, so the logo becomes centered.<\/p>\n<p>A great aspect of this technique is that, since everything is based on the grid\u2019s parent width, an email can adapt even on a desktop webmail. For example, on Outlook.com, no matter if you chose to have the reading pane on the bottom or on the right, the email will correctly responds to the reading pane\u2019s width. This would be impossible to do with media queries.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*lbGOlHr5J-I2XSlbLrfQCg.png\" alt=\"\" \/><figcaption>On Outlook.com, the email adapts to the different views.<\/figcaption><\/figure>\n<h2 class=\"graf--h3 graf-after--figure\">Support<\/h2>\n<p>In browsers, calc() is <a href=\"http:\/\/caniuse.com\/#search=calc%28%29\" target=\"_blank\" rel=\"nofollow noopener\">well supported since IE9<\/a>. Turns out, calc() also has a pretty good support in email clients. It works in Apple Mail (on iOS and OS X), Thunderbird, Outlook (iOS and Android apps), Gmail (webmail, iOS and Android apps), AOL (webmail), and the old Outlook.com (still present in Europe).<\/p>\n<h3>The old Outlook.com<\/h3>\n<p>Outlook.com has one small quirk, though. The webmail will filter every property with a <em>calc()<\/em> that includes any parenthesis. This means that \u201c<em>calc(480px &#8211; 100%)<\/em>\u201d is supported, but \u201c<em>calc((480px &#8211; 100%) * 480)<\/em>\u201d is not. Since my initial formula involves parenthesis, we need to refactor it to avoid parenthesis. So the formula to support the old Outlook.com looks like this.<\/p>\n<pre>width:calc(480px * 480 \u2014 100% * 480);<\/pre>\n<h3>Unsupported clients<\/h3>\n<p>Of course, <em>calc()<\/em> isn\u2019t supported in old email clients like Lotus Notes, or the latest Outlook for Windows (using Word\u2019s HTML rendering engine). It also won\u2019t work on Outlook Web App (both Office 365 and the new Outlook.com) and Yahoo (webmail, iOS and Android apps). These two will strip out any property involving a <em>calc()<\/em>.<\/p>\n<h3>Fallbacks<\/h3>\n<p>In these cases, I would suggest duplicating all involved properties with fixed width values for clients that don\u2019t support <em>calc()<\/em>. In order to hide The Fab Four from those clients, I advise to use <em>calc()<\/em> functions, even if it\u2019s not technically useful. Our first example would look like the following.<\/p>\n<pre>.block {\r\n    display:inline-block;\r\n    min-width:240px;\r\n    width:50%;\r\n    max-width:100%;\r\n    min-width:calc(50%);\r\n    width:calc(480px * 480 \u2014 100% * 480);\r\n}<\/pre>\n<h3>Outlook Web App<\/h3>\n<p>However, Outlook Web App (both Office 365 and the new Outlook.com) has one more quirk of its own. When a <em>calc()<\/em> function contains a multiplication (with the \u2018<em>*<\/em>\u2019 character), the new Outlook.com and Office 365 will remove the whole inline <em>style<\/em> attribute corresponding. This means we need to calculate the multiplications by hand and only keep the resulting substraction. Here\u2019s what the final calculation looks like for a 480px breakpoint.<\/p>\n<pre>width:calc(230400px \u2014 48000%);<\/pre>\n<h3>WebKit Prefixes<\/h3>\n<p>Older versions of Android (before Android 5.0) or iOS (before iOS 7) require <em>-webkit-<\/em> prefixes in order to work. Our final version looks like the following.<\/p>\n<pre>.block {\r\n    display:inline-block;\r\n    min-width:240px;\r\n    width:50%;\r\n    max-width:100%;\r\n    min-width:-webkit-calc(50%);\r\n    min-width:calc(50%);\r\n    width:-webkit-calc(230400px \u2014 48000%);\r\n    width:calc(230400px \u2014 48000%);\r\n}<\/pre>\n<h2>Shortcomings and final thoughts<\/h2>\n<p>Like anything in the email development world, the Fab Four technique isn\u2019t perfect. Here are a few limitations that I can think of:<\/p>\n<ul>\n<li>It won\u2019t work on Yahoo. The desktop version of its webmail supports media queries, though. So we could improve things a bit by making a mobile first version of our email, and then enhancing it on desktop with media queries.<\/li>\n<li>You can only set one breakpoint. This might not be such a problem for emails though, as designs rarely go beyond 600px on desktop and don\u2019t require more than one breakpoint to adapt on mobile.<\/li>\n<li>You can only diminish the number of columns from a desktop version to a mobile version. While this rarely happens, you couldn\u2019t go from a four columns layout on mobile to a single column layout on desktop.<\/li>\n<li>The final version of the calculation (to support the old Outlook.com and degrade gracefully on the new one) is hard to read. Using a preprocessor and a mixin to generate all the required properties could be more than helpful.<\/li>\n<\/ul>\n<p>I still think that this technique will come in very handy in a lot of cases, especially for Gmail optimizations. I\u2019m sure there is also use cases for websites (like widgets, ads,\u00a0\u2026).<\/p>\n<p><em>Source and comments: <a href=\"https:\/\/medium.freecodecamp.com\/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.8hqfl9u8p\" target=\"_blank\" rel=\"nofollow noopener\">freeCodeCamp<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I think I found a new way to create responsive emails, without media queries. The solution involves the CSS calc() function and the three width, min-widthand max-width properties. Or as I like to call them all together: the Fab Four &hellip; <a href=\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-1959","post","type-post","status-publish","format-standard","hentry","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Fab Four technique to create Responsive Emails without Media Queries - Hellbach blog<\/title>\n<meta name=\"description\" content=\"a new way to create responsive emails, without media queries. The solution involves the CSS calc() funct\u2026\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Fab Four technique to create Responsive Emails without Media Queries\" \/>\n<meta property=\"og:description\" content=\"a new way to create responsive emails, without media queries. The solution involves the CSS calc() funct\u2026\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"Hellbach blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-19T01:33:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-24T22:38:37+00:00\" \/>\n<meta name=\"author\" content=\"alex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"The Fab Four technique to create Responsive Emails without Media Queries\" \/>\n<meta name=\"twitter:description\" content=\"a new way to create responsive emails, without media queries. The solution involves the CSS calc() funct\u2026\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/\"},\"author\":{\"name\":\"alex\",\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"headline\":\"The Fab Four technique to create Responsive Emails without Media Queries\",\"datePublished\":\"2016-02-19T01:33:19+00:00\",\"dateModified\":\"2022-11-24T22:38:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/\"},\"wordCount\":1389,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"image\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/\",\"url\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/\",\"name\":\"The Fab Four technique to create Responsive Emails without Media Queries - Hellbach blog\",\"isPartOf\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png\",\"datePublished\":\"2016-02-19T01:33:19+00:00\",\"dateModified\":\"2022-11-24T22:38:37+00:00\",\"description\":\"a new way to create responsive emails, without media queries. The solution involves the CSS calc() funct\u2026\",\"breadcrumb\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#primaryimage\",\"url\":\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png\",\"contentUrl\":\"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hellbach.us\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Fab Four technique to create Responsive Emails without Media Queries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hellbach.us\/blog\/#website\",\"url\":\"https:\/\/hellbach.us\/blog\/\",\"name\":\"Hellbach blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hellbach.us\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\",\"name\":\"alex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g\",\"caption\":\"alex\"},\"logo\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Fab Four technique to create Responsive Emails without Media Queries - Hellbach blog","description":"a new way to create responsive emails, without media queries. The solution involves the CSS calc() funct\u2026","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:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/","og_locale":"en_US","og_type":"article","og_title":"The Fab Four technique to create Responsive Emails without Media Queries","og_description":"a new way to create responsive emails, without media queries. The solution involves the CSS calc() funct\u2026","og_url":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/","og_site_name":"Hellbach blog","article_published_time":"2016-02-19T01:33:19+00:00","article_modified_time":"2022-11-24T22:38:37+00:00","author":"alex","twitter_card":"summary_large_image","twitter_title":"The Fab Four technique to create Responsive Emails without Media Queries","twitter_description":"a new way to create responsive emails, without media queries. The solution involves the CSS calc() funct\u2026","twitter_image":"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png","twitter_misc":{"Written by":"alex","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#article","isPartOf":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/"},"author":{"name":"alex","@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"headline":"The Fab Four technique to create Responsive Emails without Media Queries","datePublished":"2016-02-19T01:33:19+00:00","dateModified":"2022-11-24T22:38:37+00:00","mainEntityOfPage":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/"},"wordCount":1389,"commentCount":0,"publisher":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"image":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png","articleSection":["Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/","url":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/","name":"The Fab Four technique to create Responsive Emails without Media Queries - Hellbach blog","isPartOf":{"@id":"https:\/\/hellbach.us\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#primaryimage"},"image":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png","datePublished":"2016-02-19T01:33:19+00:00","dateModified":"2022-11-24T22:38:37+00:00","description":"a new way to create responsive emails, without media queries. The solution involves the CSS calc() funct\u2026","breadcrumb":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#primaryimage","url":"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png","contentUrl":"https:\/\/d262ilb51hltx0.cloudfront.net\/max\/800\/1*8MfWNObJP1mFnYJzKkdflQ.png"},{"@type":"BreadcrumbList","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/the-fab-four-technique-to-create-responsive-emails-without-media-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hellbach.us\/blog\/"},{"@type":"ListItem","position":2,"name":"The Fab Four technique to create Responsive Emails without Media Queries"}]},{"@type":"WebSite","@id":"https:\/\/hellbach.us\/blog\/#website","url":"https:\/\/hellbach.us\/blog\/","name":"Hellbach blog","description":"","publisher":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hellbach.us\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507","name":"alex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g","caption":"alex"},"logo":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts\/1959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/comments?post=1959"}],"version-history":[{"count":0,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts\/1959\/revisions"}],"wp:attachment":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/media?parent=1959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/categories?post=1959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/tags?post=1959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}