¿Cuál es la mejor altura para los boletines de e-mail?

¿Cuál es la mejor altura para los boletines de e-mail?

15 Jul 2020 in

Tabla de contenido

Este es un tema muy complejo y es imposible cubrirlo en unos cuantos párrafos.

El ancho estándar de la  era de 600 píxeles para escritorio, 320px para vista vertical y 480px para vista horizontal en dispositivos móviles. La altura no tenía límites y dependía del largo del contenido. Hace unos pocos años, los 600px de ancho eran un estándar obligatorio y no había opciones alternativas.  Mas eso ha alterado.

Hablemos sobre el ancho admisible de los correos electrónicos, el mejor ancho de los elementos del correo electrónico, y cómo ajustar estos elementos a múltiples clientes de correo electrónico, pantallas y dispositivos.

¿Cuál es el mejor ancho para los boletines de correo electrónico?

Hay un  que dice que el ancho de 600px es un mito. Estamos absolutamente de acuerdo con eso ya que ahora hay más opciones que solo 600px de ancho, pero continúa siendo lo óptimo. Mas ¿cómo apareció este ancho? ¿Por qué es precisamente 600px?

Hace bastante tiempo, la resolución de la pantalla estaba lejos de ser perfecta. Y muchos de los dispositivos eran más pobres que lo que son ahora. Ahí fue cuando apareció el ancho de 600px. Desde entonces, muchas de las cosas han alterado, pero el ancho de 600px se ha convertido en una base del diseño de e-mail.

Entonces, 600px de ancho es más una tradición que una regla, y te garantiza cien por ciento que se mostrará adecuadamente. No está mal, ¿cierto?

Mira este estupendo email HTML con un ancho ordinario de 600px. Puede ser realmente espacioso, con muchas columnas e información útil:

Oímos que existen algunos clientes del servicio de correo electrónico que no procesan adecuadamente los correos electrónicos que tienen un ancho mayor de 650px.

Creé un correo electrónico, el ancho de la parte del contenido fue de ochocientos sesenta píxeles. Funcionó bien en los principales clientes del servicio de e-mail, si bien el fondo no se mostraba en Outlook.com.

Y este es el e-mail que acabo de recibir:

(correo electrónico de MailNinja. El ancho del correo electrónico es de setecientos cuarenta píxeles. Gmail, macOS)

También existe la creencia de que Gmail no muestra un color de fondo si el tamaño de tu plantilla de email excede los 640 píxeles. Sin embargo, existen muchas pruebas con nuestra  y muchos emails que abrí en mi cuenta de Gmail demostró lo contrario, los emails se cargan a la perfección, y los fondos también.

(correo electrónico de Forbes Daily Dozen. Ancho de e-mail 800px. Gmail, macOS)

Otro mito es en Yahoo! Correo electrónico, que puedes ver el correo electrónico con un ancho máximo de 650px. Sin embargo, mi correo electrónico con un ancho de ochocientos diez píxeles tuvo tamaño completo en este usuario.

1) Si decides seleccionar un ancho que sea diferente de 600px, solo  antes de mandarlo con nuestra  que te dará las imágenes de cómo se mostrará tu correo electrónico en diferentes clientes y dispositivos.

Hemos sentido que el ancho promedio de e-mails de marcas estadounidenses conocidas varían entre los 640 y 700 píxeles.

(Correo electrónico de Banana Republic. Ancho de correo electrónico 640px. Gmail, macOS)

Entonces, ¿cómo poner el ancho en una plantilla de e-mail con Stripo?

Por defecto, ¡ya es de seiscientos píxeles!

Pero si quisieses colocar tu propio tamaño, necesitas:

  • hacer clic en la pestaña Apariencia en el editor;
  • hacer click en la pestaña Ajustes Generales;
  • establecer el ancho necesario.
Back to top

1) ¿Cuál es la mejor altura para los folletines de correo electrónico?

Por supuesto, la altura del correo electrónico es ilimitada. Podrías emplear tantas filas como necesites para enseñar todo el contenido. Mas recuerda que mientras que más largo el email, menos probable será que lo lean hasta el final.  

