Figma
No se admiten diseños de email de Figma creados fuera de Emailify
Crea el diseño del email con las herramientas de diseño de Emailify antes de exportar HTML listo para producción. Estas herramientas añaden las capas Row, Column, Button y otras capas estructuradas que Emailify necesita para generar el HTML. Después de añadirlas, puedes personalizar su contenido y sus estilos.
Si añades capas o frames que se diseñaron antes en Figma sin el plugin Emailify, se renderizarán como una imagen estática en lugar de como texto enriquecido o contenido HTML.
Cambiar el formato de exportación de las imágenes
Emailify detecta automáticamente si una capa tiene zonas totalmente transparentes y, en ese caso, usa PNG como formato de exportación predeterminado; si no, usa JPG. Puedes cambiar el formato de exportación de cualquier capa a JPG o PNG añadiendo tu propio ajuste de exportación.
Bloqueos con los ajustes 'Scroll Wheel' o 'Drag to Pan' de Figma activados
Hay un problema aleatorio por el que el plugin o el lienzo pueden quedarse bloqueados de forma extraña si estos ajustes (los de la captura de abajo) están activados.
Si te pasa en tu archivo de Figma, puedes solucionarlo desactivando estos ajustes en Figma: abre el Main Figma Menu, baja hasta Preferences y desmarca los ajustes Use scroll wheel zoom y Right-click and drag to pan.
Añadir enlaces al texto de párrafos o contenido de una capa de texto normal de Figma
Si resaltas el texto que quieres enlazar en la capa de texto de Figma y haces clic en el botón del icono "Link" nativo de Figma de la barra de herramientas superior de Figma, podrás pegar una URL, que Emailify renderizará automáticamente.
Úsalo solo para capas de texto de contenido (no para botones ni enlaces de navegación). Ten en cuenta que esto solo funciona con capas de texto de contenido normales; si necesitas poner un enlace en una capa de botón, icono social o enlace de navegación que genera Emailify, haz clic en esa capa de Figma, luego en el botón Settings de la cabecera del plugin Emailify y pega tu URL en el campo del enlace.
Los textos de botones o enlaces se ven en Figma pero faltan en la vista previa o en la exportación
Si un botón aparece vacío o falta un enlace de navegación aunque su texto se vea en Figma, la causa puede ser un problema de exportación con datos de fuente mixtos, incluidas las fuentes variables. Que la URL del enlace sea correcta no garantiza que su texto se haya exportado.
Mantén los textos como texto editable dentro de sus componentes originales de Button o de navegación de Emailify. Cierra y vuelve a abrir Emailify, actualiza la vista previa y exporta de nuevo. Revisa el HTML descargado antes de subirlo a tu plataforma de email.
Si siguen faltando los textos, contacta con el soporte y envía el frame del email de Figma afectado y el HTML o ZIP exportado para que podamos revisar las capas de texto y reproducir el problema.
Añadir texto en superíndice o subíndice
Puedes añadir superíndices y subíndices a tus capas de texto de Figma, y se renderizarán automáticamente como etiquetas de superíndice (por ejemplo, sup) o de subíndice (por ejemplo, sub) en el HTML que exporta el plugin.
Usar etiquetas de encabezado (por ejemplo, h1, h2, h3) en el texto HTML
Si lo necesitas, puedes cambiar la etiqueta de párrafo predeterminada (p) por cualquier etiqueta de encabezado (por ejemplo, h1, h2). Puedes envolver el contenido de tu capa de texto de Figma con la etiqueta de encabezado que quieras, y la etiqueta se cambiará automáticamente al exportar el HTML con el plugin Emailify.
Extensiones de archivo en blanco con la app de escritorio de Figma en Windows
Hay un problema conocido con la app de escritorio de Figma (solo en Windows), que también ocurre con las exportaciones de archivos normales de Figma. Al guardar el archivo, puede que veas la etiqueta "all files". Si la ignoras y haces clic en "Save", el archivo debería guardarse igualmente con la extensión correcta y podrás abrirlo con normalidad cuando se haya descargado en tu ordenador. Si aun así se guarda con la extensión en blanco, puedes cambiar el nombre del archivo y añadirle a mano la extensión correcta.
Optimizar tus diseños para reducir el tamaño de la exportación HTML
El número de componentes Row es lo que más influye en el tamaño del HTML exportado, porque cada Row crea otro conjunto de elementos de tabla. Reutiliza una Row cuando su contenido quepa en la misma estructura.
Por ejemplo, un título, un subtítulo, el cuerpo y un botón pueden compartir una sola Column dentro de una sola Row. No necesitan cuatro capas Row distintas.
Las opciones del panel de ajustes de Emailify no aparecen al hacer clic en una capa de Emailify en Figma
Si haces clic en una capa de Emailify de tu diseño de Figma y los ajustes no aparecen al pulsar el botón Settings de la cabecera del plugin, puede que tu frame principal de Emailify esté anidado dentro de otros frames, grupos, etc. Para solucionarlo, saca tu frame de Emailify de cualquier frame o capa anidada y devuélvelo al nivel de "Page", para que no quede anidado dentro de ninguna otra capa.
Los parámetros UTM desaparecen al enviar un email HTML
Hay varios motivos por los que los parámetros UTM de la URL pueden eliminarse al enviar tus emails HTML, ya que en el último año aproximadamente cada vez más navegadores y dispositivos han empezado a quitarlos automáticamente (por motivos de privacidad). Si los parámetros funcionan cuando abres los enlaces desde la ventana de vista previa de Emailify, pero no después de enviar el email desde tu plataforma de email marketing, lo más probable es que al enviar el email se aplique un redireccionador o acortador de enlaces adicional que los elimina o los rompe.
Velocidad de 'Please wait, loading Figma images...'
Hace un tiempo, Figma publicó una actualización que obliga a todos los plugins de Figma a esperar a que termine de cargarse cada imagen a resolución completa de la página de Figma actual antes de que un plugin pueda exportar datos de imagen (aunque solo necesite una capa o imagen).
Por ahora, la única solución es intentar limitar el número de frames o capas de tu página de Figma actual, lo que hará que este proceso sea mucho más rápido cuando el plugin se ejecute por primera vez. Por ejemplo, puedes crear una página nueva en tu archivo de Figma actual y llevar a esa página en blanco solo los frames de Emailify con los que quieras trabajar o que quieras exportar; así debería cargar mucho más rápido cuando vuelvas a ejecutar el plugin ahí.
Imágenes exportadas pixeladas
Si exportas tu email mientras las imágenes de Figma aún se están cargando progresivamente, puede que se exporten pixeladas, porque la imagen no se había cargado del todo en el archivo de Figma antes de exportarse. Para solucionarlo, asegúrate de que todas las imágenes se han cargado al 100 % y se ven nítidas en el archivo de Figma antes de exportar tus emails con el plugin Emailify.
Para ayudar a resolver este problema, también puedes usar la función "Downsizer" de TinyImage para reducir los rellenos de imagen al tamaño de su capa, lo que reduce el tamaño de sus archivos y hace que se carguen mucho más rápido en tu archivo de Figma.
Al editar PDF en Adobe Acrobat aparecen líneas de puntos
Puedes solucionarlo desmarcando la opción "Show bounding boxes" de la barra lateral de la app Adobe Acrobat mientras editas tu PDF. Mostrar las líneas de puntos de los cuadros delimitadores es algo que Adobe activa por defecto al entrar en el modo "Edit" con un PDF abierto en la app, pero desactivar la opción "Show bounding boxes" las oculta con un solo clic.
Puede que necesites una VPN en China
Ten en cuenta que, si estás en China, es posible que "el Gran Cortafuegos de China" bloquee el servidor de cuentas. Si ves un error de activación aunque uses una clave válida, seguramente tendrás que usar una VPN para solucionarlo.
'An error occurred while loading the plugin environment'
Esto puede ocurrir en la app de escritorio de Figma si el ajuste de depuración Use Developer VM de Figma se ha activado por error. Para comprobar que está desactivado, haz clic derecho en cualquier parte del lienzo de Figma, pasa el ratón por encima de Plugins y después de Development, y asegúrate de que Use Developer VM está desmarcado. Cuando esté desmarcado (y no tenga una marca de verificación al lado), el plugin de Figma debería funcionar con normalidad al volver a ejecutarlo.
Subidas de imágenes bloqueadas en tu red
Si has activado la función Upload Hosted Image URLs o has subido el email HTML a una plataforma de email con las opciones de exportación integradas de Emailify, el plugin sube automáticamente las imágenes a internet para alojarlas.
Si ves un mensaje de aviso en el plugin (Images uploads may be blocked on your current network), significa que el plugin no puede acceder al servicio de subida necesario para alojar esas imágenes en internet.
Normalmente se debe a que la red a la que estás conectado (por ejemplo, la de tu empresa, que puede tener un cortafuegos que bloquea ciertas URL) o tu proveedor de internet restringe o bloquea esas URL. Para solucionarlo:
- Prueba a compartir la conexión de tu móvil como punto de acceso wifi con tu ordenador y vuelve a ejecutar el plugin Emailify de Figma para ver si se soluciona. Si es así, significa que tu otra red estaba bloqueando las solicitudes.
- También puedes probar a usar una VPN, que debería canalizar tus solicitudes de red y evitar cualquier bloqueo de la red.
- Si ya usas una VPN, prueba a desactivarla y vuelve a ejecutar el plugin Emailify de Figma para ver si se soluciona.
Si sigues teniendo problemas, no dudes en ponerte en contacto con nosotros por email.
Clientes de email
El nuevo Outlook puede reescribir los estilos después de cargar un email
El nuevo Outlook para Windows tiene un problema de posprocesamiento conocido que puede hacer que un email se muestre bien al principio y cambie después de cargarse. Outlook parece reescribir partes del CSS del email durante este segundo paso de renderizado, lo que puede provocar problemas como que las columnas de escritorio se apilen verticalmente de forma inesperada.
Este comportamiento no es constante: puede afectar a un destinatario mientras todos los demás ven el diseño esperado, y envíos de prueba idénticos pueden renderizarse de forma distinta en el mismo buzón. Customer.io ha documentado estos síntomas y lo que se sabe hasta ahora en New Outlook, same headache.
Las exportaciones nuevas de Emailify incluyen una capa de compatibilidad preventiva para el caso conocido de columnas apiladas. Emailify mantiene los estilos responsive originales de MJML y las alternativas basadas en tablas para el Outlook clásico, y coloca en el cuerpo del email una segunda copia solo de las reglas de ancho de columna de escritorio generadas. Esto ayuda con las versiones web de Outlook que eliminan los estilos del head del email, y mantiene el apilado normal en móvil y los puntos de corte de MJML en los demás clientes.
No hace falta que reconstruyas el diseño. Actualiza Emailify y vuelve a exportar el email para que el HTML generado incluya la alternativa antes de enviar otra prueba.
Si te encuentras con este problema:
- Abre el email afectado en una ventana aparte en lugar de en el panel de lectura o vista previa de Outlook. En los casos conocidos, suele renderizarse bien en la ventana aparte.
- Envía el mismo HTML exportado a otro destinatario o cliente de email para comprobar si el problema afecta solo a un usuario de Outlook.
- Si envíos idénticos se renderizan de forma distinta, descarga los dos mensajes recibidos como archivos
.emly compara su HTML antes de cambiar el diseño o la exportación de Emailify.
La alternativa reduce el fallo conocido de columnas de escritorio apiladas, pero Emailify no puede controlar cada reescritura de estilos que se haga después de la entrega. Si el problema continúa y el HTML recibido no ha cambiado, evita hacer grandes cambios de diseño solo para resolver una vista previa de Outlook inconsistente.
Reenviar plantillas de email HTML las rompe
Por desgracia, si alguien reenvía a otra persona un email HTML personalizado que ha recibido, el email suele romperse visualmente después del reenvío.
El motivo es que los distintos clientes de email modifican (o eliminan) parte del código HTML al reenviar el email, y eso hace que se rompa; como explica este artículo de Litmus, When Forwarded Emails Break:
Todo el mundo sabe que cada cliente de email renderiza los emails de forma distinta. Cuando un suscriptor reenvía un email, algunos clientes de email modifican el código del mensaje reenviado. Pueden eliminar ciertos elementos HTML, envolver el email en un blockquote o añadir clases adicionales al código, y todo ello puede romper el diseño y hacer que el email funcione peor para quien recibe el reenvío.
Una opción habitual para reducir este impacto es tener una versión "Web link" que se pueda abrir en el navegador si el email no se renderiza bien, normalmente añadida en la parte superior del email (como esta de MailChimp); si lo necesitas, también puedes incluirla en algún lugar del email como un enlace para compartir.
Mis emails llegan a la carpeta de spam. ¿Cuál puede ser la causa?
Hay varios motivos habituales por los que tus emails pueden acabar en spam:
- Demasiados enlaces: cada enlace afecta a la entregabilidad. Quita los enlaces que no sean imprescindibles, incluidos los enlaces a redes sociales innecesarios, para mejorar la llegada a la bandeja de entrada.
- Mala reputación del remitente: si tu dominio o tu IP tienen un historial de poca interacción, rebotes o quejas, los proveedores de correo pueden marcar tus emails.
- Contenido con aspecto de spam: abusar del lenguaje promocional (por ejemplo, “¡Gratis!”, “¡Actúa ya!”, “Oferta por tiempo limitado”) o usar demasiadas imágenes y muy poco texto puede activar los filtros.
- Problemas de autenticación: asegúrate de haber configurado correctamente SPF, DKIM y DMARC para tu dominio de envío.
- Poca interacción: si los suscriptores no abren ni hacen clic de forma continuada, es más probable que tus próximos emails se marquen como spam.
- Calidad de la lista: enviar a listas antiguas o compradas puede provocar rebotes y quejas por spam que perjudican tu puntuación como remitente.
Empieza por simplificar tu email, revisar la autenticación de tu dominio y quitar los enlaces innecesarios; muchas veces, solo con esos cambios mejora la entregabilidad.
Los ajustes del modo oscuro solo funcionan en las apps de Apple Mail para iOS y Mac
Ahora mismo, la compatibilidad de los clientes de email con los estilos específicos del modo oscuro sigue siendo bastante baja, así que tenlo en cuenta e intenta diseñar tus emails pensando en estos ajustes del modo oscuro como una "mejora progresiva".
También merece la pena usar otras técnicas de diseño ingeniosas para crear tu email pensando en el modo oscuro, como alternativa para los demás clientes de email.
La solución de Gmail para el texto blanco de los botones tiene un objetivo más limitado: conservar el texto blanco puro de los botones. No sirve para mantener sin cambios un texto negro sobre un fondo claro en el modo oscuro de Gmail.
Líneas blancas finas de subpíxeles entre imágenes apiladas en móvil
A veces pasa si usas imágenes en línea a ancho completo: según el ancho del dispositivo, al reducir la imagen en móvil pueden colarse estos "subpíxeles" en la altura de la imagen (que es lo que deja ese hueco tenue entre una y otra y deja ver el fondo que hay detrás).
La solución más rápida es añadir una capa Wrapper alrededor de las capas "Row" que contienen esas imágenes y, además, poner como fondo de ese Wrapper un "Linear Gradient" con tu color de fondo (por ejemplo, gris) en los dos extremos del degradado. Así te aseguras de que el fondo se renderice como una imagen, para evitar que el color de fondo CSS se sustituya o se invierta a negro en el modo oscuro, y tendrás un fondo uniforme detrás de las filas de imágenes que tape los huecos de subpíxeles.
Las fuentes de Google o personalizadas incrustadas solo funcionan en las apps de Apple Mail para iOS y macOS
Ahora mismo, las fuentes personalizadas en los clientes de email solo funcionan en Apple Mail para iOS y macOS, así que te recomendamos usar fuentes seguras para web en tus capas de texto de Figma, que puedes definir en el panel Configure Fonts de la función "Preview" de Emailify.
Además, algunos proveedores de servicios de email (como MailChimp) las eliminan activamente antes incluso de enviar el email para asegurarse de que solo se usan fuentes seguras para web.
Aun así, Emailify sigue incluyendo los @imports de Google Fonts y también define una fuente alternativa segura para web (por ejemplo, "Arial", "Georgia" o "Courier") si se usa una fuente de Google en el texto enriquecido. Se verán en cualquier cliente de email que admita @font-face en los emails.
Usa las fuentes personalizadas en tus imágenes. Ten en cuenta que, si necesitas que una fuente personalizada se vea igual en todos los clientes de email, puede que te convenga poner tus capas de texto dentro de un frame "Image". Ese texto se exportará como parte de la propia imagen y, por tanto, no dependerá de la compatibilidad con fuentes web personalizadas para mostrarse bien.
No se admiten elementos de formulario en los emails
La compatibilidad con los elementos form en los emails HTML sigue siendo bastante baja, y si los incluyes pueden hacer que los emails se marquen como spam, etc., así que de momento es mejor no usar formularios nativos dentro de los emails HTML.
La mejor alternativa es crear en tu diseño de Emailify un botón de llamada a la acción (CTA) atractivo y enlazarlo a la URL de un formulario externo, como Google Forms o Typeform, para recoger allí la información de los destinatarios a través del navegador.
Cómo funciona el bloqueo de imágenes en algunos clientes
Aquí tienes un par de artículos muy buenos que explican qué es el bloqueo de imágenes y qué clientes de email lo activan por defecto (sobre todo Outlook), mientras que otros clientes como Gmail, Android, Apple/iOS, etc., muestran las imágenes por defecto.
How Image Blocking Works in Email
Email Image Blocking: Answering the What, Why, Where, Who, and How
Por desgracia, no tiene que ver con que las imágenes sean seguras (SSL) o no: siempre se aplica a todas las imágenes del email.
Lo bueno es que, si el destinatario usa uno de esos clientes de email, normalmente ya está bastante acostumbrado a que pase y a hacer clic en el botón "show images", o lo más probable es que ya haya configurado que las imágenes de los emails entrantes se muestren por defecto.
Texto morado en Gmail (varios envíos de prueba con el mismo asunto)
Si envías varias pruebas de un email a una cuenta de Gmail, puede que notes que parte del texto aparece en un color morado oscuro.
No es un problema de tu código HTML: pasa cuando Gmail decide que varios emails enviados el mismo día con el mismo asunto son respuestas entre sí. Cuando esto ocurre, muestra el hilo de emails en una "vista de conversación".
Para saber más sobre la vista de conversación de Gmail, consulta la documentación de Google:
El color morado es solo una función de visualización que existe únicamente en la pantalla donde se ve. No se envía en ningún mensaje, y puedes usar la función de Gmail para mostrar el original y comprobarlo (necesitarás saber un poco de código HTML).
El color se aplica al texto que se repite de un mensaje anterior de la conversación actual, y los destinatarios lo ven porque también usan Gmail y también tienen copias de los mensajes anteriores de la conversación. Lo que se colorea en su conversación puede ser bastante distinto de lo que se colorea en la tuya.
Los clientes de email añaden enlaces azules a fechas, números de teléfono y direcciones
Es un problema de hace mucho tiempo: algunos clientes de email añaden enlaces automáticamente a cosas como fechas, números de teléfono y direcciones, y además les aplican sus propios estilos de color (normalmente enlaces azules).
Emailify aplica automáticamente todas las correcciones de código recomendadas para reducir este problema en algunos clientes de email, pero los clientes se actualizan a menudo para esquivar o impedir que se apliquen estas correcciones.
Hay 2 métodos adicionales que puedes probar para evitar que el cliente de email añada enlaces automáticamente (los dos aparecen en los artículos anteriores):
El método n.º 1 consiste en aplicar de antemano un enlace provisional (por ejemplo, a tu propia web) a cada una de esas capas de texto en Figma, quitar cualquier estilo de subrayado en Figma y poner el color que quieras (para que no parezca que se puede hacer clic). Así se añade de antemano una etiqueta de enlace alrededor del texto de la fecha, y el cliente de email no intentará añadir automáticamente su propio enlace sin estilo.
El método n.º 2 consiste en añadir una entidad HTML invisible especial (‌) justo después del primer carácter de cada fecha, número de teléfono o dirección (por ejemplo, 6‌75 Massachusetts Ave, Cambridge, MA 02139); con un poco de suerte, eso hará creer al cliente de email que no es una fecha y evitará que le añada un enlace automáticamente.
Algunas VPN pueden impedir que se muestren las imágenes subidas
Si has activado la función Upload Hosted Image URLs o has subido el email HTML a una plataforma de email con las opciones de exportación integradas de Emailify, existe un caso muy poco frecuente en el que el servicio de alojamiento de imágenes bloquea ciertas direcciones IP asignadas por algunas VPN, lo que impide que se carguen las imágenes.
Si tienes problemas porque las imágenes no se cargan, esta es probablemente la causa (desactiva temporalmente tu VPN para comprobarlo).
Las firmas de email no admiten fuentes personalizadas
A diferencia de los emails HTML completos o normales, en los que se pueden incrustar fuentes personalizadas (aunque solo para Apple Mail; otros clientes como Gmail y Outlook no admiten ningún tipo de fuente personalizada incrustada), las firmas de email no admiten una etiqueta style en la que añadir código para incrustar fuentes, así que es mejor que diseñes tus firmas con fuentes del sistema seguras para web.
La app de Gmail para iOS no renderiza los estilos responsive para móvil
El motivo principal es que alguna de las propiedades o estilos CSS de la consulta @media tenga una errata (por ejemplo, padding-bottm en lugar de padding-bottom) o que haya un salto de línea en mitad de una propiedad de estilo (por ejemplo, padd salto de línea ing-top): en ese caso, la app de Gmail ignorará todos los demás estilos y no renderizará ningún ajuste responsive para móvil.
Esto no debería pasar con el código exportado directamente desde el plugin, pero puede ocurrir si editas a mano el código HTML después de exportarlo desde Emailify (o si tu plataforma de email marketing modifica el código o añade límites de longitud de línea).
Límite de 500 caracteres por línea en los emails HTML
Emailify limita el HTML exportado a 500 caracteres por línea. Aunque el límite oficial es de 998 caracteres, las líneas más cortas evitan problemas de renderizado y de entrega que se han visto en Outlook y en algunos proveedores de servicios de email.
Las VPN pueden hacer que algunos enlaces a redes sociales no se abran bien
Aunque parece poco frecuente, si tienes problemas porque los enlaces a algunas redes sociales (por ejemplo, Facebook, Instagram) no se abren bien, esta es probablemente la causa (desactiva temporalmente tu VPN para comprobarlo), y no un problema del email HTML ni de los propios enlaces.
Outlook
El radio del borde no se ve en Outlook
Por desgracia, Outlook no admite la propiedad border-radius, así que siempre usará esquinas cuadradas normales. Consulta la lista de compatibilidad de border-radius para hacerte una mejor idea de qué clientes de email admiten esta propiedad CSS.
La altura del botón se reduce en Outlook.com (por no tener una URL real)
Si ves que la altura de un componente de botón se reduce al tamaño de la capa de texto que contiene, es porque Outlook.com lo hace cuando el href no tiene una URL real (por ejemplo, [replaceLinkInHere] en lugar de una URL real como https://google.com). Pon una URL real en tu componente de botón: haz clic en la capa del botón en Figma, usa el botón Settings del plugin y pega ahí tu URL.
Línea blanca de 1px en filas con 'orden invertido' en algunas versiones de Outlook
Hay un error conocido en algunas versiones de Outlook al usar el ajuste de columnas invertidas: puede aparecer una línea blanca de 1px junto a una de las columnas. Es una de las rarezas de renderizado de Outlook causadas por el motor de renderizado de Microsoft Word, y puede ocurrir cuando la Row invertida también tiene padding.
La mejor solución es quitar el padding de esa capa Row invertida, envolver la Row en un Wrapper y pasar el padding al Wrapper exterior. Así se mantiene el mismo espaciado visual, pero se evita el error de renderizado de Outlook en la propia Row invertida.
Esta solución coincide con el enfoque que se comenta en la incidencia de MJML en GitHub relacionada.
Outlook convierte automáticamente fechas y horas en enlaces azules de calendario
Para evitar que Outlook interprete el texto como una fecha u hora y lo convierta automáticamente en un enlace, puedes insertar una entidad HTML de "espacio de ancho cero" (​) entre los días, las fechas y las horas para romper la detección de patrones de Outlook, como en este ejemplo probado que funciona: Monday​ — Friday 8​am to 5​pm
Texto en mayúsculas con tildes (diacríticos) cortado
Si tienes una capa de texto en mayúsculas y algunos caracteres llevan diacríticos (por ejemplo, Ä, Ö, Ü) cuyo acento superior no se ve en Outlook, el motivo es que el valor de "line height" de la capa de texto en Figma es menor que el valor de "font size" del texto, y Outlook básicamente recorta cualquier contenido que no quepa dentro del valor de line-height (a diferencia de otros clientes, que simplemente dejan que se desborde con normalidad).
Para solucionarlo, solo tienes que aumentar el valor de line-height para que sea un poco mayor que el tamaño de la fuente. Por ejemplo, si tienes una capa de texto con un font size de "24px" y tu line-height es ahora "23px", tienes que subir el line-height de "23px" a "28px" en Figma (para dejar suficiente altura extra para los acentos que sobresalen por encima del tamaño de las mayúsculas de 24px). Así, Outlook renderizará los acentos y diacríticos correctamente, sin cortarlos por un line-height demasiado bajo.
El error aleatorio de la 'línea de 1px' de Outlook
Hay un problema muy molesto conocido como el error de la línea de 1px de Outlook que aparece al azar en algunas versiones de Outlook:
Outlook añade líneas adicionales a nuestros emails. Estas líneas heredan el fondo definido en la etiqueta body... y, para empeorar las cosas, este error parece ocurrir al azar, aunque aparece con más frecuencia en equipos con Windows 10 que con Windows 7.
Como se menciona en el artículo anterior, aunque es bastante aleatorio y no hay una solución fiable, normalmente se puede resolver probando a ajustar el tamaño de la fuente del texto que hay justo encima de donde aparece la línea. Por ejemplo (del artículo):
Para algunas personas, la solución es tan sencilla como cambiar los tamaños de fuente de números impares a pares. Por ejemplo, si tienes un tamaño de fuente de 13px o 15px, prueba a cambiarlo a 14px.
Hay otro buen artículo de resumen, Fixing White Lines in Outlook, que entra en más detalle y propone otras posibles soluciones.
Si quieres profundizar, el artículo Outlook 2016 madness and the weird 1px thin horizontal lines explica con más detalle el problema de fondo, y este completo debate en el foro de Litmus también plantea posibles causas y formas de intentar solucionarlo.
Gmail
Gmail recorta el email
Gmail recorta los emails cuyo mensaje ocupa más de 102KB y oculta el contenido completo tras un enlace "View entire message". Para evitarlo, usa el botón Preview para ver el tamaño de tu archivo HTML antes de exportarlo y quita todo el contenido que puedas para intentar reducir el tamaño del archivo.
Si el email se sigue recortando aunque esté por debajo del límite de tamaño del archivo HTML, lo más probable es que se deba a un carácter UTF-8 del contenido del email, que también puede hacer que Gmail recorte el email. La mejor solución es sustituir el carácter UTF-8 por su versión codificada en HTML (por ejemplo, usar © en lugar de ©), algo que el plugin ya hace automáticamente.
Otro motivo por el que ocurre es enviar emails con el mismo asunto (por ejemplo, al enviarte varias pruebas): Gmail agrupa los emails en un solo hilo y puede recortar el contenido de los envíos siguientes. Para evitarlo, asegúrate de que el asunto sea siempre distinto (por ejemplo, "Test v1", "Test v2", etc.).
Botones con texto blanco que se vuelve negro en la app móvil de Gmail en modo oscuro
Gmail (y otras apps) aplica automáticamente estilos de modo oscuro a tu email cuando el tema del sistema del usuario está en modo oscuro, y eso incluye los botones.
Para los botones que deben tener texto blanco tanto en modo claro como en modo oscuro:
- Pon la capa de texto del botón en blanco puro (
#FFFFFF) en Figma. - Selecciona el componente Button, abre Settings y pon también en blanco puro (
#FFFFFF) su color de texto específico para el modo oscuro. - Vuelve a exportar el email y envía una prueba a la app móvil de Gmail en la que viste el problema.
Con los dos colores en blanco puro, Emailify añade código de compatibilidad adicional para conservar el texto blanco del botón. Esta solución no conserva el texto negro ni de otros colores que no sean blanco, ni fija el color de fondo del botón. Si tu diseño necesita texto negro sobre un fondo claro, mantén esos colores y prueba ese diseño por separado; cambiar el texto a blanco cambiaría el diseño en lugar de resolver ese requisito.
Si el resultado sigue sin coincidir con tu diseño, contacta con el soporte y envía el HTML o ZIP exportado, una captura de pantalla, la app de email y el dispositivo, y los colores de texto y de fondo que quieres conservar. Indica también los ajustes que ya has probado. Consulta diseño y pruebas del modo oscuro para ver el flujo de trabajo completo y sus limitaciones.
Columnas apiladas en escritorio en Gmail
Algunos proveedores de servicios de email (como MailChimp) intentan modificar el HTML de tu email antes de enviarlo, lo que puede hacer que algunas columnas de tu email se apilen en Gmail en escritorio en lugar de mostrarse en fila.
Normalmente, estas plataformas modifican tu HTML para "insertar en línea" los estilos en tus elementos HTML. Sin embargo, Emailify ya inserta en línea automáticamente todos los estilos CSS, para que tus emails estén listos para producción. Si encuentras en las opciones de HTML o de importación de tu proveedor de servicios de email un ajuste para "desactivar" esta inserción en línea o modificación, debería solucionarse el problema.
Si no tienes claro si la causa es tu proveedor de servicios de email o el propio código, usa un servicio gratuito como htmltest.email (que no modifica nada de tu HTML) para enviarte un email de prueba. Si la prueba funciona desde htmltest.email, significa que tu proveedor de servicios de email está modificando tu HTML antes de enviarlo.
Gmail en iOS impone un line-height mínimo
Si pones en line-height un valor menor que el font-size actual, Gmail lo cambiará automáticamente a line-height:normal;. Así, line-height:1, line-height:1em y line-height:100% funcionan como se espera, pero line-height:0.9, line-height:0.9em y line-height:99% se convierten en line-height:normal;.
Lo mismo pasa con los valores en px: font-size:20px; line-height:19px no funciona, pero font-size:19px; line-height:19px sí.
Para solucionarlo, asegúrate de que el line-height de tu capa de texto sea igual o mayor que el tamaño de la fuente.
La app de Gmail para iOS no renderiza los estilos responsive para móvil
El motivo principal es que alguna de las propiedades o estilos CSS de la consulta @media tenga una errata (por ejemplo, padding-bottm en lugar de padding-bottom) o que haya un salto de línea en mitad de una propiedad de estilo (por ejemplo, padd salto de línea ing-top): en ese caso, la app de Gmail ignorará todos los demás estilos y no renderizará ningún ajuste responsive para móvil.
Esto no debería pasar con el código exportado directamente desde el plugin, pero puede ocurrir si editas a mano el código HTML después de exportarlo desde Emailify (o si tu plataforma de email marketing modifica el código o añade límites de longitud de línea).
Gmail traduce mal a otros idiomas emails que solo están en inglés
Si tu email tiene sobre todo bloques de imagen, sin texto enriquecido, o muchos bloques de imagen antes de cualquier texto enriquecido más abajo, Gmail a veces cree que el email está en otro idioma y te propone traducirlo al inglés, aunque Emailify añade automáticamente un atributo lang="en" a las etiquetas html y body del código.
Según este debate sobre el tema en los foros de Litmus:
Hemos comprobado (de forma empírica) que los emails que tienen mucho CSS y HTML antes del contenido real se clasifican como si estuvieran en inglés, aunque el contenido esté en otro idioma.
Nuestra solución es enviar un email multiparte de texto y HTML, con una versión de texto antes de la parte HTML. Por supuesto, el texto tiene que ser sustancial, no solo "Bonjour ...", porque si no las etiquetas HTML y el CSS siguen predominando.
El algoritmo de traducción no parece intentar eliminar el HTML y el CSS del cuerpo del email o, si lo hace, quizá trunca el mensaje antes de eliminarlos y acaba con muy poco contenido para detectar el idioma. (Hoy en día es fácil acabar con más de 5000 caracteres de cabeceras y CSS antes de una sola línea de contenido).
GIF
Convertir vídeos en GIF animados para tus emails
Aunque, por desgracia, las etiquetas video nativas no son compatibles con los emails HTML, la mejor forma de añadir imágenes animadas o contenido de vídeo a tus diseños de email HTML es usar GIF: ya sea un archivo GIF descargado de internet o uno que hayas creado tú.
Si ya tienes un vídeo que quieres usar como GIF, puedes usar una app gratuita llamada Gifski para convertir archivos de vídeo cortos en GIF animados para tus diseños de email.
Además, hay un buen vídeo tutorial que repasa las distintas formas de usar GIF en tus diseños de Emailify e incluirlos en tus exportaciones a HTML.
Los colores o degradados de los GIF se ven algo granulados
Los GIF son algo distintos de las imágenes JPG o PNG normales, porque solo pueden tener un máximo de 256 colores. Si usas imágenes con mucho detalle o degradados con mucha variación de color, es normal que no se vean tan nítidos ni tengan la misma precisión de color que las imágenes originales usadas para crear el GIF, por esta limitación del formato GIF.
La transparencia no se ve en los GIF
El formato de archivo GIF admite un 0 % o un 100 % de opacidad, pero nada intermedio. Esto significa que puedes tener un GIF animado con un fondo totalmente transparente detrás de elementos totalmente opacos y visibles. Por tanto, las capas tienen que ser totalmente transparentes o no serlo: cualquier capa con menos de un 50 % de opacidad será transparente, y cualquier capa con más de un 50 % de opacidad será opaca.
Marcar GIF transparentes en Figma. Emailify intenta detectar automáticamente si tu GIF tiene un fondo transparente; si tu GIF necesita transparencia y el plugin no lo detecta por sí solo, añade la palabra Transparent en cualquier parte del nombre de tu capa de Figma (por ejemplo, My Layer Name - Transparent) para obligar a que se exporte con el fondo transparente activado.
Conservar el archivo GIF original al exportar (manteniendo la relación de aspecto)
Si sueltas tu GIF en Figma y cambias el tamaño de la capa de forma proporcional para mantener la relación de aspecto original, Emailify usará automáticamente el archivo GIF original en tus exportaciones.
En cambio, si cambias la relación de aspecto de tu capa de Figma para que sea distinta de la del GIF original, Emailify tendrá que volver a crear tu GIF para tener en cuenta la zona recortada de la imagen, lo que puede dar lugar a archivos GIF más grandes y exportaciones más lentas.
El GIF no se muestra en Gmail (límite de tamaño de archivo)
Si has usado GIF en tu diseño pero no los ves al hacer un envío de prueba a una bandeja de entrada de Gmail, lo más probable es que se esté superando el límite de la caché de imágenes de Gmail, y por eso no se renderiza.
Al exportar a HTML, Emailify intenta comprimir los GIF grandes para dejarlos por debajo del límite de tamaño de archivo de Gmail, lo que debería solucionar el problema en casi todos los casos (a menos que el GIF sea excepcionalmente largo, muy pesado o tenga de partida una tasa de fotogramas muy alta).
Klaviyo
El editor de plantillas de Klaviyo (a veces) falla cuando hay GIF en el diseño del email
Hay un error aleatorio en Klaviyo que provoca un Error 500 (error interno del servidor), con una página que dice Something is amiss. We're on it.; parece ocurrir sobre todo si la plantilla es "Editable".
Klaviyo conoce este error, pero no parece que tenga previsto solucionarlo a corto plazo.
Una solución es quitar el GIF de tu diseño de Figma antes de exportar el HTML para Klaviyo y, después, subir la imagen GIF por separado a Klaviyo cuando el editor de plantillas haya cargado sin el error anterior.
Padding adicional alrededor de los bloques de texto en las plantillas editables de Klaviyo
Desde que Klaviyo actualizó su editor y obligó a usarlo en todas las plantillas a partir del 6 de junio de 2023, por desgracia, si exportas emails HTML con la opción Editable Content activada en Emailify, Klaviyo aplica por defecto unos ~18px de padding adicional alrededor de cada elemento de texto, como un atributo style en línea de un nuevo elemento td que inserta en el HTML si la plantilla es editable.
Al activar la opción Force the padding added by Klaviyo's new editor to be 0px en Emailify, se añade automáticamente CSS adicional para eliminar este padding en todos los clientes móviles y en los clientes de escritorio que no son Outlook, como Gmail, etc. Sin embargo, Outlook seguirá mostrando el padding a menos que cambies a mano a "0" cada uno de los valores de "Padding" de los bloques de texto editables de tu plantilla al editar el email de tu campaña en el editor de Klaviyo.
El texto de vista previa de Klaviyo aparece duplicado o muestra texto adicional del cuerpo
Define el texto de vista previa en un solo sitio. Si ya has escrito un Preheader Text en Emailify, deja vacío el campo de texto de vista previa de Klaviyo. Si prefieres gestionar el texto de vista previa en Klaviyo, deja en blanco el preheader de Emailify para esa exportación.
Si Klaviyo sigue mostrando texto adicional del cuerpo después del texto de vista previa que querías, activa Add Whitespace to Preview Text en las opciones de exportación de Emailify y vuelve a exportar el email. Así se añade un espaciador de compatibilidad oculto después de un preheader que no esté vacío, aunque la forma de tratarlo en la bandeja de entrada puede variar entre Klaviyo y los distintos clientes de email.
Consulta Definir el asunto y el texto del preheader de tus emails HTML para ver el flujo de trabajo completo del preheader.
MailChimp
Activar las imágenes editables usa imágenes @1x más borrosas (en lugar de @2x retina)
Si quieres, puedes hacer que las imágenes de la plantilla sean editables en MailChimp con la opción Editable Images, pero por desgracia MailChimp no admite imágenes retina @2x editables, así que serán @1x.
Si prefieres tener imágenes retina @2x que no sean editables, deja esta opción desactivada.
MailChimp elimina el estilo de los enlaces al incrustar etiquetas <link> de fuentes de Typekit
MailChimp elimina los estilos de los enlaces cuando se añade a tu email una hoja de estilos de Typekit personalizada. En concreto, si incluyes una etiqueta como: <link rel="stylesheet" href="https://use.typekit.net/lml7iwl.css">
en el <head>, MailChimp eliminará todos los atributos style de tus etiquetas <a>. Si quitas esta etiqueta, se soluciona el problema y recuperas los estilos de los enlaces.
Si aun así quieres usar tus fuentes de Typekit, puedes hacerlo con la función Web Fonts integrada en el plugin. En lugar de enlazar la hoja de estilos, necesitarás la URL directa del archivo de fuente .woff2 de tu archivo CSS de Typekit (por ejemplo: https://use.typekit.net/...). Pega esta URL en el panel Configure Fonts del plugin, y generará automáticamente el estilo @font-face correcto para que coincida con los nombres de tus fuentes de Figma en el HTML. Consulta el vídeo tutorial paso a paso para más ayuda.
Ten en cuenta que las fuentes web personalizadas solo funcionan en Apple Mail. Otros clientes de email (como Outlook o Gmail) no las admiten, así que te recomendamos definir una fuente alternativa segura para web en el plugin para controlar lo que se muestra. A muchos usuarios les resulta más fácil diseñar con fuentes seguras para web en Figma, pero añadir fuentes web personalizadas puede seguir siendo una buena mejora progresiva para los usuarios de Apple Mail.