Crea mensajes perfectos en todos los clientes de correo electrónico

Sep 13, 2025
Cómo

Para cualquier campaña de marketing por correo electrónico para trabajar, el correo electrónico tiene que llegar a la bandeja de entrada y destacarse de todos los demás. Sin embargo, la historia no termina allí. Su correo electrónico debe hacerlo bien si desea que sus suscriptores abren su correo electrónico, haga clic en la CTA y convertirlo.

La representación es un problema porque cada cliente y dispositivo de correo electrónico perciben el código de manera diferente. El código que funciona bien con un cliente de correo electrónico puede crear un problema de representación en otro. Para hacer las cosas aún más desafiantes, incluso los clientes de correo electrónico más utilizados vienen con peculiaridades y problemas. En este artículo, eche un vistazo a los desafíos y las soluciones para cada uno de los principales clientes de correo electrónico.

panorama

No sería una hipérbole decir que enviamos a los desarrolladores de correo electrónico al pensar en el pensamiento de Outlook. La razón obvia son los numerosos desafíos de representación presentados por este cliente de correo electrónico. Lo sorprendente es que cualquier corporación todavía tenga perspectiva como su cliente de correo electrónico estándar y una pequeña proporción de sus suscriptores todavía son leales a él.

Eche un vistazo a algunos de los desafíos y hacks para Outlook:

[dieciséis]
  • Desafío: Outlook no admite márgenes en & lt; p & gt; y & lt; a & gt;
  • Cortar a tajos: Si desea proporcionar márgenes, use el & lt; td & gt; etiqueta; En mayúscula debe usarse fuera de la etiqueta y minúsculas en línea
    • [dieciséis]
  • Desafío: El relleno solo es compatible con ciertos atributos HTML (sin incluir en & lt; div & gt; o & lt; p & gt; etiquetas)
  • Cortar a tajos: El diseño basado en la tabla es la apuesta más segura para superar este problema.

    • [dieciséis]
  • Desafío: Outlook es el único cliente de correo electrónico que no admite GIFS
  • Cortar a tajos: Como algunos clientes solo verán el primer cuadro de su animación, esto debe incluir toda la información importante, ejecutarse solo para unos pocos milisegundos, y dar sentido como una imagen independiente
    • [dieciséis]
  • Desafío: Outlook no admite las fuentes de Google, e implementará Times New Roman como un porto
  • Cortar a tajos: Incruste el siguiente código ... 
    •  & LT;! - [Si MSO] & GT;