El alto total de una página web es 960px, que usualmente no basta para introducir toda la información que has dispuesto para compartir en el e-mail. No puedes escaparte de hacer scroll. El largo más común de los mails varían de 1500px a 2000px. Eso es, por norma general, suficiente para enseñar el contenido y fácil de ver haciendo scroll para los usuarios.

Un hecho interesante es que aquellos correos electrónicos que pertenecen a temas de turismo son los más largos comparados con los de otras industrias. Los correos electrónicos de eCommerce también son larguísimos, pese a que las tarjetas de producto acostumbran a ser realmente compactas, los marketers publican demasiados productos en un solo correo electrónico.

Este es un caso de una plantilla de email con un alto de dos mil quinientos cincuenta píxeles:

Como puedes ver, 4 bloques de contenido diferentes se combinan fácilmente en un email fácil de mover.

1.1) Nota importante:

En dispositivos móviles, debido al reacomodamiento de los bloques, el largo de las plantillas aumenta. 

Si piensas que tu correo electrónico será demasiado largo en dispositivos móviles, siempre y en toda circunstancia puedes esconder ciertos elementos con Stripo.

1.2) Así que, ¿cómo ocultar elementos de email en dispositivos móviles?

  • haz click en el factor en la plantilla para activar sus ajustes;
  • en el panel de ajustes, baja para localizar este control;
  • listo. Los elementos de e-mail elegidos no se mostrarán en dispositivos móviles que aguanten multimedia. 
Back to top

2) Dimensiones de vista previa de email

Muchos clientes del servicio de email como Outlook, Apple E mail, Thunderbird tienen una ventana de previsualización que tiene un tamaño limitado - 600px de ancho y píxeles de alto. No muestran la copia disminuida del email completo, sino atrapa un campo superior de un e-mail con el tamaño de ventana de vista anterior apropiado.  

Asegúrate de que los primeros 300px-500px contengan información valiosa que lleve a los lectores a abrir y leer un email. Una buena primera impresión es mejor que miles y miles de likes.

La gente que usa estos clientes de correo electrónico no llegará a ser la mitad de tus contactos así que no resulta necesario mudar tu tamaño de plantilla.  

Así es como luce la ventana de vista previa en el cliente del servicio correo.com:

Back to top

3) Tamaño de preencabezado

El preencabezado es una línea/elemento que va arriba en la plantilla. Está compuesto de un pequeño mensaje de introducción que aparece con una opción para poder ver el correo electrónico en el navegador o como una versión web si hay inconvenientes con el procesado del e-mail. Ciertas marcas colocan información muy importante allí, como notificaciones sobre envío gratis. 

(e-mail de Adidas)

De pacto con el hecho de que este campo es más técnico que contextual, no deberías hacerlo grande o colocar elementos adicionales.

El tamaño del campo de preencabezado varía de 50px a 65px de alto. El ancho hereda las dimensiones del email.

Cuando crees este elemento, necesitarás añadir un enlace a la “versión web” de tu e-mail.

3.1) ¿Cómo conseguir en enlace a una versión web de tu correo electrónico con Stripo?

  • una vez que crees el correo electrónico, ve al modo de vista previa;
  • en una ventana nueva, haz clic en el botón “Copy”;
  • listo — el link se ha guardado en el portapapeles.

3.2) Nota importante:

Ahora hablamos del preencabezado como elemento de un e-mail. Mas también está el texto de preencabezado, que puedes poner con Stripo, a propósito. El texto de preencabezado se muestra solo en el modo perfecto vista anterior. 

El elemento de preencabezado se muestra en el correo electrónico también.

Back to top

4) Tamaño de encabezado

La altura más común para un encabezado que no contiene un menú o un logo grande es de 70px. Para quienes tienen una barra de menú, el encabezado podría ser ciento cincuenta a 200px de alto. El alto del encabezado que supere los 300px no es recomendable para leer.

Hay cientos y miles de estilos que se emplea para el diseño del encabezado, mas deberías escoger uno que sea fácil de emplear y capaz para dispositivo móvil. Además de esto, elige el estilo y esquema de colores que pueda destacar la identidad de tu marca y no se despedace en la bandeja de entrada de los usuarios.

Estos son algunos ejemplos de buenos diseños de encabezado:

4.1) Nota importante:

Normalmente, un  contiene tres-5 pestañas. Si añades más, por favor asegúrate de ocultar los que estén de más para dispositivos móviles. 

