{"id":2315,"date":"2014-01-13T07:01:33","date_gmt":"2014-01-13T07:01:33","guid":{"rendered":"http:\/\/www.digitalresponse.es\/blog\/?p=2315"},"modified":"2014-01-13T07:01:33","modified_gmt":"2014-01-13T07:01:33","slug":"responsive-email-design-como-disenar-un-email-para-movil","status":"publish","type":"post","link":"https:\/\/www.digitalresponse.es\/en\/responsive-email-design-como-disenar-un-email-para-movil\/","title":{"rendered":"Responsive Email Design: How to design a mobile-friendly email"},"content":{"rendered":"<p>Para conseguir un buen dise\u00f1o responsive lo \u00fanico que debemos hacer es pensar en la <strong>experiencia del usuario<\/strong>, ponernos en el lugar de la persona que recibe el<strong> email en un m\u00f3vil<\/strong> o tableta y ver si es un dise\u00f1o usable y atractivo. Algunas de las cosas que descubriremos f\u00e1cilmente en este ejercicio son las siguientes:<!--more--><br \/>\n\u2013\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <b>Estructura de una columna:<\/b> Es la que mejor funciona en m\u00f3vil, ya que disponemos de un ancho muy reducido.<br \/>\n\u2013\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <b>Botones y enlaces grandes:<\/b> recordemos que pasamos de dise\u00f1ar para un cursor a dise\u00f1ar para un dedo y debe haber espacio suficiente para hacer click con facilidad.<br \/>\n\u2013\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <b>Fuente grande<\/b>: en la mayor\u00eda de casos tendremos que aumentar el tama\u00f1o de fuente y muchas veces el interlineado para una correcta legibilidad.<br \/>\n\u2013\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <b>Look Mobile:<\/b> debemos facilitar la experiencia del usuario adaptando el estilo del email a lo que est\u00e1 acostumbrado a ver en m\u00f3vil. Coger convenciones ya establecidas para este tipo de dispositivos nos puede ayudar. Estas convenciones pueden ser iconos, ubicaci\u00f3n de objetos\u2026<br \/>\nAqu\u00ed ten\u00e9is un ejemplo de c\u00f3mo se ver\u00eda nuestro newsletter sin aplicar el dise\u00f1o responsive (escal\u00e1ndose al tama\u00f1o del dispositivo) y aplic\u00e1ndolo en el segundo caso:<\/p>\n<p align=\"center\"><a href=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-2318\" alt=\"email-movil-1\" src=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png\" width=\"446\" height=\"376\" \/><\/a><\/p>\n<p align=\"center\"><a href=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-2.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-2319\" alt=\"email-movil-2\" src=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-2.png\" width=\"478\" height=\"560\" \/><\/a><\/p>\n<p>Pod\u00e9is ver que la segunda opci\u00f3n implica un cambio significativo en legibilidad y usabilidad.<\/p>","protected":false},"excerpt":{"rendered":"<p>Para conseguir un buen dise\u00f1o responsive lo \u00fanico que debemos hacer es pensar en la experiencia del usuario, ponernos en el lugar de la persona que recibe el email en un m\u00f3vil o tableta y ver si es un dise\u00f1o usable y atractivo. Algunas de las cosas que descubriremos f\u00e1cilmente en este ejercicio son las [&hellip;]<\/p>\n","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-2315","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: C\u00f3mo dise\u00f1ar un email para m\u00f3vil - 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-como-disenar-un-email-para-movil\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Email Design: C\u00f3mo dise\u00f1ar un email para m\u00f3vil - Digital Response\" \/>\n<meta property=\"og:description\" content=\"Para conseguir un buen dise\u00f1o responsive lo \u00fanico que debemos hacer es pensar en la experiencia del usuario, ponernos en el lugar de la persona que recibe el email en un m\u00f3vil o tableta y ver si es un dise\u00f1o usable y atractivo. Algunas de las cosas que descubriremos f\u00e1cilmente en este ejercicio son las [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalresponse.es\/en\/responsive-email-design-como-disenar-un-email-para-movil\/\" \/>\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-13T07:01:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"478\" \/>\n\t<meta property=\"og:image:height\" content=\"560\" \/>\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-como-disenar-un-email-para-movil\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/\"},\"author\":{\"name\":\"alecastellano\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe\"},\"headline\":\"Responsive Email Design: C\u00f3mo dise\u00f1ar un email para m\u00f3vil\",\"datePublished\":\"2014-01-13T07:01:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/\"},\"wordCount\":243,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png\",\"keywords\":[\"Responsive Email Design\"],\"articleSection\":[\"Blog\",\"Email M\u00f3vil\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/\",\"url\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/\",\"name\":\"Responsive Email Design: C\u00f3mo dise\u00f1ar un email para m\u00f3vil - Digital Response\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png\",\"datePublished\":\"2014-01-13T07:01:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#primaryimage\",\"url\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png\",\"contentUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.digitalresponse.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Email Design: C\u00f3mo dise\u00f1ar un email para m\u00f3vil\"}]},{\"@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: C\u00f3mo dise\u00f1ar un email para m\u00f3vil - 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-como-disenar-un-email-para-movil\/","og_locale":"en_GB","og_type":"article","og_title":"Responsive Email Design: C\u00f3mo dise\u00f1ar un email para m\u00f3vil - Digital Response","og_description":"Para conseguir un buen dise\u00f1o responsive lo \u00fanico que debemos hacer es pensar en la experiencia del usuario, ponernos en el lugar de la persona que recibe el email en un m\u00f3vil o tableta y ver si es un dise\u00f1o usable y atractivo. Algunas de las cosas que descubriremos f\u00e1cilmente en este ejercicio son las [&hellip;]","og_url":"https:\/\/www.digitalresponse.es\/en\/responsive-email-design-como-disenar-un-email-para-movil\/","og_site_name":"Digital Response","article_publisher":"https:\/\/www.facebook.com\/digitalresponse","article_published_time":"2014-01-13T07:01:33+00:00","og_image":[{"width":478,"height":560,"url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-2.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-como-disenar-un-email-para-movil\/#article","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/"},"author":{"name":"alecastellano","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/be6c41a4d4407b1246712e461e2d13fe"},"headline":"Responsive Email Design: C\u00f3mo dise\u00f1ar un email para m\u00f3vil","datePublished":"2014-01-13T07:01:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/"},"wordCount":243,"commentCount":2,"publisher":{"@id":"https:\/\/www.digitalresponse.es\/#organization"},"image":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png","keywords":["Responsive Email Design"],"articleSection":["Blog","Email M\u00f3vil"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/","url":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/","name":"Responsive Email Design: C\u00f3mo dise\u00f1ar un email para m\u00f3vil - Digital Response","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png","datePublished":"2014-01-13T07:01:33+00:00","breadcrumb":{"@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#primaryimage","url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png","contentUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2013\/11\/email-movil-12.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalresponse.es\/responsive-email-design-como-disenar-un-email-para-movil\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.digitalresponse.es\/"},{"@type":"ListItem","position":2,"name":"Responsive Email Design: C\u00f3mo dise\u00f1ar un email para m\u00f3vil"}]},{"@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\/2315","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=2315"}],"version-history":[{"count":0,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts\/2315\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/media?parent=2315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/categories?post=2315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/tags?post=2315"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/post_folder?post=2315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}