{"id":8084,"date":"2017-03-20T08:00:36","date_gmt":"2017-03-20T06:00:36","guid":{"rendered":"http:\/\/www.digitalresponse.es\/?p=8084"},"modified":"2017-03-20T08:00:36","modified_gmt":"2017-03-20T06:00:36","slug":"longitud-responsive-email-design","status":"publish","type":"post","link":"https:\/\/www.digitalresponse.es\/en\/longitud-responsive-email-design\/","title":{"rendered":"How long should a responsive email design be?"},"content":{"rendered":"

Have you ever wondered what it should be like to have a length of a responsive email design<\/strong>? This is something that can often be overlooked when we spend so much effort to layout all the content in the best possible way. Today we will dedicate this post to discuss this issue.
\n
\nWhen designing a responsive email, we tended to focus a lot on maintaining the content and distributing it in a visual and highly attractive way for all types of screens and their respective widths. So restricting the design to the width of the browser window makes more sense than restricting it to its length, as that would mean getting an email with an extremely long horizontal scroll, which would be impractical and would make the email difficult to read.
\nFor this reason, when we find ourselves faced with a adaptive design<\/strong><\/a>The easiest way to lay out all the content is to organise it in a single column, in this way we ensure that it adapts perfectly to any type of screen. As a result, and without realising it, we end up with an email that, despite being displayed perfectly on any device, is extremely long.
\nTo what extent does the length of the email affect the content displayed, and does it affect having to scroll to get to the end of the email?<\/strong>
\nLength is not really a problem per se. However, it can affect the display of different content blocks. It can be quite a headache to decide which of them is more important or takes precedence when placed in the responsive email.
\nLet's look at an example. We have an email that when viewed on a screen we see, at first glance, 3 different blocks of content side by side. However, when we look at it on the mobile, at first glance we only see one of the three blocks of content. This means that to see the other 2 we have to scroll. What's more, as we scroll through the email, we can see perfectly well that these 3 blocks of content were meant to be together. If we add to that the little time we spend reading any communication that arrives via email, this distribution can become a problem.
\nWhat design alternatives can we use to place the content?<\/strong><\/p>\n

    \n
  1. Use the height of the window of a mobile device as a guide<\/strong> to help determine how the content should be positioned and laid out. Here we can see an alternative to a design in which only one block of content was visible. As you can see, now with this change the user can see at first glance all 3 contents displayed.<\/li>\n
  2. \"\"<\/a>Reduce section header and photo size<\/strong>This way we can fit all the content of that section in a single graphical window.<\/li>\n
  3. Explores all the different ways in which content can be positioned<\/strong>. Depending on the context of your design and the nature of the content, other designs may work better. Here are some examples.\"\"<\/a><\/li>\n<\/ol>\n

     
    \n <\/p>","protected":false},"excerpt":{"rendered":"

    Have you ever thought about how long a responsive email design should be? It's something that can often be overlooked when we spend so much effort to layout all the content in the best possible way. Today we will dedicate this post to discuss this issue.<\/p>","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,63],"tags":[],"post_folder":[],"class_list":["post-8084","post","type-post","status-publish","format-standard","hentry","category-blog","category-diseno-de-emails","category-email-movil"],"acf":[],"yoast_head":"\n\u00bfC\u00f3mo debe ser la longitud de un responsive email design? - 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\/longitud-responsive-email-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfC\u00f3mo debe ser la longitud de un responsive email design? - Digital Response\" \/>\n<meta property=\"og:description\" content=\"\u00bfAlguna vez os hab\u00edais planteado c\u00f3mo debe ser la longitud de un responsive email design? Es algo que a menudo se nos puede pasar por alto al dedicar tantos esfuerzos a\u00a0maquetar todo el contenido de la mejor forma posible. Hoy dedicaremos este post a debatir este asunto.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalresponse.es\/en\/longitud-responsive-email-design\/\" \/>\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-03-20T06:00:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/boceto_responsive_mockoup.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"472\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/longitud-responsive-email-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/\"},\"author\":{\"name\":\"Ariadna Gubern\",\"@id\":\"https:\/\/www.digitalresponse.es\/#\/schema\/person\/5e0e9b0842bdb4269390c815a805b8bf\"},\"headline\":\"\u00bfC\u00f3mo debe ser la longitud de un responsive email design?\",\"datePublished\":\"2017-03-20T06:00:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/\"},\"wordCount\":560,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/Bloque-de-contenido-1-300x225.png\",\"articleSection\":[\"Blog\",\"Dise\u00f1o de emails\",\"Email M\u00f3vil\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/\",\"url\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/\",\"name\":\"\u00bfC\u00f3mo debe ser la longitud de un responsive email design? - Digital Response\",\"isPartOf\":{\"@id\":\"https:\/\/www.digitalresponse.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/Bloque-de-contenido-1-300x225.png\",\"datePublished\":\"2017-03-20T06:00:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#primaryimage\",\"url\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/Bloque-de-contenido-1-300x225.png\",\"contentUrl\":\"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/Bloque-de-contenido-1-300x225.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.digitalresponse.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfC\u00f3mo debe ser la longitud de un responsive email design?\"}]},{\"@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":"\u00bfC\u00f3mo debe ser la longitud de un responsive email design? - 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\/longitud-responsive-email-design\/","og_locale":"en_GB","og_type":"article","og_title":"\u00bfC\u00f3mo debe ser la longitud de un responsive email design? - Digital Response","og_description":"\u00bfAlguna vez os hab\u00edais planteado c\u00f3mo debe ser la longitud de un responsive email design? Es algo que a menudo se nos puede pasar por alto al dedicar tantos esfuerzos a\u00a0maquetar todo el contenido de la mejor forma posible. Hoy dedicaremos este post a debatir este asunto.","og_url":"https:\/\/www.digitalresponse.es\/en\/longitud-responsive-email-design\/","og_site_name":"Digital Response","article_publisher":"https:\/\/www.facebook.com\/digitalresponse","article_published_time":"2017-03-20T06:00:36+00:00","og_image":[{"width":960,"height":472,"url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/boceto_responsive_mockoup.png","type":"image\/png"}],"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\/longitud-responsive-email-design\/#article","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/"},"author":{"name":"Ariadna Gubern","@id":"https:\/\/www.digitalresponse.es\/#\/schema\/person\/5e0e9b0842bdb4269390c815a805b8bf"},"headline":"\u00bfC\u00f3mo debe ser la longitud de un responsive email design?","datePublished":"2017-03-20T06:00:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/"},"wordCount":560,"commentCount":0,"publisher":{"@id":"https:\/\/www.digitalresponse.es\/#organization"},"image":{"@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/Bloque-de-contenido-1-300x225.png","articleSection":["Blog","Dise\u00f1o de emails","Email M\u00f3vil"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/","url":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/","name":"\u00bfC\u00f3mo debe ser la longitud de un responsive email design? - Digital Response","isPartOf":{"@id":"https:\/\/www.digitalresponse.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/Bloque-de-contenido-1-300x225.png","datePublished":"2017-03-20T06:00:36+00:00","breadcrumb":{"@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#primaryimage","url":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/Bloque-de-contenido-1-300x225.png","contentUrl":"https:\/\/www.digitalresponse.es\/wp-content\/uploads\/2017\/03\/Bloque-de-contenido-1-300x225.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalresponse.es\/longitud-responsive-email-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.digitalresponse.es\/"},{"@type":"ListItem","position":2,"name":"\u00bfC\u00f3mo debe ser la longitud de un responsive email design?"}]},{"@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\/8084","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=8084"}],"version-history":[{"count":0,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/posts\/8084\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/media?parent=8084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/categories?post=8084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/tags?post=8084"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/www.digitalresponse.es\/en\/wp-json\/wp\/v2\/post_folder?post=8084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}