Para más información sobre cómo crear un encabezado del e-mail con Stripo, lee nuestra.

Back to top

5) Tamaño de banner

Un  es un espacio donde puedes implementar tu creatividad y no deberías limitarte con tamaños. Mientras que menos contenido pongas ahí, mejores resultados obtendrás. Mientras más claro tu llamado a la acción, más conversiones tendrás.

No deberías guardar espacio entre las líneas de texto; puedes probar con los tamaños de fuente. Los banners más populares tienen una imagen como fondo y se ubican justo después del encabezado.

Los tamaños más comunes para banner son 600px x 300px, y 600px x 400px. Muchos diseñadores de e-mails experimentan con los tamaños de banner, aunque el ancho está limitado por el tamaño de plantilla, el largo puede ser diferente.

5.1) Nota importante:

Con Stripo, puedes elegir la forma del banner.  Tiene por nombre orientación. Puede ser vertical cuando el alto es más largo que el ancho, cuadrado y horizontal cuando el ancho no es mayor que el alto. 

Eligiendo cualquiera, no tendrás que establecer parámetros singulares, puesto que el ancho hereda su tamaño del tamaño de plantilla, y el alto depende de la orientación que escojas.

El tipo de orientación más popular con los banners es horizontal. 

Estos son ciertos ejemplos de banners informativos y creativos:

Este es uno animado:

Back to top

6) Tamaño del botón

No hay ancho estándar para los botones. El requerimiento común es que el botón debe contrastar con los demás elementos del email mas, al mismo tiempo, coincidir orgánicamente con el diseño.

Para que tu botón sea notable y cliqueable, deberías trabajar en su diseño y en su tamaño.

Si el copy CTA es corto, aquí viene el espacio en blanco al rescate a fin de que tu botón sea más ancho. En Stripo, se llama “internal padding” (relleno interno).

No te preocupes. Debido a nuestro diseño único, este espacio en blanco es cliqueable :)
Los lectores no necesitan hacer click en el texto del botón. Pueden hacer clic en cualquier parte que deseen.

También es fundamental cuidar a tu audiencia en dispositivos móviles y hacer botones lo más grande posible para que los lectores puedan tocarlo con el pulgar y no tocar otros elementos cuando lean tus e-mails en móviles.

A veces es difícil localizar un botón o bien leer su CTA porque es muy pequeño y su fuente es difícil de leer.

6.1) Entonces, ¿cómo ampliar la fuente de tu botón y hacer que los botones tengan ancho completo en móviles?

Para poner una fuente más grande en los botones CTA en dispositivos móviles, necesitas:

  • ir a la pestaña “Apariencia”;
  • ir a la sección “vista de móvil”;
  • fijar el tamaño de texto de botón necesario;
  • y activar el botón “ancho completo”.

16 píxeles es el tamaño más común para texto de botones. 

Este es un caso para enseñar el contraste:

Este es un ejemplo más usado de un botón para banner:

Back to top

7) Tamaño de imagen

Según el hecho de que el ancho de e-mail promedio es 600px - 640px, el ancho de imagen hereda el tamaño del e-mail cuando charlamos de banners. Hay toneladas de imágenes con este ancho en stocks o bien en Pinterest. Stripo también brinda más de diez imágenes en su banco.   

En cuanto a las tarjetas de producto, no hay estándares.

Por lo tanto, la altura es un ajuste proporcional al ancho establecido. En el momento en que hayas cargado tu imagen, puedes cambiar su ancho, y el alto se cambiará proporcionalmente, esto es, se guardará la relación ancho a alto.

En Stripo, puedes recortar imágenes, o fijar el radio con nuestro editor de imágenes, Pixie. Para entrar a este modo, tienes que hacer click en el botón “editar” al lado de la imagen en el panel de ajustes. 

7.1) Nota importante:

Recuerda que debes comprimir las imágenes, en caso contrario tu email será muy pesado y llevará un tiempo que el correo electrónico se cargue en la pantalla de los lectores. Puedes hacerlo con Tiny.png u otra herramienta singular de esta clase.

Back to top

8) Tamaño de bloque de contenido

El bloque de contenido consiste, por norma general, de texto, fragmento de foto/imagen, y botón.

