Tamaño y dimensiones ideales de un newsletter (ancho, alto, KB): mejores prácticas de diseño responsive

El tamaño ideal de un newsletter es de 600 px de ancho (entre 600 y 640 px como máximo), sin un alto fijo, y con un código HTML que pese menos de 102 KB, porque Gmail recorta los mensajes más pesados. Las imágenes deben estar comprimidas y el mensaje principal debe verse en la primera pantalla, sin hacer scroll.

En este artículo verá las medidas recomendadas para cada parte del newsletter (ancho, alto, peso, cabecera, imágenes, pie de página), qué ocurre si su boletín es demasiado pesado, y los pasos y consejos para crear un diseño que se vea bien en cualquier dispositivo.

Resumen: medidas recomendadas para un newsletter

¿Qué es un boletín electrónico?

Un boletín de noticias por correo electrónico es una técnica de marketing que consiste en enviar periódicamente correos a un grupo de destinatarios, normalmente suscriptores que han aceptado recibirlos. Puede incluir noticias, información sobre los productos o servicios de la empresa, ofertas especiales y otros contenidos útiles para el lector.

Los boletines por correo electrónico o newsletters son una forma excelente de generar tráfico hacia su sitio web y construir su marca. Permiten llegar a clientes actuales y potenciales con contenidos relevantes, promocionar un producto, anunciar novedades o simplemente mantener el contacto.

Para que cumplan su función, deben verse bien en cualquier bandeja de entrada. Por eso el tamaño, tanto en píxeles como en kilobytes, importa.

¿Cuál es el ancho ideal de un newsletter?

La mayoría de las plantillas y proveedores trabajan con un cuerpo de 600 px de ancho, con unos 30 px de margen interior alrededor del contenido. Es la medida más segura: se ve completa en el panel de lectura de los clientes de correo de escritorio, como Outlook, y en webmails como Gmail o Apple Mail, sin desplazamiento horizontal.

Puede llegar hasta unos 640 px, pero no es recomendable ir más allá. Si su boletín es demasiado ancho, la parte derecha del contenido puede quedar cortada y los lectores tendrán que desplazarse horizontalmente. Si es demasiado estrecho, el mensaje y la marca pierden espacio.

En el móvil, un diseño responsive ajusta ese ancho al 100 % de la pantalla y apila las columnas una debajo de otra. Así, un mismo newsletter de 600 px se lee bien en un ordenador y en un teléfono.

¿Qué alto debe tener un newsletter?

No existe un alto estándar: el lector hace scroll y la longitud depende de su contenido. Como referencia, muchos newsletters miden entre 1.500 y 3.000 px de alto. Más que la cifra, importa el orden:

• Primera pantalla: logotipo, titular, mensaje principal y, si es posible, el botón de acción. Es lo que el lector ve antes de decidir si sigue leyendo.
• Cuerpo: los contenidos secundarios, ordenados por importancia.
• Final: pie de página con datos de contacto y enlace de baja.

Si un newsletter es demasiado largo, algunos lectores no llegarán al final y se perderán contenido valioso. Si tiene mucho que contar, resuma cada tema en unas líneas y enlace al artículo completo en su web.

¿Cuánto debe pesar un newsletter? (KB)

Aquí hay que distinguir dos pesos:

• El código HTML del email: Gmail recorta los mensajes cuyo HTML supera los 102 KB y muestra un enlace «Ver todo el mensaje». Lo que queda debajo, incluido a menudo el enlace de baja y el píxel que mide las aperturas, no se ve. Mantenga el HTML por debajo de ese límite: evite el código copiado desde Word, los estilos repetidos y los bloques innecesarios.
• Las imágenes: no cuentan en esos 102 KB porque se cargan desde un servidor, pero sí influyen en la velocidad de carga, sobre todo con datos móviles. Comprímalas y súbalas al tamaño en que se muestran.

Si envía a través de un relay SMTP o una API, tenga en cuenta además el tamaño máximo por mensaje que admite su proveedor. En Mailpro puede consultar el límite de tamaño de un boletín informativo.

¿Qué ocurre si su boletín es demasiado pesado?

Un newsletter pesado, con mucho contenido y muchos elementos visuales, tiene varios inconvenientes:

• Carga lenta: el lector ve espacios vacíos mientras se descargan las imágenes y puede cerrar el mensaje antes de que termine.
• Mensaje recortado: por encima de 102 KB de HTML, Gmail oculta el final del email.
• Peor entregabilidad: un email casi todo imagen y con poco texto puede parecer sospechoso a los filtros antispam. Mantenga un buen equilibrio entre imagen y texto.
• Lectura difícil: demasiada información abruma al lector, que no encuentra lo que busca.

Preencabezado y encabezado: medidas y buenas prácticas

El preencabezado es el texto que aparece junto al asunto en la bandeja de entrada, como vista previa del mensaje. Ofrece un breve resumen de lo que el lector encontrará y es un argumento más para que abra el email. Escriba una frase corta que complete el asunto en lugar de repetirlo; los clientes de correo muestran un número limitado de caracteres, que varía según el dispositivo. Más ideas en nuestra guía sobre el preencabezado del correo electrónico.

El encabezado es la parte superior del newsletter. Suele incluir el logotipo, los colores de la marca y, a veces, un menú o un enlace a la versión web. Debe permitir que el lector sepa de quién procede el email antes de leer una sola palabra.

El encabezado no debe superar el ancho del cuerpo (600 px). Para los banners, los tamaños más habituales son 600 × 300 px y 600 × 400 px; una cabecera de logotipo puede ser mucho más baja, de unos 100 a 200 px, para dejar sitio al contenido en la primera pantalla.

¿Qué tamaño deben tener las imágenes de un newsletter?

Las imágenes deben tener las dimensiones correctas para verse bien en todos los dispositivos:

• Imagen a todo el ancho: 600 px. Para que se vea nítida en pantallas de alta resolución puede exportarla a 1.200 px y mostrarla a 600 px, siempre comprimida.
• Imágenes en dos columnas: unos 280 px de ancho cada una.
• Imágenes de producto: formatos cuadrados o rectangulares homogéneos, por ejemplo 300 × 300 px, para que la cuadrícula quede ordenada.
• Formatos: JPG para fotografías, PNG para logotipos y gráficos con transparencia, GIF solo para animaciones cortas y ligeras.
• Texto alternativo: añada siempre un atributo alt, porque muchos clientes de correo bloquean las imágenes por defecto.

No ponga texto importante dentro de las imágenes: si no se cargan, el mensaje desaparece.

Tamaño de la letra y de los botones

Use un cuerpo de texto de 14 a 16 px y títulos de unos 22 a 28 px. Los botones deben medir al menos 44 px de alto y dejar espacio alrededor para que el lector no pulse el enlace equivocado en el móvil. Elija fuentes seguras o con alternativa; le ayudamos a elegir en nuestra selección de las mejores fuentes para email.

El pie de página también cuenta

El pie de página aparece al final de cada newsletter y aporta información adicional sobre su empresa: iconos de redes sociales, datos de contacto, dirección postal, avisos legales y el enlace de baja, obligatorio en los emails comerciales. Manténgalo breve y sencillo para no restar protagonismo al mensaje, y asegúrese de que se ve bien en todos los dispositivos. Una línea de texto de unos 500 px de ancho como máximo es una buena regla. Si quiere ir más lejos, consulte nuestra guía de diseño del pie de página de un email.

Pasos para crear un buen diseño de newsletter

Crear un diseño de newsletter eficaz es más sencillo de lo que parece si sigue estos pasos:

1. Elija una plantilla: parta de un diseño que se adapte a su objetivo. Mailpro ofrece más de 600 plantillas de boletines responsive, ya preparadas con el ancho adecuado, para que no tenga que preocuparse de que su newsletter se corte en algún cliente de correo.
2. Reúna el contenido: textos, imágenes y enlaces. Asegúrese de que todo es relevante y actual, y ordénelo por importancia.
3. Diseñe: coloque imágenes y textos en la plantilla con el editor de arrastrar y soltar. Use los colores y tipografías de su marca, y separadores o botones para guiar la lectura.
4. Optimice el peso: comprima las imágenes, elimine bloques vacíos y compruebe que el mensaje no supera el límite de recorte de Gmail.
5. Pruebe y envíe: antes de enviar, envíese una prueba y revísela en móvil, tableta y ordenador. Probar su boletín de noticias con antelación le permite comprobar que se ve igual en Outlook, Gmail y Apple Mail, y que no tiene elementos que puedan activar los filtros antispam. Cuando todo esté en orden, ¡envíelo!

¿Le gusta este newsletter? Comience a crear newsletters de forma rápida con Mailpro.

Consejos adicionales para un diseño de newsletter eficaz

No sobrecargue el diseño. Dé a cada elemento su propio espacio para que el lector entienda lo que ve sin sentirse abrumado. En lugar de muchas imágenes pequeñas, elija pocas imágenes de calidad que transmitan el mensaje.

Equilibre texto e imágenes. Las imágenes atraen la atención y aportan emoción y contexto, pero un email solo de imágenes es pesado y poco accesible. Un mensaje solo de texto, en cambio, puede resultar plano para un newsletter. Busque el equilibrio.

Personalice. Personalizar los boletines electrónicos con el nombre del lector u otros datos refuerza la conexión y la participación. Combinada con la segmentación, la personalización le permite adaptar el contenido a los intereses de cada grupo.

Piense primero en el móvil. Una gran parte de los emails se abre en el teléfono, así que es esencial optimizar los correos electrónicos para dispositivos móviles. Las plantillas responsive de Mailpro adaptan el diseño al tamaño de la pantalla para que cada lector tenga la misma experiencia, sea cual sea su dispositivo.

Revise el modo oscuro. Muchos lectores usan el modo oscuro, que puede invertir los colores. Use logotipos con fondo transparente y compruebe que el texto sigue siendo legible.

Preguntas frecuentes sobre el tamaño de un newsletter

¿Cuál es el tamaño estándar de un newsletter?

600 px de ancho, un alto variable según el contenido y un HTML de menos de 102 KB.

¿Por qué Gmail corta mi newsletter?

Porque el código HTML supera los 102 KB. Reduzca el código, elimine bloques innecesarios o divida el contenido en varios envíos.

¿Puedo hacer un newsletter más ancho de 600 px?

Puede llegar hasta unos 640 px, pero más allá se arriesga a que el contenido se corte en algunos clientes de correo o en el panel de lectura.

¿Qué tamaño debe tener la imagen de cabecera?

Entre 600 × 200 y 600 × 400 px, comprimida, para que no empuje el mensaje principal fuera de la primera pantalla.

Conclusión

Un newsletter eficaz mide 600 px de ancho, coloca lo esencial en la primera pantalla, pesa menos de 102 KB de HTML y usa imágenes ligeras y bien dimensionadas. Siga los pasos (plantilla, contenido, diseño, optimización y prueba) y los consejos anteriores, y su boletín se verá bien en cualquier dispositivo.

Con Mailpro puede crear fácilmente boletines perfectamente diseñados en muy poco tiempo. Elija una de nuestras plantillas listas para usar, adapte el contenido con el editor y pruebe su boletín con nuestro comprobador antispam antes de enviarlo a su audiencia.

¿Listo para crear el suyo? Pruebe el nuevo editor de boletines de Mailpro: todos los bloques que necesita, arrastrar y soltar, sin código.