{"id":3706,"date":"2015-01-14T08:51:43","date_gmt":"2015-01-14T07:51:43","guid":{"rendered":"http:\/\/www.digitalresponse.es\/blog\/?p=3706"},"modified":"2015-01-14T08:51:43","modified_gmt":"2015-01-14T07:51:43","slug":"recursos-para-aplicar-el-responsive-design-a-nuestros-emails","status":"publish","type":"post","link":"https:\/\/www.digitalresponse.es\/en\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/","title":{"rendered":"Resources to apply Responsive Design to our emails"},"content":{"rendered":"<p>In the previous post we talked about how the<strong> Responsive Email Design<\/strong> has been gaining momentum during 2014 and is set to become an essential technique in 2015. To help you get started on this path, here are some resources that can help you:<!--more--><\/p>\n<ul>\n<li><a title=\"Email preview\" href=\"https:\/\/litmus.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Litmus preview tool<\/strong><\/a><\/li>\n<\/ul>\n<p>We can say that the hardest work begins after passing our initial layout through this tool. In it we can see if our email is broken in some clients and look for the solution.<br \/>\n<a href=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-3708 aligncenter\" src=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png\" alt=\"responsive-herramientas\" width=\"523\" height=\"274\" \/><\/a><\/p>\n<ul>\n<li><a title=\"Nicole Merlin Responsive Email\" href=\"http:\/\/webdesign.tutsplus.com\/es\/articles\/creating-a-simple-responsive-html-email--webdesign-12978\" target=\"_blank\" rel=\"noopener\"><strong>Creating a Simple Responsive HTML Email by Nicole Merlin<\/strong><\/a><\/li>\n<\/ul>\n<p>This is one of the best developer articles we've come across. In it, Nicol Merlin guides us step by step to build a responsive template that works correctly in all email clients. As she says, we are not just talking about media queries, but about the combination of several techniques to get an email that adapts to different resolutions:<\/p>\n<blockquote><p>It makes use of 'minimal media queries' and a 'fluid width' approach to ensure maximum compatibility.<\/p><\/blockquote>\n<ul>\n<li><a title=\"Responsive Email Templates\" href=\"http:\/\/zurb.com\/playground\/responsive-email-templates\" target=\"_blank\" rel=\"noopener\"><strong>Zurb responsive templates<\/strong><\/a><\/li>\n<\/ul>\n<p>It is an interesting starting point to create your own responsive template, although we do not recommend using them unmodified. The first thing to bear in mind is that the CSS of the templates must be included inline (you can do it with the <a title=\"CSS inliner\" href=\"http:\/\/zurb.com\/ink\/inliner.php\" target=\"_blank\" rel=\"noopener\">Zurb tool<\/a>). But there are also elements in the templates that can be improved. By their own admission, they do not display correctly in Outlook 2007, 2010 and 2013, but there is a solution.<br \/>\nStill, it can save us time to use them as a framework and add our own improvements and modifications as we need them.<\/p>\n<ul>\n<li>Series of articles about Responsive Email Design in our blog:\n<ul>\n<li><a href=\"https:\/\/www.digitalresponse.es\/en\/blog\/responsive-email-design-como-disenar-un-email-para-movil\/\">How to design a mobile email<\/a>l<\/li>\n<li><a href=\"https:\/\/www.digitalresponse.es\/en\/blog\/responsive-email-design-como-maquetar-un-email-movil\/\">How to create a responsive email layout<\/a><\/li>\n<li><a href=\"https:\/\/www.digitalresponse.es\/en\/blog\/responsive-email-design-ejemplo-de-diseno-y-maquetacion-de-un-email-responsive\/\">Responsive email design and layout example<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>Communities of professionals:<\/strong><\/li>\n<\/ul>\n<p>Often, it is not easy to find the answer to a specific problem on the web (although there is more and more information). Therefore, the best option is often to ask. To do so, there are different groups of professionals on the web with whom you can share experiences and get answers to problems that they have also experienced.<\/p>\n<ul>\n<li style=\"list-style: none;\">\n<ul>\n<li><a title=\"Litmus Community\" href=\"https:\/\/litmus.com\/community\/\" target=\"_blank\" rel=\"noopener\">Litmus Community<\/a><\/li>\n<li><a title=\"Email Marketing in English\" href=\"https:\/\/www.linkedin.com\/groups\/Email-marketing-marketing-relacional-5114435\" target=\"_blank\" rel=\"noopener\">Linkedin Group on Email Marketing in Spanish<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Do you know of any other interesting resources for the development of responsive emails? Which ones would you recommend?<\/p>","protected":false},"excerpt":{"rendered":"<p>En el anterior post habl\u00e1bamos de como el Responsive Email Design se ha ido afianzando durante el 2014 para convertirse en una t\u00e9cnica ineludible en 2015. Para ayudaros a emprender este camino aqu\u00ed ten\u00e9is algunos recursos que os pueden ayudar:<\/p>","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[37,63],"tags":[],"post_folder":[],"class_list":["post-3706","post","type-post","status-publish","format-standard","hentry","category-blog","category-email-movil"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Recursos para aplicar el Responsive Design a nuestros emails - Digital Response<\/title>\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.digitalresponse.es\/en\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Recursos para aplicar el Responsive Design a nuestros emails - Digital Response\" \/>\n<meta property=\"og:description\" content=\"En el anterior post habl\u00e1bamos de como el Responsive Email Design se ha ido afianzando durante el 2014 para convertirse en una t\u00e9cnica ineludible en 2015. Para ayudaros a emprender este camino aqu\u00ed ten\u00e9is algunos recursos que os pueden ayudar:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalresponse.es\/en\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Response\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/digitalresponse\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-14T07:51:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png\" \/>\n<meta name=\"author\" content=\"alecastellano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dresponse\" \/>\n<meta name=\"twitter:site\" content=\"@dresponse\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alecastellano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/\"},\"author\":{\"name\":\"alecastellano\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe\"},\"headline\":\"Recursos para aplicar el Responsive Design a nuestros emails\",\"datePublished\":\"2015-01-14T07:51:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/\"},\"wordCount\":409,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png\",\"articleSection\":[\"Blog\",\"Email M\u00f3vil\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/\",\"url\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/\",\"name\":\"Recursos para aplicar el Responsive Design a nuestros emails - Digital Response\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png\",\"datePublished\":\"2015-01-14T07:51:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#primaryimage\",\"url\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png\",\"contentUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.digitalresponse.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos para aplicar el Responsive Design a nuestros emails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.digitalresponse.es\/#website\",\"url\":\"https:\/\/www.digitalresponse.es\/\",\"name\":\"Digital Response\",\"description\":\"Email Marketing y Marketing Automation\",\"publisher\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.digitalresponse.es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.digitalresponse.es\/#organization\",\"name\":\"Digital Response\",\"url\":\"https:\/\/www.digitalresponse.es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2024\/02\/digitalResponse_claim_500.png\",\"contentUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2024\/02\/digitalResponse_claim_500.png\",\"width\":500,\"height\":135,\"caption\":\"Digital Response\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/digitalresponse\",\"https:\/\/x.com\/dresponse\",\"https:\/\/www.linkedin.com\/company\/digital-response\/\",\"https:\/\/www.youtube.com\/channel\/UCuG-okZhhBKdzJpHRwMrnYg\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe\",\"name\":\"alecastellano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b575aa49eff0351da2a8fa6f3039d22c42013b460683c1a974fa308c8b42bf75?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b575aa49eff0351da2a8fa6f3039d22c42013b460683c1a974fa308c8b42bf75?s=96&d=mm&r=g\",\"caption\":\"alecastellano\"},\"url\":\"https:\/\/www.digitalresponse.es\/en\/author\/alecastellano\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Recursos para aplicar el Responsive Design a nuestros emails - Digital Response","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.digitalresponse.es\/en\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/","og_locale":"en_GB","og_type":"article","og_title":"Recursos para aplicar el Responsive Design a nuestros emails - Digital Response","og_description":"En el anterior post habl\u00e1bamos de como el Responsive Email Design se ha ido afianzando durante el 2014 para convertirse en una t\u00e9cnica ineludible en 2015. Para ayudaros a emprender este camino aqu\u00ed ten\u00e9is algunos recursos que os pueden ayudar:","og_url":"https:\/\/www.digitalresponse.es\/en\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/","og_site_name":"Digital Response","article_publisher":"https:\/\/www.facebook.com\/digitalresponse","article_published_time":"2015-01-14T07:51:43+00:00","og_image":[{"url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png","type":"","width":"","height":""}],"author":"alecastellano","twitter_card":"summary_large_image","twitter_creator":"@dresponse","twitter_site":"@dresponse","twitter_misc":{"Written by":"alecastellano","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#article","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/"},"author":{"name":"alecastellano","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe"},"headline":"Recursos para aplicar el Responsive Design a nuestros emails","datePublished":"2015-01-14T07:51:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/"},"wordCount":409,"commentCount":3,"publisher":{"@id":"https:\/\/www.digitalresponse.es\/#organization"},"image":{"@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png","articleSection":["Blog","Email M\u00f3vil"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/","url":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/","name":"Recursos para aplicar el Responsive Design a nuestros emails - Digital Response","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png","datePublished":"2015-01-14T07:51:43+00:00","breadcrumb":{"@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#primaryimage","url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png","contentUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/12\/responsive-herramientas.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalresponse.es\/recursos-para-aplicar-el-responsive-design-a-nuestros-emails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.digitalresponse.es\/"},{"@type":"ListItem","position":2,"name":"Recursos para aplicar el Responsive Design a nuestros emails"}]},{"@type":"WebSite","@id":"https:\/\/www.digitalresponse.es\/#website","url":"https:\/\/www.digitalresponse.es\/","name":"Digital Response","description":"Email Marketing and Marketing Automation","publisher":{"@id":"https:\/\/www.digitalresponse.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digitalresponse.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.digitalresponse.es\/#organization","name":"Digital Response","url":"https:\/\/www.digitalresponse.es\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/logo\/image\/","url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2024\/02\/digitalResponse_claim_500.png","contentUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2024\/02\/digitalResponse_claim_500.png","width":500,"height":135,"caption":"Digital Response"},"image":{"@id":"https:\/\/www.digitalresponse.es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/digitalresponse","https:\/\/x.com\/dresponse","https:\/\/www.linkedin.com\/company\/digital-response\/","https:\/\/www.youtube.com\/channel\/UCuG-okZhhBKdzJpHRwMrnYg"]},{"@type":"Person","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe","name":"alecastellano","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b575aa49eff0351da2a8fa6f3039d22c42013b460683c1a974fa308c8b42bf75?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b575aa49eff0351da2a8fa6f3039d22c42013b460683c1a974fa308c8b42bf75?s=96&d=mm&r=g","caption":"alecastellano"},"url":"https:\/\/www.digitalresponse.es\/en\/author\/alecastellano\/"}]}},"_links":{"self":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts\/3706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/comments?post=3706"}],"version-history":[{"count":0,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts\/3706\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/media?parent=3706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/categories?post=3706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/tags?post=3706"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/post_folder?post=3706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}