Ya hemos hablado ya antes de los tamaños de imágenes y botones. En lo que se refiere al texto, no hay límites, ya que siempre y en toda circunstancia hereda su ancho de las filas de email o bloques/contenedores. Puedes colocar el copy arriba de las imágenes, debajo o bien por encima. Queda absolutamente a discreción.

Este es un caso perfectamente hecho:

Back to top

9) Un número de bloques de contenido

Nos atrevemos a decir “menos es más”. Usa imágenes, pero no sobrecargues tu correo electrónico con fotos que no dan información útil y que no tiene relación con el tema del e-mail.

No intentes ocupar un e-mail de productos que tienes en tu sitio, o bien nuevos productos o propuestas de venta. ES mejor publicar las mejores ofertas y dar un enlace al sitio web en el menú primordial y en un pie de página. Está la regla de hacer no más de 6-9 tarjetas de compra en un email como se hizo aquí:

Es mejor hacer tus bloques de contenido no mayores de 900px de largo. Eso es suficiente para hacer tres bloques informativos diferentes. Cada vez que agregues un nuevo bloque, pregúntate si esa información es apta y si ha de estar sí o sí.

Sin embargo, si deseas añadir un número de bloques a tus e mails, puedes usar  , , y  que pueden ser más informativos que incluso cientos y cientos de fotografías.

Back to top

10) Tamaño del pie de página

En realidad, algunas empresas añaden menús a sus pies de página, entonces son más grandes que las variantes clásicas de este elemento. Algunas empresas brindan la dirección completa con código postal, etcétera, entonces sus pies de página son lo suficientemente grandes.

Prefiero los pies de página lacónicos, que contiene la información que debería estar ahí cien por cien . El pie de página clásico debería contener información de contacto, link para darse de baja, íconos de redes sociales, y la razón por la que te comunicas con los lectores. Eso es todo, entonces los 600px x 200px comunes son más que suficiente para colocar toda esta información.

Lee más sobre el en este artículo de nuestro blog. ¡No dudes en compartirlo con tus amigos y colegas si te gustó!

Back to top

11) Vista de dispositivo móvil

Queremos recordarte que puedes establecer parámetros singulares para todos y cada uno de los elementos para la vista de dispositivo móvil — serán diferentes a la vista de escritorio.

Para entrar al modo ajustes, haz clic en la pestaña “Apariencia” en el panel de ajustes, y después haz clic en la sección “Vista de dispositivo móvil”.

11.1) Aquí, puedes establecer parámetros especiales individuales para:

  • el tamaño de texto de los elementos del bloque “Menú”;
  • el tamaño de texto de los encabezados;
  • el tamaño de texto de los pies de página;
  • el tamaño de texto de los elementos de contenido;
  • el tamaño de texto para encabezados 1 - 3;
  • alineaciones para tus encabezados;
  • tamaño de texto de botón;
  • y elegir si quieres que los botones se muestren en tamaño completo en los móviles o bien no.

(Dispositivo de escritorio)

(Pantalla móvil, botón de ancho completo)

Back to top

12) Tamaño total de email

Si tu correo electrónico pesa mucho, no puedes asegurar que se mostrará en tamaño completo, en especial en clientes como Gmail y Yahoo! E-mail. Tanto Gmail como Yahoo! E-mail pesan el tamaño del código HTML de tu e-mail, y recorta el correo electrónico si el tamaño sobrepasa estos valores:

  • el límite para Gmail es de ciento dos kb;
  • para Yahoo! Correo electrónico el límite es cien kb.

Podrías pesar tu email con una herramienta de pruebas. Es totalmente gratis.

El tamaño del email a menudo depende del editor que uses. Por norma general, hay un código extra que se añade automáticamente cuando creas una plantilla de e-mail. Puedes borrar este código manualmente y reducir en buena medida el tamaño del correo electrónico como consecuencia, o seleccionar un editor que haga eso. Stripo es uno de esos, y brinda código HTML puro sin caracteres del sistema. Comprueba esto cuando crees una plantilla que desees o bien precises.

Back to top

13) Para resumir

Hemos analizado el ancho y alto de una plantilla de e-mail en general y cada elemento separado en particular. 600px de ancho no solo es seguro y fiable, con un 100 por ciento de presentación correcta en todos los dispositivos y clientes del servicio de e-mail, sino que además es lo más conocido para los usuarios.