& lt; tipo tipo = "Texto / CSS" y GT;
.fallback-text {
Fuente-familia: Arial, Sans-Serif;
}
& lt; / estilo & gt;
& lt;! [Endif] - & gt;

    Outlook.com

    Se introdujo una nueva versión de Outlook.com a principios de 2016, pero la versión heredada aún no está fuera de su uso. Aquí están los desafíos y hacks en particular a ese cliente:

    [dieciséis]
  • Desafío: Una brecha innecesaria de 4-5px se agrega por debajo de las imágenes.
  • Cortar a tajos: Establezca la propiedad de visualización como "img {pantalla: bloque;}" Para eliminar el relleno

    • Outlook.com introduces unnecessary spacing between your images

    Outlook.com introduce un espaciado innecesario entre sus imágenes
    [dieciséis]
  • Desafío: No es compatible con las fronteras de RGB
  • Cortar a tajos: Use códigos hexagonales para establecer el color de fondo HTML
    • [dieciséis]
  • Desafío: Añadido # en href Enlaces rompe la etiqueta de anclaje y cambia el CSS a otro lugar
  • Cortar a tajos: Use el nombre de dominio en lugar de #

    • Aplicación nativa de iPhone

    La aplicación nativa de correo electrónico de iPhone es el cliente más utilizado, y admite todos los elementos interactivos que normalmente encontraría en el correo electrónico: gifs, menús, acordeones, cuentas de cuenta caídas, deslizadores, etc. Además, también permite al vendedor de correo electrónico utilizar imágenes de alta definición retina para una experiencia de usuario increíble.

    iOS10 se ha convertido en aún más codiciado porque los usuarios ahora pueden ajustar el número de líneas de texto de vista previa en los correos electrónicos e incluso optar por la lista de cancelación de la lista. No obstante, a pesar de estos puntos fuertes, la aplicación nativa de iPhone también tiene ciertas deficiencias. Vamos a ver.

    iOS10 users can opt for list-unsubscribe

    Los usuarios de iOS10 pueden optar por la lista: cancelar la suscripción
    [dieciséis]
  • Desafío: El texto pequeño se redueda automáticamente.
  • Cortar a tajos: El tamaño mínimo de fuente para los encabezados debe ser de 22px y para el texto del cuerpo 14px
    • [dieciséis]
  • Desafío: La liberación de nuevos modelos de iPhone puede causar problemas de representación.
  • Cortar a tajos: Diseño de fluido asegura que los correos electrónicos se muestren correctamente en todos los dispositivos
    • [dieciséis]
  • Desafío: En iOS9, cuando bloque en línea Los elementos de nivel están uno al lado del otro en el código con un espacio entre los extremos de dos elementos, conduce a un problema de envoltura
  • Cortar a tajos: Simplemente quita el espacio
    • [dieciséis]
  • Desafío: iOS10 no admite posicionamiento fijo
  • Cortar a tajos: No hay solución actual ...

    • Gmail

    Gmail es popular porque es tan conveniente de usar. Sin embargo, eso no significa que sea sin sus desafíos.

    Gmail clips larger emails

    Gmail clips más grandes correos electrónicos
    [dieciséis]
  • Desafío: Si su archivo HTML supera los 102kb, Gmail lo recortará
  • Cortar a tajos: Evite las etiquetas y los atributos de estilo innecesarios, y no copie el código de Microsoft Word u otros editores de texto, ya que es (esto agregará etiquetas adicionales al archivo HTML)
    • [dieciséis]
  • Desafío: Gmail eliminará CSS de la & lt; estilo & gt; Bloque si excede los 8142 caracteres o incluye errores o anidado @declaraciones
  • Cortar a tajos: Asegúrese de que los estilos incrustados sean cortos y libres de tipográficos.
    • [dieciséis]
  • Desafío: Flotadores, márgenes, párrafos y relleno no son compatibles.
  • Cortar a tajos: Use un diseño basado en la tabla con & lt; td & gt; Para el relleno y los márgenes.
    • [dieciséis]
  • Desafío: Las imágenes de fondo no funcionan para las ID de no-Gmail configuradas en Gmail
  • Cortar a tajos: Aplicar el color de fondo como deformación.
    • [dieciséis]
  • Desafío: El selector de atributos no funciona
  • Cortar a tajos: Usar .clase selector en su lugar

    • Correo de Apple

    Apple Mail es quizás lo más cercano a un cliente de correo electrónico perfecto que tenemos. La principal ventaja de Apple Mail es que es muy indulgente cuando se trata de una mala codificación de correo electrónico. Además, al igual que la aplicación nativa de iPhone, apoya la interactividad en los correos electrónicos, lo que elimina la necesidad de ver el correo electrónico en el navegador.

    Debe tener en cuenta dos cosas mientras codifica correos electrónicos para sus suscriptores de correo de Apple:

    [dieciséis]
  • Evite usar fuentes de calibri
  • Anje su correo electrónico y proporcione los enlaces al servidor, ya que los enlaces internos no funcionan en Apple Mail

    • Yahoo! Correo

    Como han llegado nuevos y mejores clientes de correo electrónico, Yahoo! El correo se usa con menos frecuencia en estos días. Algunos de sus retos de representación y los hacks se discuten a continuación.

    [dieciséis]
  • Desafío: no es compatible con el alinearse en el centro Atributo html
  • HACK: UTILIZAR align = "centro"
    • [dieciséis]
  • Desafío: Min-de dispositivo-ancho y Máximo-ancho del dispositivo No son compatibles con las consultas de los medios.
  • Cortar a tajos: Utilice el atributo de ancho y el amplificador de ancho; / o en estilo en lugar de Min o Max-Width
  • Utilizar el ancho atributo en lugar de min- o anchura máxima , ya sea por separado o incrustado en el & lt; estilo & gt; etiqueta
    • [dieciséis]
  • Desafío: Las etiquetas flotantes no funcionan
  • Cortar a tajos: Agregar align = "top" a la imagen en cuestión

    • En esa nota, hemos llegado al final de la discusión sobre la mayoría de los desafíos de representación típicos para los clientes de correo electrónico. Echar un vistazo aquí Para más desafíos y soluciones. El marketing por correo electrónico, si se hace bien, puede allanar nuevas vías para su estrategia de marketing. Mantenga estas simples soluciones en mente y sus suscriptores nunca verán un diseño de correo electrónico roto en sus correos electrónicos nunca más.

    Artículos relacionados:

    [dieciséis]
  • 15 diseños de boletines de correo electrónico impresionantes
  • 10 mejores herramientas de boletines de correo electrónico
  • Master HTML Tipografía en el correo electrónico

    • Cómo - Artículos más populares

    Comienza con Grav CMS

    Cómo Sep 13, 2025

    [dieciséis] (Crédito de la imagen: Futuro) Grav es un sistema de gestión de contenido (CMS) con una diferencia. Los sistema..

    Construye un blog reactivo rápido con Svelte y Sapper

    Cómo Sep 13, 2025

    [dieciséis] (Crédito de la imagen: Svelte) Sapper es un marco construido en la parte superior de Svelte. Se enfoca en la vel..

    Cómo dibujar un brazo

    Cómo Sep 13, 2025

    [dieciséis] (Crédito de la imagen: Patrick J Jones) Aprender a dibujar un brazo que parece realista es una parte vital de un..

    Construye un chatbot AI-Powered

    Cómo Sep 13, 2025

    [dieciséis] Inteligencia artificial (AI) nos permite crear nuevas formas de ver los problemas existentes, de repensar estrategias ambi..

    Cómo crear un fallo de texto y efectos de imagen en CSS

    Cómo Sep 13, 2025

    En este tutorial, le mostraremos cómo crear un efecto de texto de falla. Los efectos especiales y las animaciones pueden ayudar a los sitios web destacados, creando un impacto inmediato en e..

    Crea un paisaje 3D en 6 pasos simples

    Cómo Sep 13, 2025

    [dieciséis] Creando un pedazo de Arte 3d Con un paisaje de aspecto natural, puede parecer un desafío, pero si usa las herr..

    Cómo pintar runas brillantes mágicas

    Cómo Sep 13, 2025

    [dieciséis] En este tutorial, te mostraré cómo pintar runas místicas que parecen brillar. Mi fórmula para pintar cosas brillantes ..

    Cómo obtener más de GIFS

    Cómo Sep 13, 2025

    [dieciséis] Los GIFs trabajan en ciclos perfectos, que Rebecca Mock describe como 'el bucle perfecto'. Este bucle debe borrar ideal..

    Categorías