{"id":4169,"date":"2015-04-27T08:43:17","date_gmt":"2015-04-27T06:43:17","guid":{"rendered":"http:\/\/www.digitalresponse.es\/blog\/?p=4169"},"modified":"2015-04-27T08:43:17","modified_gmt":"2015-04-27T06:43:17","slug":"diseno-web-emails-distinto","status":"publish","type":"post","link":"https:\/\/www.digitalresponse.es\/en\/diseno-web-emails-distinto\/","title":{"rendered":"Why email and website layouts are so different"},"content":{"rendered":"

Usually when a web designer asks you to show him the code of your emails he's like... What's that?
\n
\nMany people say to you \"Why models as if it were 1999?<\/strong> \"In fact, most professionals who come to email layout do it from web design and we have to \"unlearn\" many things when we come face to face with a very complicated reality. The main differences between the construction of websites and emails are these:
\n\u2013\u00a0Tables<\/strong>
\nDivs are not safe and the "float" rule does not work in email, so instead we will use tables and play with their alignment to create our layouts. It is also not recommended to use <p>but to place the content directly into the <td>
\n\u2013 Inline CSS styling<\/strong>
\nAlthough with responsive design this is changing, it is still necessary to declare the style inline, since there are still email clients that do not interpret the contents of the style tag, or external style sheets. We can declare styles within the style tag, always with !important to overwrite what is declared inline, for example to apply styles according to the resolution of the device (media queries) in those email clients that allow us to do so.
\n- We cannot use Javascript or PHP<\/strong>
\nWe can only use HTML and CSS, as any JS script or PHP code will not work in our email.
\n- We cannot insert videos<\/strong>
\nVideo support is very limited<\/a> (pretty much only works on Apple devices and clients) and so we recommend using images with links to a player, or GIFs to replace video and optimise the experience in all email clients. We can use video within the email as long as we have a good fallback for all email services that will not interpret it.
\nThe heterogeneity with which different email clients interpret the code greatly limits the layout, but after some time of dealing with the usual problems that arise we arrive at \"email safe\" practices that we assimilate and apply to our messages almost unconsciously.
\n <\/p>","protected":false},"excerpt":{"rendered":"

Usually when a web designer asks you to show him the code of your emails he's like... What's that?<\/p>","protected":false},"author":4,"featured_media":4170,"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-4169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-diseno-de-emails"],"acf":[],"yoast_head":"\nPor qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites - 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\/diseno-web-emails-distinto\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites - Digital Response\" \/>\n<meta property=\"og:description\" content=\"Por lo general cuando un dise\u00f1ador web te pide que le ense\u00f1es el c\u00f3digo de tus emails se suele quedar como… \u00bf\u00bfQu\u00e9 es eso??\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalresponse.es\/en\/diseno-web-emails-distinto\/\" \/>\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-04-27T06:43:17+00:00\" \/>\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\/diseno-web-emails-distinto\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/\"},\"author\":{\"name\":\"alecastellano\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe\"},\"headline\":\"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites\",\"datePublished\":\"2015-04-27T06:43:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/\"},\"wordCount\":392,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"Blog\",\"Dise\u00f1o de emails\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/\",\"url\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/\",\"name\":\"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites - Digital Response\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2015-04-27T06:43:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.digitalresponse.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites\"}]},{\"@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":"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites - 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\/diseno-web-emails-distinto\/","og_locale":"en_GB","og_type":"article","og_title":"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites - Digital Response","og_description":"Por lo general cuando un dise\u00f1ador web te pide que le ense\u00f1es el c\u00f3digo de tus emails se suele quedar como… \u00bf\u00bfQu\u00e9 es eso??","og_url":"https:\/\/www.digitalresponse.es\/en\/diseno-web-emails-distinto\/","og_site_name":"Digital Response","article_publisher":"https:\/\/www.facebook.com\/digitalresponse","article_published_time":"2015-04-27T06:43:17+00:00","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\/diseno-web-emails-distinto\/#article","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/"},"author":{"name":"alecastellano","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe"},"headline":"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites","datePublished":"2015-04-27T06:43:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/"},"wordCount":392,"commentCount":0,"publisher":{"@id":"https:\/\/www.digitalresponse.es\/#organization"},"image":{"@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#primaryimage"},"thumbnailUrl":"","articleSection":["Blog","Dise\u00f1o de emails"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/","url":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/","name":"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites - Digital Response","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#primaryimage"},"thumbnailUrl":"","datePublished":"2015-04-27T06:43:17+00:00","breadcrumb":{"@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalresponse.es\/diseno-web-emails-distinto\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.digitalresponse.es\/"},{"@type":"ListItem","position":2,"name":"Por qu\u00e9 es tan distinta la maquetaci\u00f3n de emails y websites"}]},{"@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\/4169","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=4169"}],"version-history":[{"count":0,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts\/4169\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/media?parent=4169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/categories?post=4169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/tags?post=4169"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/post_folder?post=4169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}