El alto depende del largo del contenido, pero no debería exceder los 2500px en el mejor de los casos. Mientras que más imágenes emplees, más importante es que emplees un torno de imágenes. En ocasiones precisas que también sea optimado el código HTML.

No existen reglas precisas que dicten las dimensiones de los elementos del correo electrónico, así que podrías experimentar con las formas y tamaños, pero no hagas que la plantilla sea muy poco común y extraña para los usuarios. Solo consume tu inventiva en las imágenes que elijas y el texto que escribas. Te queremos la mejor de las suertes en el proceso de creación de e-mail.

Back to top
Share icon

Solicita información sin compromiso

Políticas de privacidad

De conformidad con lo dispuesto en la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal (LOPD) y su normativa de desarrollo, el responsable del sitio web, CITIFACE MANAGEMENT, S.L., en cumplimiento de lo dispuesto en el art. 5 y 6 de la LOPD, informa a todos los usuarios del sitio web www.citiface.com que faciliten, o vayan a facilitar sus datos personales, que estos serán incorporados a un fichero que se encuentra debidamente inscrito en la Agencia Española de Protección de Datos.

Consentimiento del usuario:
Mediante la marcación de las correspondientes casillas, en los formularios dispuestos en el sitio web para la recogida de datos, los usuarios aceptan expresamente y de forma libre e inequívoca que sus datos personales sean tratados con las finalidades y destinos que se detallarán a continuación.

Finalidad
Los datos que se faciliten a través del portal, se destinarán a la finalidad de responder a su solicitud de información, así como a remitirle información que consideremos que pueda ser de su interés. Incluyendo para ello medios electrónicos (email, sms, etc..). Asimismo, y si usted nos lo indica, le remitiremos a su correo electrónico nuestro boletín electrónico SEO/SEM en el que le trasladaremos recomendaciones y herramientas para la mejora de sus campañas de posicionamiento y pago por clic. Los envíos serán con carácter mensual y podrá dejar de recibirlos en cualquier momento a través del mecanismo establecido en el propio email.

Calidad de datos
Los datos marcados como obligatorios en el formulario que usted cumplimente, son necesarios para la prestación de un servicio óptimo al usuario y dar respuesta a sus requerimientos. En caso de que no sean facilitados todos los datos obligatorios, el prestador no garantiza la prestación de los servicios solicitados.
El usuario será el único responsable, respecto a la veracidad y actualización de los datos aportados a través de los distintos formularios del sitio web

Comunicación de datos a terceros
Sus datos personales no serán cedidos, en ningún caso, a terceras compañías, y que siempre que fuera a realizarse algún tipo de cesión de datos personales, de forma previa, se solicitaría el consentimiento expreso, informado, e inequívoco por parte de los titulares. Ejercicio de derechos ARCO
El prestador garantiza en todo caso al usuario el ejercicio de los derechos de acceso, rectificación, cancelación, información y oposición, en los términos dispuestos en la legislación vigente. Por ello, de conformidad con lo dispuesto en la LOPD, podrá ejercer sus derechos remitiendo una solicitud expresa, junto a una copia de su DNI, a través del correo electrónico: info[at]citiface.com o Calle Farell 3, 1-1. 08014 Barcelona .

Medidas de seguridad
Del mismo modo, el prestador, conforme a lo establecido en el Real Decreto 1720/2007, de 21 de diciembre, por el que se aprueba el Reglamento de desarrollo de la L.O. 15/1999, indica que ha adoptado todas las medidas técnicas y organizativas necesarias para garantizar la seguridad e integridad de los datos de carácter personal que trate, así como para evitar su pérdida, alteración y/o acceso por parte de terceros no autorizados.

Menores de edad
Se prohíbe, expresamente, a los menores de 14 años, facilitar ningún dato a través del presente sitio web, sin contar con el consentimiento y supervisión de sus padres o tutores legales.
Si el prestador tuviera noticia acerca de la infracción de la referida prohibición, procederá a la eliminación de cualquier dato asociado al usuario en cuestión.

