Email y newsletter
Email y newsletter
10 reglasFija el ancho del contenido en 600 px
Construye la columna del correo a un ancho fijo de 600px (algunos clientes de escritorio llegan a 640px en Gmail). Es el ancho que cabe sin scroll horizontal en el panel de lectura de Outlook, Gmail y Apple Mail. Ponlo en la <table> exterior como width="600" mas un max-width:600px inline, y deja que una tabla exterior al 100% la centre.
<table role="presentation" width="600" style="max-width:600px"> ... </table>
</td></tr></table>
Maqueta con tablas HTML, no con grid ni flexbox
Outlook de escritorio renderiza con el motor de Microsoft Word, que ignora flexbox, grid y la mayoria del CSS moderno. La <table> anidada con role="presentation" sigue siendo el unico layout fiable en todos los clientes. Usa cellpadding/cellspacing="0", border="0", y controla el espaciado con padding en el <td>, no con margenes.
<tr><td style="padding:24px"> ... </td></tr>
</table>
Da a cada imagen un atributo alt descriptivo
Muchos clientes (Outlook, Gmail con imagenes desactivadas) bloquean imagenes por defecto, asi que en el primer vistazo el lector ve cajas vacias. Un alt descriptivo mantiene legible el mensaje y ademas alimenta a los lectores de pantalla. Dale color de texto y fondo al alt por estilo inline para que el texto de reserva se lea, y nunca dejes alt="" en una imagen con significado.
Nunca encierres texto critico dentro de una imagen
Los bloqueadores de imagen esconden por completo el texto horneado en imagen, asi que un correo todo-imagen se lee vacio en el primer vistazo. El titular, la oferta central y el CTA deben existir como texto HTML real en una fuente web-safe, con las imagenes solo de refuerzo. Esto tambien protege la entregabilidad: los filtros de spam desconfian de correos solo-imagen con casi nada de texto.
Soporta el dark mode de email explicitamente
Agrega <meta name="color-scheme" content="light dark"> y <meta name="supported-color-schemes" content="light dark">, y luego define fondos y texto oscuros con !important dentro de un bloque @media (prefers-color-scheme: dark). Sin esto, Apple Mail y Outlook iOS invierten tus colores solos, ensucian tu paleta y rompen logos con fondo transparente.
<meta name="supported-color-schemes" content="light dark">
@media (prefers-color-scheme: dark) {
.body { background:#12181f !important; color:#fff !important }
}
Usa un logo probado transparente en ambos modos
Un PNG transparente con lineas oscuras se vuelve invisible cuando el cliente auto-invierte a dark. Entrega una variante por modo (intercambiala con una regla CSS de dark), o coloca el logo sobre una placa de color de marca solida que lea en ambos. Siempre previsualiza la bandeja real en oscuro; no confies en el editor claro.
Manten el HTML bajo 102 KB para evitar el recorte de Gmail
Gmail recorta los mensajes de mas de 102KB aprox. y muestra un enlace "Ver mensaje completo", que corta tu footer, pixel de seguimiento y enlace de baja del primer vistazo. Manten el HTML crudo bajo ~100KB, y optimiza cada imagen por separado (JPG q75-80, ≤200KB) porque el peso de imagen es aparte del conteo de bytes del HTML.
Imagen individual: ≤ 200 KB (JPG q75-80)
Construye el CTA como celda de tabla con padding, no como enlace estilizado
Un CTA por bloque, con altura tactil ≥44px y ancho generoso. Construyelo como celda de tabla con bgcolor y padding de celda envolviendo el <a>, porque algunos clientes ignoran border-radius y padding aplicados directo a un enlace. Asi toda el area de color es tappable, no solo el texto.
<a href="..." style="color:#fff;text-decoration:none">Comprar ahora</a>
</td>
Agrega preheader oculto justo despues del body
El preheader es la linea de preview que la bandeja muestra junto al asunto. Agrega un <span> oculto de 1px justo despues de <body> con un resumen del correo; si no, el cliente toma el primer texto suelto, casi siempre un enlace "Ver en navegador". Ocultalo con display:none;max-height:0;overflow:hidden, y siguelo de unos caracteres en blanco para que no se filtre texto del cuerpo.
Sirve las imagenes a 2x con el ancho fijado en HTML
Exporta el archivo de imagen al doble de pixeles de despliegue pero declara el width final en el atributo HTML y el CSS, para que se vea nitido en pantallas retina sin que el cliente renderice un bitmap nativo enorme. Un hero de 600px se entrega como archivo de 1200px desplegado a width="600". No subas a 3x-4x: el costo de peso rebasa la ganancia visible.
style="width:600px;max-width:100%;height:auto">
archivo real: 1200 px de ancho
- R-673 Fija el ancho del contenido en 600 px
- R-674 Maqueta con tablas HTML, no con grid ni flexbox
- R-675 Da a cada imagen un atributo alt descriptivo
- R-676 Nunca encierres texto critico dentro de una imagen
- R-677 Soporta el dark mode de email explicitamente
- R-678 Usa un logo probado transparente en ambos modos
- R-679 Manten el HTML bajo 102 KB para evitar el recorte de Gmail
- R-680 Construye el CTA como celda de tabla con padding, no como enlace estilizado
- R-681 Agrega preheader oculto justo despues del body
- R-682 Sirve las imagenes a 2x con el ancho fijado en HTML