{"id":37948,"date":"2014-10-07T07:21:44","date_gmt":"2014-10-07T07:21:44","guid":{"rendered":"https:\/\/wp.lvh.me\/blog\/2014\/10\/07\/las-10-claves-basicas-para-maquetar-tu-newsletter\/"},"modified":"2026-10-30T09:10:19","modified_gmt":"2026-10-30T09:10:19","slug":"las-10-claves-basicas-para-maquetar-tus-newsletters","status":"publish","type":"post","link":"https:\/\/mailrelay.com\/es\/blog\/2014\/10\/07\/las-10-claves-basicas-para-maquetar-tus-newsletters\/","title":{"rendered":"Medidas de una newsletter: tama\u00f1o, ancho y 10 claves para maquetarla bien"},"content":{"rendered":"\n

\u00bfQu\u00e9 medidas debe tener una newsletter? Entre 600 y 640 p\u00edxeles de ancho, im\u00e1genes al doble de resoluci\u00f3n y menos de 102 KB de HTML para que Gmail no la corte.<\/p>\n\n\n\n\n\n\n\n

El alto no tiene l\u00edmite, pero lo importante tiene que verse en la primera pantalla.<\/p>\n\n\n\n

Con esas tres medidas ya puedes empezar a maquetar. Pero una newsletter que se ve bien en tu ordenador puede romperse en el m\u00f3vil, en Outlook o en modo oscuro.<\/p>\n\n\n\n

En esta gu\u00eda tienes la tabla de medidas completa, c\u00f3mo se ve tu email en cada programa de correo y las 10 claves para maquetarlo sin sorpresas.<\/p>\n\n\n\n\n\n\n

Medidas de una newsletter: tabla de referencia<\/h2>\n\n\n\n

Estas son las medidas de un mailing que recomiendo en 2026. Sirven tanto si maquetas a mano en HTML como si usas un editor visual.<\/p>\n\n\n\n

Elemento<\/th>Medida recomendada<\/th>Por qu\u00e9<\/th><\/tr><\/thead>
Ancho del email<\/td>600-640 px<\/td>Se ve entero en el panel de lectura de los programas de escritorio y se adapta bien al m\u00f3vil<\/td><\/tr>
Alto del email<\/td>Sin l\u00edmite fijo<\/td>Lo que decide si sigue leyendo es la primera pantalla: unos 300-500 px<\/td><\/tr>
Imagen de cabecera<\/td>600 \u00d7 200-300 px (subida a 1.200 px de ancho)<\/td>Al doble de resoluci\u00f3n se ve n\u00edtida en pantallas retina<\/td><\/tr>
Im\u00e1genes del cuerpo<\/td>El ancho de su columna, subidas al doble<\/td>Una imagen de 300 px se sube a 600 px<\/td><\/tr>
Peso de cada imagen<\/td>Menos de 200 KB, como referencia<\/td>Carga r\u00e1pido incluso con datos m\u00f3viles<\/td><\/tr>
Peso del HTML<\/td>Menos de 102 KB<\/td>Por encima, Gmail corta el mensaje y muestra \u00ab[Mensaje recortado]\u00bb<\/td><\/tr>
Tama\u00f1o de letra del texto<\/td>16 px (m\u00ednimo 14 px)<\/td>Por debajo de 13 px, el iPhone lo ampl\u00eda y descoloca el dise\u00f1o<\/td><\/tr>
Tama\u00f1o de los titulares<\/td>22-28 px<\/td>Jerarqu\u00eda clara sin ocupar media pantalla<\/td><\/tr>
Botones<\/td>Al menos 44 \u00d7 44 px<\/td>Es el m\u00ednimo t\u00e1ctil que recomienda Apple para pulsar con el dedo<\/td><\/tr>
Preencabezado (preheader)<\/td>40-100 caracteres<\/td>Es lo que se lee junto al asunto en la bandeja de entrada<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"Infograf\u00eda<\/figure>\n\n\n\n

Si solo te quedas con una idea, que sea esta: 600 px de ancho y menos de 102 KB de HTML<\/strong>.<\/p>\n\n\n\n

Con eso evitas la mayor\u00eda de los problemas. El resto de medidas afinan el resultado.<\/p>\n\n\n\n

C\u00f3mo se ve tu newsletter en cada programa de correo<\/h2>\n\n\n\n

\u00bfPor qu\u00e9 hay que maquetar un email con tanto cuidado si una web se ve bien en cualquier navegador? Porque cada programa de correo interpreta el c\u00f3digo a su manera. Y no siempre de la forma que esperas.<\/p>\n\n\n\n

Seg\u00fan el informe de cuota de mercado de Litmus de septiembre de 2026, Apple Mail registra el 76,56 % de las aperturas.<\/p>\n\n\n\n

Le siguen Gmail, con el 16,10 %, y Outlook de escritorio, con el 3,48 %.<\/p>\n\n\n\n

Ojo con la cifra de Apple: la protecci\u00f3n de privacidad de Apple Mail abre los correos de forma autom\u00e1tica y la infla. Aun as\u00ed, te da una idea de d\u00f3nde tienes que probar.<\/p>\n\n\n\n

Programa de correo<\/th>Qu\u00e9 tener en cuenta al maquetar<\/th><\/tr><\/thead>
Apple Mail (iPhone y Mac)<\/td>Buen soporte de HTML y CSS. Aplica el modo oscuro y ampl\u00eda la letra peque\u00f1a<\/td><\/tr>
Gmail (web y app)<\/td>Corta los mensajes de m\u00e1s de 102 KB de HTML y puede invertir colores en modo oscuro<\/td><\/tr>
Outlook cl\u00e1sico para Windows<\/td>Usa el motor de Word: ignora muchas propiedades CSS y necesita tablas<\/td><\/tr>
Nuevo Outlook y Outlook.com<\/td>Motor web, mucho m\u00e1s parecido a un navegador<\/td><\/tr>
Yahoo Mail<\/td>Soporte correcto, pero conviene probar los botones y el modo oscuro<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

El caso m\u00e1s delicado sigue siendo el Outlook cl\u00e1sico.<\/p>\n\n\n\n

Microsoft est\u00e1 pasando a sus usuarios al nuevo Outlook, pero no ha fijado una fecha de fin para el cl\u00e1sico.<\/p>\n\n\n\n

Mientras siga en tantas empresas, maquetar con tablas es lo prudente.<\/p>\n\n\n\n

Qu\u00e9 tener en cuenta antes de dise\u00f1ar un email<\/h2>\n\n\n\n

Las medidas del mailing son la base t\u00e9cnica. Pero antes de abrir el editor conviene tener claras tres decisiones de dise\u00f1o.<\/p>\n\n\n\n

Vigila el peso de las im\u00e1genes<\/h3>\n\n\n\n

Las im\u00e1genes pesan. Una newsletter con cinco fotos sin comprimir puede tardar varios segundos en cargar con datos m\u00f3viles.<\/p>\n\n\n\n

Y si tarda, el lector se va.<\/p>\n\n\n\n

Comprime cada imagen antes de subirla y no uses una foto de 3.000 px donde se va a mostrar a 600.<\/p>\n\n\n\n

Tienes m\u00e1s detalle en la clave 8.<\/p>\n\n\n\n

Usa im\u00e1genes que acompa\u00f1en al mensaje<\/h3>\n\n\n\n

Una imagen tiene que contar lo mismo que el texto. Si vendes una escapada de monta\u00f1a, la foto de un valle hace parte del trabajo.<\/p>\n\n\n\n

Si promocionas ropa, ense\u00f1a las prendas.<\/p>\n\n\n\n

Lo que no funciona son las im\u00e1genes de relleno. Ocupan espacio, pesan y no aportan nada al lector.<\/p>\n\n\n\n

El dise\u00f1o sencillo tambi\u00e9n funciona<\/h3>\n\n\n\n

No todos los emails necesitan im\u00e1genes. En un env\u00edo promocional, el correo debe ser visual porque buscas una compra, un registro o una reserva.<\/p>\n\n\n\n

Pero si quieres cercan\u00eda o compartir una opini\u00f3n, un email casi de texto funciona igual de bien.<\/p>\n\n\n\n

\n
\n

A la hora de dise\u00f1ar un email, ya sea en HTML o con un editor visual, mi recomendaci\u00f3n siempre es la misma: cuanto m\u00e1s sencillo, mejor. No estamos creando una obra de arte, sino un email con un objetivo claro y concreto: vender, llevar tr\u00e1fico a la web o conseguir respuestas. S\u00ed, tiene que verse bien, pero no est\u00e1 para distraer al lector con su belleza, sino para que haga lo que buscas. Incluso en un email promocional, una buena foto del producto y un bot\u00f3n claro valen m\u00e1s que diez adornos. Sencillo y claro: casi siempre es el mejor consejo.<\/p>\nJose Argudo<\/strong>, CMO de Mailrelay<\/cite><\/blockquote>\n<\/div><\/div>\n\n\n\n

Estructura de la newsletter ideal<\/h2>\n\n\n\n

La estructura decide si el lector entiende tu mensaje en los primeros segundos. Esta es la que recomiendo, de arriba abajo:<\/p>\n\n\n\n

Zona<\/th>Qu\u00e9 poner<\/th>Medida orientativa<\/th><\/tr><\/thead>
Preencabezado<\/td>Una frase que complete el asunto<\/td>40-100 caracteres<\/td><\/tr>
Cabecera<\/td>Logo y, si hace falta, una imagen principal<\/td>600 \u00d7 200-300 px<\/td><\/tr>
Primera pantalla<\/td>Titular, una frase de contexto y el bot\u00f3n principal<\/td>Los primeros 300-500 px<\/td><\/tr>
Cuerpo<\/td>Bloques cortos de texto e imagen, de uno en uno<\/td>Columnas de 600 px o dos de 300 px<\/td><\/tr>
Llamada a la acci\u00f3n<\/td>Un bot\u00f3n claro con un verbo<\/td>M\u00ednimo 44 \u00d7 44 px<\/td><\/tr>
Pie<\/td>Datos de la empresa, enlace de baja y aviso legal<\/td>Letra de 12-14 px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Una regla que siempre funciona: un email, un objetivo. Si tienes tres cosas que contar, prioriza una y deja las otras para el siguiente env\u00edo.<\/p>\n\n\n\n

Y de nada sirve una buena estructura si despu\u00e9s env\u00edas lo mismo a toda tu lista: segmenta a tus suscriptores<\/a> para que cada uno reciba lo que le interesa.<\/p>\n\n\n\n

\n

Maqueta tus newsletters sin programar<\/strong><\/p>\n\n\n\n

Con el editor visual de Mailrelay creas newsletters que se ven bien en el m\u00f3vil sin escribir una l\u00ednea de HTML.<\/p>\n\n\n\n

\n
Crear cuenta gratis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

10 claves para maquetar tu newsletter<\/h2>\n\n\n\n

Estas son las 10 claves que reviso en cada newsletter antes de enviarla.<\/p>\n\n\n\n

Algunas son de dise\u00f1o y otras son t\u00e9cnicas, pero todas evitan problemas reales.<\/p>\n\n\n\n

1. Elige un dise\u00f1o sencillo y adaptable al m\u00f3vil<\/h3>\n\n\n\n

Un dise\u00f1o sencillo se ve bien en m\u00e1s sitios.<\/strong> Usa tipograf\u00edas est\u00e1ndar (Arial, Helvetica, Georgia o Verdana), fondos de color plano y una sola columna en el m\u00f3vil.<\/p>\n\n\n\n

La mayor\u00eda de tus suscriptores abrir\u00e1 el email en el tel\u00e9fono.<\/p>\n\n\n\n

Por eso el dise\u00f1o tiene que ser responsive<\/a>: que se adapte solo al ancho de la pantalla.<\/p>\n\n\n\n

Si dos columnas no caben, que pasen a una. Y si un bot\u00f3n queda peque\u00f1o, que crezca.<\/p>\n\n\n\n

2. Usa un HTML sencillo y a\u00f1ade versi\u00f3n de texto<\/h3>\n\n\n\n

Cuanto m\u00e1s simple sea el c\u00f3digo, menos sorpresas.<\/strong> Nada de JavaScript, formularios ni efectos que dependan de scripts: los programas de correo los bloquean por seguridad.<\/p>\n\n\n\n

Env\u00eda siempre una versi\u00f3n HTML y otra de texto plano. Si alguien no puede ver el HTML, leer\u00e1 el texto.<\/p>\n\n\n\n

En Mailrelay la versi\u00f3n de texto se genera sola a partir del HTML.<\/p>\n\n\n\n

As\u00ed las dos dicen lo mismo, y los filtros no desconf\u00edan de un mensaje con dos contenidos distintos.<\/p>\n\n\n\n

3. Maqueta con tablas<\/h3>\n\n\n\n

Las tablas siguen siendo la forma m\u00e1s fiable de maquetar un email.<\/strong> En una web usar\u00edas capas (div) y CSS moderno.<\/p>\n\n\n\n

En el correo no, porque el Outlook cl\u00e1sico para Windows usa el motor de Word y no entiende buena parte de ese CSS.<\/p>\n\n\n\n

Con tablas controlas el ancho, las columnas y los espacios en todos los programas. Un consejo: no anides m\u00e1s de tres niveles de tablas.<\/p>\n\n\n\n

A partir de ah\u00ed el c\u00f3digo se vuelve dif\u00edcil de mantener y pesa m\u00e1s.<\/p>\n\n\n\n

4. No pases de 600-640 px de ancho<\/h3>\n\n\n\n

Es la medida de mailing que mejor funciona en escritorio y m\u00f3vil.<\/strong> Los programas de escritorio muestran el correo en un panel de lectura m\u00e1s estrecho que la pantalla.<\/p>\n\n\n\n

Con 600-640 px el email cabe entero, sin barra de desplazamiento lateral.<\/p>\n\n\n\n

En el m\u00f3vil, un dise\u00f1o responsive reduce ese ancho al de la pantalla.<\/p>\n\n\n\n

Lo que no conviene es lo contrario: dise\u00f1ar a 800 o 1.000 px y esperar que se adapte.<\/p>\n\n\n\n

Los textos quedar\u00edan diminutos en el tel\u00e9fono.<\/p>\n\n\n\n

5. Aplica los estilos en l\u00ednea<\/h3>\n\n\n\n

Algunos programas de correo ignoran los estilos de la cabecera del email.<\/strong> Por eso, los estilos importantes (color, tama\u00f1o de letra, m\u00e1rgenes) van dentro de cada etiqueta con el atributo \u00abstyle\u00bb.<\/p>\n\n\n\n

As\u00ed te aseguras de que el texto se ve igual en Gmail, Outlook y Apple Mail.<\/p>\n\n\n\n

Los editores visuales, como el de Mailrelay, lo hacen por ti al guardar el dise\u00f1o.<\/p>\n\n\n

\n
\"Codifica<\/figure>\n<\/div>\n\n\n

6. Prepara bien tus im\u00e1genes<\/h3>\n\n\n\n

Las im\u00e1genes son lo que m\u00e1s se rompe en un email.<\/strong> Revisa siempre estos cuatro puntos:<\/p>\n\n\n\n

Qu\u00e9 revisar<\/th>Por qu\u00e9<\/th><\/tr><\/thead>
Estilo \u00abdisplay:block\u00bb en cada imagen<\/td>Gmail a\u00f1ade un espacio blanco entre im\u00e1genes que van juntas<\/td><\/tr>
Ancho y alto definidos en el c\u00f3digo<\/td>Evitas que se deformen mientras cargan<\/td><\/tr>
Texto alternativo (alt)<\/td>Si las im\u00e1genes est\u00e1n bloqueadas, el lector sabe qu\u00e9 hay<\/td><\/tr>
Formato JPG, PNG o GIF<\/td>Son los que entienden todos los programas. WebP todav\u00eda no<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Y no metas texto importante dentro de una imagen. Si no carga, el mensaje desaparece.<\/p>\n\n\n\n

Los GIF animados<\/a> s\u00ed funcionan, con una salvedad: el Outlook cl\u00e1sico solo muestra el primer fotograma.<\/p>\n\n\n

\n
\"Ejemplo<\/figure>\n<\/div>\n\n\n

7. No adjuntes archivos<\/h3>\n\n\n\n

Los adjuntos complican la entrega.<\/strong> Los filtros antispam miran con lupa los archivos doc, exe o zip, y adem\u00e1s aumentan mucho el tama\u00f1o del mensaje.<\/p>\n\n\n\n

Sube el archivo a tu web, a Google Drive o a Dropbox y pon un bot\u00f3n que enlace a \u00e9l.<\/p>\n\n\n\n

As\u00ed el email pesa menos y, adem\u00e1s, sabes cu\u00e1ntas personas lo descargan gracias a las estad\u00edsticas de clics.<\/p>\n\n\n\n

8. Optimiza el peso de las im\u00e1genes<\/h3>\n\n\n\n

Comprimir una imagen puede reducir su peso a la mitad sin que se note.<\/strong> Puedes usar herramientas gratuitas como TinyPNG o Squoosh, o exportar desde tu programa de edici\u00f3n con una calidad del 70-80 %.<\/p>\n\n\n\n

Usa JPG para fotos y PNG para logotipos o im\u00e1genes con fondo transparente.<\/p>\n\n\n\n

Y s\u00fabelas al doble del tama\u00f1o al que se ver\u00e1n: una imagen de 600 px de ancho se sube a 1.200 px.<\/p>\n\n\n\n

Se ver\u00e1 n\u00edtida en pantallas retina y, bien comprimida, seguir\u00e1 pesando poco.<\/p>\n\n\n\n

9. Incluye siempre el pie legal<\/h3>\n\n\n\n

El pie no es opcional.<\/strong> En Espa\u00f1a, la LSSI obliga a identificar al remitente y a ofrecer una forma sencilla y gratuita de darse de baja en cada comunicaci\u00f3n comercial.<\/p>\n\n\n\n

El RGPD exige adem\u00e1s informar de c\u00f3mo tratas los datos.<\/p>\n\n\n\n

Incluye en el pie el nombre y la direcci\u00f3n de tu empresa, el enlace de baja y un enlace a tu pol\u00edtica de privacidad.<\/p>\n\n\n\n

Desde 2024 Gmail y Yahoo, y desde 2025 Outlook, piden adem\u00e1s la baja con un solo clic a quien env\u00eda en volumen.<\/p>\n\n\n\n

Tienes los detalles en el glosario sobre el encabezado List-Unsubscribe<\/a>.<\/p>\n\n\n\n

10. Prueba antes de enviar<\/h3>\n\n\n\n

Nunca env\u00edes una newsletter sin probarla.<\/strong> M\u00e1ndate un email de prueba y \u00e1brelo en el m\u00f3vil y en el ordenador, en Gmail y en Outlook si puedes.<\/p>\n\n\n\n

Comprueba que las im\u00e1genes cargan, que los enlaces llevan donde deben y que el texto se lee sin hacer zoom.<\/p>\n\n\n\n

Si env\u00edas a listas grandes, herramientas como Litmus o Email on Acid te ense\u00f1an c\u00f3mo se ve en decenas de programas a la vez.<\/p>\n\n\n\n

\n

Prueba tu newsletter antes de enviarla<\/strong><\/p>\n\n\n\n

Env\u00edate un email de prueba desde Mailrelay y revisa c\u00f3mo se ve antes de mandarlo a tu lista.<\/p>\n\n\n\n

\n
Probar Mailrelay gratis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Modo oscuro: c\u00f3mo maquetar para que no se rompa tu dise\u00f1o<\/h2>\n\n\n\n

Cada vez m\u00e1s gente lee el correo en modo oscuro<\/a>.<\/p>\n\n\n\n

Y cada programa lo aplica a su manera: algunos solo cambian el fondo, otros invierten todos los colores.<\/p>\n\n\n\n

Un logo negro sobre fondo transparente puede desaparecer.<\/p>\n\n\n\n

Para que tu newsletter aguante el cambio:<\/p>\n\n\n\n