Uso de cookies y del fichero de actividad
El prestador por su propia cuenta o la de un tercero contratado para la prestación de servicios de medición, pueden utilizar cookies cuando un usuario navega por el sitio web. Las cookies son ficheros enviados al navegador por medio de un servidor web con la finalidad de registrar las actividades del usuario durante su tiempo de navegación.
Las cookies utilizadas por el sitio web se asocian únicamente con un usuario anónimo y su ordenador, y no proporcionan por sí mismas los datos personales del usuario.
Mediante el uso de las cookies resulta posible que el servidor donde se encuentra la web, reconozca el navegador web utilizado por el usuario con la finalidad de que la navegación sea más sencilla, permitiendo, por ejemplo, el acceso a los usuarios que se hayan registrado previamente, acceder a las áreas, servicios, promociones o concursos reservados exclusivamente a ellos sin tener que registrarse en cada visita. Se utilizan también para medir la audiencia y parámetros del tráfico, controlar el progreso y número de entradas.
Puede Usted rechazar el tratamiento de los datos o la información rechazando el uso de cookies mediante la selección de la configuración apropiada de su navegador, sin embargo, debe Usted saber que si lo hace puede ser que no pueda usar la plena funcionabilidad de este website.
Este sitio web utiliza Google Analytics, un servicio analítico de web prestado por Google, Inc., una compañía de Delaware cuya oficina principal está en 1600 Amphitheatre Parkway, Mountain View (California), CA 94043, Estados Unidos («Google»). Google Analytics utiliza «cookies», que son archivos de texto ubicados en su ordenador, para ayudar al website a analizar el uso que hacen los usuarios del sitio web. La información que genera la cookie acerca de su uso del website (incluyendo su dirección IP) será directamente transmitida y archivada por Google en los servidores de Estados Unidos. Google usará esta información, por cuenta nuestra, con el propósito de seguir la pista de su uso del website, recopilando informes de la actividad del website y prestando otros servicios relacionados con la actividad del website y el uso de Internet.
Google podrá transmitir dicha información a terceros cuando así se lo requiera la legislación, o cuando dichos terceros procesen la información por cuenta de Google. Google no asociará su dirección IP con ningún otro dato del que disponga Google.
Puede Usted rechazar el tratamiento de los datos o la información rechazando el uso de cookies mediante la selección de la configuración apropiada de su navegador, sin embargo, debe Usted saber que si lo hace puede ser que no pueda usar la plena funcionalidad de este website. Al utilizar este website Usted consiente el tratamiento de información acerca de Usted por Google en la forma y para los fines arriba indicados. En todo caso, le informamos que para instar a la cancelación de los posibles tratamientos de datos llevados a cabo por Google, deberá dirigirse a esa compañía, a tal efecto. El prestador no tiene la capacidad técnica ni legal, para proceder al cese en el tratamiento de datos fuera del ámbito delimitado por los ficheros y medios técnicos de su titularidad. Y no se le podrán exigir responsabilidades en este sentido. Para conocer más acerca de las cookies es.wikipedia.org/wiki/Cookie_(informática)

SEMrush

SEMrush

SEMrush

ESTOS EXCLUSIVOS INFORMES GRATUITO REVELAN

7 SECRETOS DE EXPERTOS SEO QUE TE LLEVÁN AL 1#
7 SECRETOS DE EXPERTOS SEO QUE TE LLEVÁN AL 1# EN GOOGLE PARA GANAR 10.000s DE TRÁFICO DE CALIDAD GRATUITO - EN SÓLO 2 MESES
 

Los 7 pasos más poderosos para disparar tu ranking orgánico para ALCANZAR Y MANTENER un impresionante tráfico orgánico es TUYO.

Consigue gratis lo que el 1% de los expertos en SEO venden por miles de euros... y el otro 99% ni siquiera sabe que existe.


OBTEN MI INFORME GRATUITO
5 errores que debes evitar en tu sitio web de Drupal
Ebook - 5 errores que debes evitar en tu sitio web de Drupal (¡podrían costarte miles de euros!)
 

Este Ebook cubre 5 terribles errores que probablemente estés cometiendo ahora mismo con tu sitio web de Drupal.

¡Nº3 TE SORPRENDERÁ! Esta lectura de 10 minutos te ahorrará miles de euros.



OBTEN MI INFORME GRATUITO