Este es un tema muy complejo y es imposible cubrirlo en varios 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. Pero eso ha alterado.
Hablemos sobre el ancho aceptable de los emails, el mejor ancho de los elementos del e-mail, y cómo ajustar estos elementos a múltiples clientes de email, pantallas y dispositivos.
¿Cuál es el mejor ancho para los folletines de email?
Hay un que dice que el ancho de 600px es un mito. Estamos completamente de acuerdo con eso puesto que ahora hay más opciones que solo 600px de ancho, mas continúa siendo lo óptimo. Pero ¿cómo apareció este ancho? ¿Por qué es exactamente 600px?
Hace mucho 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 cambiado, mas 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 muy espacioso, con muchas columnas y también información útil:
Oímos que existen algunos clientes del servicio de e-mail que no procesan correctamente los e mails que tienen un ancho mayor de 650px.
Creé un e-mail, el ancho de la una parte del contenido fue de ochocientos sesenta píxeles. Funcionó bien en los principales clientes de correo electrónico, si bien el fondo no se mostraba en Outlook.com.
Y este es el correo electrónico que acabo de recibir:
(e-mail de MailNinja. El ancho del email 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 sobrepasa los 640 píxeles. Sin embargo, hay muchas pruebas con nuestra y muchos mails 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 email 800px. Gmail, macOS)
Otro mito es en Yahoo! E-mail, que puedes ver el correo electrónico con un ancho máximo de 650px. Sin embargo, mi email con un ancho de 810 píxeles tuvo tamaño completo en este cliente del servicio.
1) Si decides elegir 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 emails de marcas estadounidenses conocidas varían entre los seiscientos cuarenta y setecientos píxeles.
(Correo electrónico de Banana Republic. Ancho de email 640px. Gmail, macOS)
Entonces, ¿cómo poner el ancho en una plantilla de email 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.
1) ¿Cuál es la mejor altura para los folletines de email?
Por supuesto, la altura del e-mail es ilimitada. Podrías emplear tantas filas como necesites para mostrar todo el contenido. Mas recuerda que mientras que más largo el e-mail, menos probable será que lo lean hasta el final.
El alto total de una página web es 960px, que generalmente no basta para introducir toda la información que has preparado para compartir en el correo electrónico. No puedes escaparte de hacer scroll. El largo más común de los e-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 equiparados con los de otras industrias. Los e-mails de eCommerce también son muy largos, a pesar de que las tarjetas de producto suelen ser muy compactas, los marketers publican demasiados productos en un email.
Este es un ejemplo de una plantilla de email con un alto de dos mil quinientos cincuenta píxeles:
Como puedes ver, cuatro bloques de contenido diferentes se combinan fácilmente en un correo electrónico fácil de desplazar.
1.1) Nota importante:
En dispositivos móviles, debido al reacomodamiento de los bloques, el largo de las plantillas aumenta.
Si piensas que tu email será demasiado largo en dispositivos móviles, siempre y en toda circunstancia puedes ocultar ciertos elementos con Stripo.
1.2) Así que, ¿cómo ocultar elementos de email en dispositivos móviles?
- haz clic en el elemento en la plantilla para activar sus ajustes;
- en el panel de ajustes, baja para encontrar este control;
- listo. Los elementos de correo electrónico elegidos no se mostrarán en dispositivos móviles que soporten multimedia.
2) Dimensiones de vista anterior de email
Muchos clientes del servicio de email como Outlook, Apple Correo electrónico, 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 correo electrónico completo, sino captura un campo superior de un email con el tamaño de ventana de vista previa 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 e-mail no llegará a ser la mitad de tus contactos así que no es preciso mudar tu tamaño de plantilla.
Así es como luce la ventana de vista previa en el cliente del servicio e mail.com:
Back to top3) 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 bien como una versión web si hay problemas con el procesado del e-mail. Algunas marcas colocan información muy importante allí, como notificaciones sobre envío gratuito.
(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 bien poner elementos adicionales.
El tamaño del campo de preencabezado varía de 50px a 65px de alto. El ancho hereda las dimensiones del correo electrónico.
Cuando crees este elemento, necesitarás añadir un enlace a la “versión web” de tu correo electrónico.
3.1) ¿Cómo obtener en enlace a una versión web de tu email con Stripo?
- una vez que crees el e-mail, ve al modo de vista previa;
- en una ventana nueva, haz clic en el botón “Copy”;
- listo — el enlace 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 colocar con Stripo, a propósito. El texto de preencabezado se muestra solo en el modo vista previa.
El elemento de preencabezado se muestra en el correo electrónico también.
Back to top4) Tamaño de encabezado
La altura más común para un encabezado que no contiene un menú o bien un logotipo 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, pero 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 resaltar la identidad de tu marca y no se despedace en la bandeja de entrada de los usuarios.
Estos son ciertos ejemplos de buenos diseños de encabezado:
4.1) Nota importante:
Normalmente, un contiene 3-5 pestañas. Si añades más, por favor asegúrate de esconder los que estén de más para dispositivos móviles.
Para más información sobre cómo crear un encabezado del correo electrónico con Stripo, lee nuestra.
Back to top5) Tamaño de banner
Un es un espacio donde puedes incorporar tu creatividad y no deberías limitarte con tamaños. Mientras que menos contenido coloques 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 sitúan 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 emails experimentan con los tamaños de banner, si bien el ancho está limitado por el tamaño de plantilla, el largo puede ser diferente.
5.1) Nota importante:
Con Stripo, puedes elegir la manera del banner. Lleva 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 especiales, en tanto que el ancho hereda su tamaño del tamaño de plantilla, y el alto depende de la orientación que elijas.
El tipo de orientación más popular con los banners es horizontal.
Estos son algunos ejemplos de banners informativos y creativos:
Este es uno animado:
Back to top6) 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 pero, 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 para 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 clic en el texto del botón. Pueden hacer clic en cualquier parte que deseen.
También es muy importante cuidar de 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 emails en móviles.
A veces es difícil encontrar un botón o bien leer su CTA por el hecho de que 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 utilizado de un botón para banner:
Back to top7) Tamaño de imagen
Según el hecho de que el ancho de correo electrónico 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 en Pinterest. Stripo también brinda más de 10.000 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 bien fijar el radio con nuestro editor de imágenes, Pixie. Para entrar a este modo, debes hacer clic en el botón “editar” a la vera de la imagen en el panel de ajustes.
7.1) Nota importante:
Recuerda que debes comprimir las imágenes, de lo contrario tu correo electrónico será muy pesado y llevará un tiempo que el email se cargue en la pantalla de los lectores. Puedes hacerlo con Tiny.png u otra herramienta especial de este género.
Back to top8) Tamaño de bloque de contenido
El bloque de contenido consiste, normalmente, de texto, fragmento de foto/imagen, y botón.
Ya hemos hablado antes de los tamaños de imágenes y botones. En cuanto al texto, no hay límites, en tanto que siempre hereda su ancho de las filas de correo electrónico o bien bloques/contenedores. Puedes poner el copy arriba de las imágenes, debajo o por encima. Queda absolutamente a discreción.
Este es un ejemplo a la perfección hecho:
Back to top9) Un número de bloques de contenido
Nos atrevemos a decir “menos es más”. Emplea imágenes, mas no sobrecargues tu correo electrónico con fotos que no dan información útil y que no tiene relación con el tema del email.
No procures ocupar un email de productos que tienes en tu sitio, o nuevos productos o propuestas de venta. ES mejor publicar las mejores ofertas y dar un enlace al sitio web en el menú principal 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 3 bloques informativos diferentes. Cada vez que añadas un nuevo bloque, pregúntate si esa información es apta y si debe estar sí o sí.
Sin embargo, si quieres añadir un número de bloques a tus emails, puedes utilizar , , y que pueden ser más informativos que aun cientos de fotos.
Back to top10) 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. Ciertas 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í 100 por ciento . El pie de página clásico debería contener información de contacto, enlace 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 poner toda esta información.
Lee más sobre el en este artículo de nuestro blog. ¡No vaciles en compartirlo con tus amigos y colegas si te gustó!
Back to top11) 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 luego haz click 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 seleccionar si quieres que los botones se muestren en tamaño completo en los móviles o no.
(Dispositivo de escritorio)
(Pantalla móvil, botón de ancho completo)
Back to top12) Tamaño total de email
Si tu correo electrónico pesa mucho, no puedes asegurar que se mostrará en tamaño completo, especialmente en clientes como Gmail y Yahoo! E-mail. Tanto Gmail como Yahoo! Correo electrónico pesan el tamaño del código HTML de tu email, y recorta el email si el tamaño sobrepasa estos valores:
- el límite para Gmail es de ciento dos kb;
- para Yahoo! E mail el límite es 100 kb.
Podrías pesar tu correo electrónico con una herramienta de pruebas. Es totalmente sin coste.
El tamaño del e-mail de manera frecuente depende del editor que utilices. Por norma general, hay un código extra que se añade automáticamente cuando creas una plantilla de correo electrónico. Puedes borrar este código manualmente y reducir en buena medida el tamaño del correo electrónico como consecuencia, o bien 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 necesites.
Back to top13) Para resumir
Hemos analizado el ancho y alto de una plantilla de email generalmente y cada elemento separado particularmente. 600px de ancho no solo es seguro y fiable, con un 100 por cien de presentación adecuada en todos y cada uno de los dispositivos y clientes del servicio de e-mail, sino además es lo más conocido para los usuarios.
El alto depende del largo del contenido, pero no debería sobrepasar los 2500px en el mejor de los casos. Mientras más imágenes emplees, más importante es que utilices un torno de imágenes. A veces necesitas que también sea optimado el código HTML.
No existen reglas precisas que dicten las dimensiones de los elementos del e-mail, así que podrías probar con las formas y tamaños, pero no hagas que la plantilla sea poquísimo común y rara para los usuarios. Solo consume tu creatividad en las imágenes que escojas y el texto que escribas. Te queremos la mejor de las suertes en el proceso de creación de correo electrónico.
Back to top
