{"id":2477,"date":"2014-01-17T09:17:36","date_gmt":"2014-01-17T09:17:36","guid":{"rendered":"http:\/\/www.digitalresponse.es\/blog\/?p=2477"},"modified":"2014-01-17T09:17:36","modified_gmt":"2014-01-17T09:17:36","slug":"responsive-email-design-consejos-para-la-maquetacion-htmlcss","status":"publish","type":"post","link":"https:\/\/www.digitalresponse.es\/en\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/","title":{"rendered":"Responsive Email Design: Tips for HTML\/CSS Layout"},"content":{"rendered":"<p>Estos d\u00edas hemos estado hablando mucho tanto en el blog como en otras comunidades online de los retos que presenta la<strong> creaci\u00f3n de emails responsive<\/strong>, sobre todo en la fase de <a title=\"Deg Digital\" href=\"http:\/\/www.degdigital.com\/\" target=\"_blank\" rel=\"noopener\"><strong>maquetaci\u00f3n<\/strong><\/a>. Esto se debe a las<a title=\"Responsive Email Design: Compatibility across email services\" href=\"https:\/\/www.digitalresponse.es\/en\/blog\/responsive-email-design-compatibilidad-en-distintos-servicios-de-email-marketing\/\" target=\"_blank\" rel=\"noopener\"> incompatibilidades<\/a> que a d\u00eda de hoy se presentan entre la diversidad de dispostivos y clientes de correo.<!--more--><br \/>\nHoy hemos encontrado esta presentaci\u00f3n de <a title=\"Deg Digital\" href=\"http:\/\/www.degdigital.com\/\" target=\"_blank\" rel=\"noopener\">Deg Digital<\/a> que nos ha resultado muy sencilla de entender y clarificadora respecto a <strong>c\u00f3mo maquetar un email responsive<\/strong>. Aporta <strong>claves importantes, situaciones frecuentes y best practices<\/strong> que debemos aplicar, aunque como siempre, recordamos que dado el panorama actual, s\u00f3lo debemos implementar el<strong> responsive email design<\/strong> en caso de comprobar que la mayor\u00eda de nuestros receptores lo ver\u00e1n correctamente (esto es, usen dispositivos y aplicaciones compatibles).<\/p>\n<h4 style=\"text-align: center; font-size:1.5em;\"><strong><span style=\"color: #ec5056;\">\u00abCode like its 1999 &amp; 2013\u00bb<\/span><\/strong><\/h4>\n<p><iframe style=\"border: 1px solid #CCC; border-width: 1px 1px 0; margin-bottom: 5px;\" src=\"http:\/\/www.slideshare.net\/slideshow\/embed_code\/25931891\" height=\"450\" width=\"600\" allowfullscreen=\"\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<div style=\"margin-bottom: 5px;\"><strong> <a title=\"Coding for Responsive Email\" href=\"https:\/\/www.slideshare.net\/brianleegraves\/coding-for-responsive-email\" target=\"_blank\" rel=\"noopener\">Coding for Responsive Email<\/a> <\/strong> from <strong><a href=\"http:\/\/www.slideshare.net\/brianleegraves\" target=\"_blank\" rel=\"noopener\">Brian Graves<\/a><\/strong><\/div>\n<div style=\"margin-bottom: 5px;\"><\/div>\n<div style=\"margin-bottom: 5px;\"><\/div>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>These days we have been talking a lot both on the blog and in other online communities about the challenges of creating responsive emails, especially in the layout phase. This is due to the incompatibilities that currently exist between the diversity of devices and email clients.<\/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":[88],"post_folder":[],"class_list":["post-2477","post","type-post","status-publish","format-standard","hentry","category-blog","category-email-movil","tag-responsive-email-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS - 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\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS - Digital Response\" \/>\n<meta property=\"og:description\" content=\"Estos d\u00edas hemos estado hablando mucho tanto en el blog como en otras comunidades online de los retos que presenta la creaci\u00f3n de emails responsive, sobre todo en la fase de maquetaci\u00f3n. Esto se debe a las incompatibilidades que a d\u00eda de hoy se presentan entre la diversidad de dispostivos y clientes de correo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalresponse.es\/en\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/\" \/>\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=\"2014-01-17T09:17:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/01\/responsive-email-code.png\" \/>\n\t<meta property=\"og:image:width\" content=\"655\" \/>\n\t<meta property=\"og:image:height\" content=\"559\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/\"},\"author\":{\"name\":\"alecastellano\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe\"},\"headline\":\"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS\",\"datePublished\":\"2014-01-17T09:17:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/\"},\"wordCount\":157,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#organization\"},\"keywords\":[\"Responsive Email Design\"],\"articleSection\":[\"Blog\",\"Email M\u00f3vil\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/\",\"url\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/\",\"name\":\"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS - Digital Response\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#website\"},\"datePublished\":\"2014-01-17T09:17:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.digitalresponse.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS\"}]},{\"@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":"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS - 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\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/","og_locale":"en_GB","og_type":"article","og_title":"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS - Digital Response","og_description":"Estos d\u00edas hemos estado hablando mucho tanto en el blog como en otras comunidades online de los retos que presenta la creaci\u00f3n de emails responsive, sobre todo en la fase de maquetaci\u00f3n. Esto se debe a las incompatibilidades que a d\u00eda de hoy se presentan entre la diversidad de dispostivos y clientes de correo.","og_url":"https:\/\/www.digitalresponse.es\/en\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/","og_site_name":"Digital Response","article_publisher":"https:\/\/www.facebook.com\/digitalresponse","article_published_time":"2014-01-17T09:17:36+00:00","og_image":[{"width":655,"height":559,"url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2014\/01\/responsive-email-code.png","type":"image\/png"}],"author":"alecastellano","twitter_card":"summary_large_image","twitter_creator":"@dresponse","twitter_site":"@dresponse","twitter_misc":{"Written by":"alecastellano","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/#article","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/"},"author":{"name":"alecastellano","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe"},"headline":"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS","datePublished":"2014-01-17T09:17:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/"},"wordCount":157,"commentCount":3,"publisher":{"@id":"https:\/\/www.digitalresponse.es\/#organization"},"keywords":["Responsive Email Design"],"articleSection":["Blog","Email M\u00f3vil"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/","url":"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/","name":"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS - Digital Response","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/#website"},"datePublished":"2014-01-17T09:17:36+00:00","breadcrumb":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-consejos-para-la-maquetacion-htmlcss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.digitalresponse.es\/"},{"@type":"ListItem","position":2,"name":"Responsive Email Design: consejos para la maquetaci\u00f3n HTML\/CSS"}]},{"@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\/2477","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=2477"}],"version-history":[{"count":0,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts\/2477\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/media?parent=2477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/categories?post=2477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/tags?post=2477"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/post_folder?post=2477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}