{"id":8592,"date":"2017-06-28T13:22:21","date_gmt":"2017-06-28T11:22:21","guid":{"rendered":"http:\/\/www.digitalresponse.es\/?p=8592"},"modified":"2017-06-28T13:22:21","modified_gmt":"2017-06-28T11:22:21","slug":"codificacion-diseno-email","status":"publish","type":"post","link":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/","title":{"rendered":"Coding in email design"},"content":{"rendered":"<p>Crear el dise\u00f1o de un email no es lo mismo que crear el de un sitio web. Ante todo es conveniente alejarse de dise\u00f1os complejos, ya que a mayor complejidad, m\u00e1s posibilidades existen de que el email no se vea bien en todos los tipos\u00a0de correo (Outlook, Thunderbird, Hotmail, Gmail, Yahoo, etc.). En la sencillez no solo est\u00e1 la elegancia, sino la seguridad de que los destinatarios de nuestro email ser\u00e1n verdaderos receptores de nuestro mensaje publicitario. La prueba y el error tambi\u00e9n nos ayudar\u00e1n a saber cu\u00e1l es el c\u00f3digo m\u00e1s \u00f3ptimo para cada proveedor de correo.<br \/>\nEn cualquier caso, es importante seguir las siguientes recomendaciones:<br \/>\n<strong>1- Utilizar tablas para la maquetaci\u00f3n de contenido, no div&#8217;s<\/strong><br \/>\nLa \u00fanica forma de que el dise\u00f1o de nuestro email cuente con una estructura es utilizando <strong>tablas<\/strong>. Los div&#8217;s son realmente \u00fatiles, pero solo en el dise\u00f1o de sitios web. Si los utilizamos en email, no lograremos alinear nuestros contenidos.<br \/>\n<strong>2- Los CSS siempre in-line<\/strong><br \/>\nPara dar formato al contenido de nuestro email hay que definirlo dentro de las tablas o (preferiblemente en los TD), pero nunca en hojas de estilo aparte, ni en el head de nuestro HTML. Recomendamos utilizar las etiquetas &lt;style&gt;&lt;\/style&gt; dentro del &lt;head&gt;&lt;\/head&gt; \u00fanicamente para el dise\u00f1o responsive mediante media queries.<br \/>\n<strong>3- Equilibrio de im\u00e1genes y texto<\/strong><br \/>\nSi abusamos de las im\u00e1genes hay m\u00e1s probabilidades de que nuestro email acabe en la bandeja de spam. Por ese motivo lo mejor es lograr un <strong>equilibrio entre \u00e9stas y el texto<\/strong>.<br \/>\n<strong>4- Alojar las im\u00e1genes en un servidor<\/strong><br \/>\nLa mayor\u00eda de los clientes de webmail no soportan im\u00e1genes embebidas ni tampoco muy pesadas. La clave es <strong>alojar las im\u00e1genes en un servidor<\/strong>, desde nuestro dise\u00f1o, <strong>mediante una URL<\/strong>.<br \/>\n<strong>5- Cuida el peso de los emails<\/strong><br \/>\nEs especialmente importante\u00a0cuidar el peso de las im\u00e1genes y optimizarlas para web si queremos una buena recepci\u00f3n de nuestros emails. Incorporando en nuestro dise\u00f1o una imagen de 300 dpi, lo \u00fanico que conseguiremos es que el tiempo de carga de la misma sea demasiado largo. En realidad podemos mostrar la <strong>misma imagen a 72 dpi<\/strong> haciendo que el tiempo de espera del usuario sea mucho menor.<br \/>\n<strong>6- Definir los ALT&#8217;s<\/strong><br \/>\nExisten muchos destinatarios que tienen la navegaci\u00f3n por im\u00e1genes desactivada. La <strong>definici\u00f3n de los ALT&#8217;s<\/strong> har\u00e1 que quien tenga la navegaci\u00f3n por im\u00e1genes desactivada pueda saber, por ejemplo, donde hay una llamada a la acci\u00f3n, donde hay una imagen del producto, etc.<br \/>\n<strong>7- Recordar siempre que un email no es una p\u00e1gina web<\/strong><br \/>\nNo podemos utilizar javascript, PHP o flash, ya que no se cargar\u00edan o har\u00edan que el correo fuera a parar directamente a la bandeja de spam.<br \/>\n<strong>8- Evitar el uso de\u00a0im\u00e1genes cortadas horizontalmennte<\/strong><br \/>\nPara evitar que se generen espacios extra entre im&aacute;genes, hay que a&ntilde;adir el siguiente c&oacute;digo en cada una de las &lt;td&gt; en las que haya im&aacute;genes: style=&rdquo;border:none; font-size:0; line-height:0; letter-spacing:0; padding:0px; margin:0px;&rdquo;.<br \/>\n<strong>9- Evitar el uso de rowpans<\/strong><br \/>\nEs importante tambi\u00e9n evitar el uso de rowspans cuando se codifica el email. Algunos proveedores de correo como Lotus y Hotmail no lo mostrar\u00e1n correctamente, por lo que la mejor alternativa es el uso de colspans o bien las tablas.<\/p>","protected":false},"excerpt":{"rendered":"<p>Crear el dise\u00f1o de un email no es lo mismo que crear el de un sitio web. Ante todo es conveniente alejarse de dise\u00f1os complejos, ya que a mayor complejidad, m\u00e1s posibilidades existen de que el email no se vea bien en todos los tipos\u00a0de correo (Outlook, Thunderbird, Hotmail, Gmail, Yahoo, etc.). En la sencillez [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[37,39],"tags":[],"post_folder":[],"class_list":["post-8592","post","type-post","status-publish","format-standard","hentry","category-blog","category-diseno-de-emails"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>La codificaci\u00f3n en el dise\u00f1o de un email - 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\/codificacion-diseno-email\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La codificaci\u00f3n en el dise\u00f1o de un email - Digital Response\" \/>\n<meta property=\"og:description\" content=\"Crear el dise\u00f1o de un email no es lo mismo que crear el de un sitio web. Ante todo es conveniente alejarse de dise\u00f1os complejos, ya que a mayor complejidad, m\u00e1s posibilidades existen de que el email no se vea bien en todos los tipos\u00a0de correo (Outlook, Thunderbird, Hotmail, Gmail, Yahoo, etc.). En la sencillez [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/\" \/>\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=\"2017-06-28T11:22:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/06\/codificacion-diseno-email.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"940\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ariadna Gubern\" \/>\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=\"Ariadna Gubern\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/\"},\"author\":{\"name\":\"Ariadna Gubern\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/5e0e9b0842bdb4269390c815a805b8bf\"},\"headline\":\"La codificaci\u00f3n en el dise\u00f1o de un email\",\"datePublished\":\"2017-06-28T11:22:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/\"},\"wordCount\":599,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#organization\"},\"articleSection\":[\"Blog\",\"Dise\u00f1o de emails\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/\",\"url\":\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/\",\"name\":\"La codificaci\u00f3n en el dise\u00f1o de un email - Digital Response\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#website\"},\"datePublished\":\"2017-06-28T11:22:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.digitalresponse.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"La codificaci\u00f3n en el dise\u00f1o de un email\"}]},{\"@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\/5e0e9b0842bdb4269390c815a805b8bf\",\"name\":\"Ariadna Gubern\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ebada4ec387381a14e806e57daec72fb226b199e2d3395203acea0d2fef75c4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ebada4ec387381a14e806e57daec72fb226b199e2d3395203acea0d2fef75c4c?s=96&d=mm&r=g\",\"caption\":\"Ariadna Gubern\"},\"url\":\"https:\/\/www.digitalresponse.es\/en\/author\/ariadna-gubern\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"La codificaci\u00f3n en el dise\u00f1o de un email - 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\/codificacion-diseno-email\/","og_locale":"en_GB","og_type":"article","og_title":"La codificaci\u00f3n en el dise\u00f1o de un email - Digital Response","og_description":"Crear el dise\u00f1o de un email no es lo mismo que crear el de un sitio web. Ante todo es conveniente alejarse de dise\u00f1os complejos, ya que a mayor complejidad, m\u00e1s posibilidades existen de que el email no se vea bien en todos los tipos\u00a0de correo (Outlook, Thunderbird, Hotmail, Gmail, Yahoo, etc.). En la sencillez [&hellip;]","og_url":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/","og_site_name":"Digital Response","article_publisher":"https:\/\/www.facebook.com\/digitalresponse","article_published_time":"2017-06-28T11:22:21+00:00","og_image":[{"width":940,"height":627,"url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/06\/codificacion-diseno-email.jpeg","type":"image\/jpeg"}],"author":"Ariadna Gubern","twitter_card":"summary_large_image","twitter_creator":"@dresponse","twitter_site":"@dresponse","twitter_misc":{"Written by":"Ariadna Gubern","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/#article","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/"},"author":{"name":"Ariadna Gubern","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/5e0e9b0842bdb4269390c815a805b8bf"},"headline":"La codificaci\u00f3n en el dise\u00f1o de un email","datePublished":"2017-06-28T11:22:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/"},"wordCount":599,"commentCount":0,"publisher":{"@id":"https:\/\/www.digitalresponse.es\/#organization"},"articleSection":["Blog","Dise\u00f1o de emails"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/","url":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/","name":"La codificaci\u00f3n en el dise\u00f1o de un email - Digital Response","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/#website"},"datePublished":"2017-06-28T11:22:21+00:00","breadcrumb":{"@id":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalresponse.es\/en\/codificacion-diseno-email\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.digitalresponse.es\/"},{"@type":"ListItem","position":2,"name":"La codificaci\u00f3n en el dise\u00f1o de un email"}]},{"@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\/5e0e9b0842bdb4269390c815a805b8bf","name":"Ariadna Gubern","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ebada4ec387381a14e806e57daec72fb226b199e2d3395203acea0d2fef75c4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ebada4ec387381a14e806e57daec72fb226b199e2d3395203acea0d2fef75c4c?s=96&d=mm&r=g","caption":"Ariadna Gubern"},"url":"https:\/\/www.digitalresponse.es\/en\/author\/ariadna-gubern\/"}]}},"_links":{"self":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts\/8592","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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/comments?post=8592"}],"version-history":[{"count":0,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts\/8592\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/media?parent=8592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/categories?post=8592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/tags?post=8592"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/post_folder?post=8592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}