Previsualizador de correo HTML
Ve tu correo en Gmail en escritorio y móvil

Qué te muestra un previsualizador de correo HTML

Un previsualizador de correo HTML muestra tu correo antes de que lo vea nadie más. De hecho, pegas el código y la página lo dibuja como lo haría Gmail. Luego lo compruebas en un ordenador y en un móvil.

Eso ahorra problemas reales. Gmail reescribe mucho más de lo que casi todos imaginan. Quita algunas etiquetas, ignora parte del CSS y recorta los mensajes largos. Por eso una mirada rápida ahora vale más que un correo roto después.

Además, este previsualizador sigue las reglas que Google escribe para los desarrolladores. Lee la misma lista de propiedades CSS admitidas que publica Google. Como resultado, las comprobaciones vienen de la fuente y no de suposiciones.

Ningún servidor interviene, porque tu navegador dibuja la vista previa. También, tu correo, con sus nombres y sus ofertas, nunca sale de esta página.

Previsualiza un correo antes de enviarlo

Pega o abre tu HTML y la vista previa aparece al instante. Ni siquiera hace falta tocar un botón para ver el resultado. Si solo quieres echar un vistazo, elige un ejemplo y pulsa Probar un ejemplo.

La vista previa vive en un cuadro propio. Igualmente, el CSS de tu correo no puede tocar esta página, y esta página no puede tocar tu correo. Así la vista previa se mantiene fiel.

Vista previa de correo en escritorio y móvil

Escritorio muestra tu correo a 760 píxeles de ancho, cerca del ancho del panel de lectura de Gmail. Móvil lo muestra a 375 píxeles, el ancho de un móvil común.

Así, las media queries reaccionan a esos anchos. Una regla para pantallas de hasta 480 píxeles se activa cuando eliges Móvil. Así ves cómo dos columnas se apilan en una.

Cómo lee Gmail tu CSS

Google mantiene una página llamada CSS support in Gmail. Lista cada propiedad que admite Gmail. Gmail ignora todo lo demás.

De hecho, pon Reglas en Gmail y el previsualizador descarta todo lo que la lista deja fuera. Por ejemplo, box-shadow, position y los diseños flex desaparecen. Pon Reglas en Navegador normal y no descarta nada, así puedes comparar los dos.

Selectores y media queries en Gmail

Gmail lee selectores de clase, de elemento y de ID. Omite los selectores de atributo y las pseudoclases como :hover. En las media queries admite ancho, orientación y resolución.

Además, el previsualizador sigue los mismos límites. Un selector omitido aparece en las comprobaciones con un ejemplo, para que lo encuentres rápido.

Cómo se muestran el asunto y el fragmento en la bandeja

Escribe un asunto y un nombre de remitente y la página dibuja una fila de bandeja de entrada. Reproduce el nombre del remitente, la línea de asunto y las primeras palabras. También, esas primeras palabras son el texto de vista previa.

Muchos correos empiezan con Ver en el navegador, que desperdicia la mejor línea de la bandeja. En su lugar, añade un preencabezado oculto corto o escribe tu propio texto en Texto de vista previa. Las comprobaciones te avisan cuando el correo abre con una línea débil.

El aspecto aproximado del correo con el tema oscuro

Igualmente, muchos lectores usan Gmail en modo oscuro. El menú Aspecto da una vista oscura aproximada. Pasa los colores claros a oscuros y devuelve las imágenes a su sentido.

Gmail no publica su propio método, así que trata esta vista como una luz de aviso y no como una promesa. Aun así, muestra rápido un logo oscuro que desaparece sobre una página oscura.

Las imágenes dentro de la vista previa

Tu navegador impide que este sitio cargue imágenes de otros sitios. Así, es una regla de seguridad y la mantenemos. Por eso una imagen remota aparece como un cuadro gris del tamaño correcto.

El cuadro sigue mostrando el diseño. Además, las comprobaciones te avisan de texto alternativo ausente, anchos ausentes e imágenes incrustadas en base64, que Gmail no muestra.

Qué quita Gmail de un correo

Gmail no ejecuta scripts. También quita marcos, formularios, vídeo y SVG. Además elimina controladores de eventos como onclick y enlaces que empiezan por javascript:.

El previsualizador hace lo mismo y lista cada eliminación. Por eso descubres un botón roto antes que tus lectores.

Dónde corta Gmail los mensajes largos: 102 KB

De hecho, Gmail recorta un mensaje de más de 102 KB. Esconde el resto tras un enlace llamado Ver mensaje completo. Si tu línea para darse de baja está al final, los lectores quizá nunca la vean.

El cuadro Tamaño muestra tu correo en kilobytes. Para reducirlo, quita comentarios, repite menos estilos en línea y pasa el código por un minificador de HTML.

Comprobaciones para plantillas de correo en frío

Un correo en frío funciona mejor cuando parece una nota de una persona. Así que mantén el diseño ligero: unos pocos párrafos, un enlace y una forma clara de darse de baja.

Además, las comprobaciones señalan los problemas habituales. Avisan de correos que son sobre todo imágenes, enlaces que no llevan a ninguna parte y falta de enlace para darse de baja. En Estados Unidos, la guía de cumplimiento de CAN-SPAM explica por qué esto último importa.

Abre un archivo que ya tienes

La mayoría de las herramientas de correo te dejan exportar el HTML de una plantilla. Guárdalo como archivo, pulsa Abrir un archivo y aparece la vista previa. También, funcionan archivos de hasta 2 MB, mucho más de lo que Gmail mostraría.

Revisa tus enlaces antes de enviar

Un enlace roto te cuesta un lector. Las comprobaciones cuentan cada enlace y avisan de los vacíos, los http simples y los peligrosos. Los enlaces quedan desactivados en la vista previa, así que un clic perdido nunca te saca de tu trabajo.

Antes de enviar, abre cada enlace una vez en tu propio navegador. Luego lee la dirección en la barra de estado y asegúrate de que va adonde dicen las palabras.

Compara las reglas de Gmail con un navegador normal

Cambia el menú Reglas de un lado a otro y mira qué cambia. Igualmente, cada diferencia es algo que Gmail quitaría a tus lectores. Arréglalas primero, porque deciden cómo se ve tu correo en la bandeja que usa la mayoría.

Una vista previa no es una prueba completa

Este previsualizador no es Gmail. Sigue las reglas escritas de Gmail, pero el Gmail real tiene apps, cuentas y actualizaciones propias. Envíate también una prueba.

Outlook y Apple Mail también se comportan distinto. Las tablas y los estilos en línea son la forma más segura de crear un correo para todos ellos.

Arreglos para los problemas más comunes

Así, usa tablas para el diseño y pon un ancho a cada imagen. Pon los estilos clave en línea. Añade texto alternativo a cada imagen y mantén la columna principal cerca de 600 píxeles. Luego vuelve a previsualizar, en las dos pantallas.