Guía de diseño de correo electrónico HTML

La guía completa de diseño de correo electrónico

Es posible que ya sepa cómo crear un sitio web moderno y accesible. Conoces las reglas, las últimas opciones, etc. Sin embargo, ¿realmente puede tomar todo ese conocimiento y usarlo para el diseño de correo electrónico? La respuesta corta es no. Debido a la variedad de clientes de correo electrónico y el soporte limitado de CSS, hay algunas reglas muy específicas y sí/no cuando se trata de diseño de correo electrónico. Esta guía le ayudará a explicar los muchos puntos que debe tener en cuenta al usar su propio HTML para crear un correo electrónico para que se muestre correctamente. 

Antes de comenzar, es importante tener en cuenta que el diseño de correo electrónico no es lo mismo que el diseño web. Si te importan los estándares W3C o usas lo último en CSS, debes olvidar te todo eso al acercarte al diseño de correo electrónico. Básicamente se puede pensar como si fuera el año 2000.

Diseño

  • 650px o menos ancho de diseño
    La regla general para el tamaño del correo electrónico es mantenerlo 650px o menos de ancho. Esto permite que el correo electrónico se muestre correctamente (en general) en la mayoría de los clientes de correo electrónico y configuraciones de visualización.
  • Los diseños simples son los mejores
    Con el diseño de correo electrónico simple es mejor. Si intenta hacer un diseño complicado, se encontrará con muchos problemas de cliente de correo electrónico de prueba y depuración. Si usted está buscando para completar un diseño más avanzado estar listo para utilizar una gran cantidad de tablas y para establecer una buena cantidad de tiempo a un lado para las pruebas.
  • Usar tablas HTML básicas 
    Para crear el diseño general, necesitará utilizar tablas HTML estándar. Las técnicas de diseño flotante y flotante de CSS no se representarán correctamente en todos los clientes de correo electrónico.
  • Tenga cuidado con el relleno de celda de tabla
    Outlook tomará el relleno de cualquier celda de una fila y lo aplicará a todas las celdas de la fila. Esto podría dar lugar a algunos cambios visuales que no desea. Debe intentar aplicar el mismo relleno para todas las celdas de una fila O colocar un div o tabla interna (que tiene relleno) dentro de la celda que desea tener relleno. (Más información)
  • Evite usar colspans"" en sus tablas
    Algunos clientes de correo electrónico no son totalmente compatibles con ellos y otros tendrán problemas de visualización para las otras celdas si tiene un colspan.

CSS

  • No utilice hojas de estilo externas
    No funcionarán en muchos de los clientes de correo electrónico y usted debe incluir todo su CSS usando CSS en línea dentro de su HTML. 
  • No utilice clases CSS - utilice siempre CSS alineado 
    Muchos clientes de correo electrónico no admiten clases CSS. En lugar de declarar las clases CSS usted debe utilizar CSS en línea. Un ejemplo sería <div style-"color:#cccccc;" >content</div> en lugar de <div class>"cssclassa">content</div> 
  • No utilices accesos directos CSS
    CSS le permite establecer normalmente propiedades en grupos. Por ejemplo, style="font: 12px, Arial" En lugar de agrupar estos atributos debe establecer cada parte individualmente. Por ejemplo, style="font-size:12px; font-family:Arial" 
  • Evite el uso de opciones de float o posición CSS
    Algunos clientes de correo electrónico no tendrán en cuenta las opciones CSS float y posición. Intente usar tablas en su lugar.

Imágenes y vídeo

  • Usar URL de origen de imagen absolutas 
    En lugar de incluir una imagen como(<img src="img.gif">) debe incluir la dirección URL absoluta para el archivo, como (<img src="http://site.com/img.gif">) 
  • Utilice siempre etiquetas alt (<img src="http://site.com/img.gif" alt="Company ABC">) 
    La mayoría de los clientes de correo electrónico deshabilitan las imágenes de forma predeterminada. Así que a menos que tengas etiquetas alt, tus suscriptores solo verán un cuadro en blanco. Con una etiqueta alt tus suscriptores verán el texto que pusiste en la etiqueta. 
  • No incrustar vídeos y/o Flash
    No es una buena idea incrustar vídeos directamente y/o flash en su correo electrónico. Muchos clientes de correo electrónico no admitirán dicho código y muchos programas de spam y detección de virus marcarán su correo electrónico como spam / malicioso. En lugar de incrustar su video / flash en su correo electrónico tome una captura de pantalla de cómo se ve el video del reproductor flash e incrustar eso. Cuando hacen clic en él se puede tener el vídeo / flash abierto en su navegador. 
  • Los GIF animados no son totalmente compatibles
    Pregúntate si realmente necesitas una animación en tu correo electrónico. Aunque la mayoría de los clientes de correo electrónico admiten GIF animados, Outlook 2007 no lo admite. Los clientes de correo electrónico que no admiten GIF animados probablemente mostrarán el primer fotograma de la secuencia de animación. 
  • Tenga cuidado con las imágenes empalmadas
    Si tiene una imagen más grande que se empalma y se coloca en su HTML usando celdas de tabla o etiquetas img justo al lado de la otra, tendrá que probar a fondo. Algunos clientes de correo electrónico pueden agregar espacio adicional entre sus imágenes y hacer que su correo electrónico se vea mal.
  • Evite el uso de imágenes para ayudarle con su diseño
    Algunas personas usan imágenes de 1 o 2 píxeles para ayudar a alinear los elementos dentro de su diseño. Algunos clientes/filtros de correo electrónico pensarán que es una imagen de seguimiento potencial de lectura/apertura y penalizarán el correo electrónico por eso.
  • Prueba tu correo electrónico con imágenes deshabilitadas
    Dado que la mayoría de los clientes de correo electrónico muestran correos electrónicos con imágenes deshabilitadas de forma predeterminada, es muy importante que compruebe cómo se ve su correo electrónico con las imágenes deshabilitadas.
  • Ver los tamaños de los archivos
    Al igual que con el diseño web regular que desea ser consciente de los tamaños de archivo de imagen para su correo electrónico. Trate de mantenerlos bajos para asegurarse de que se descargarán rápidamente para sus suscriptores.

Fondo

  • Las imágenes de fondo no son totalmente compatibles
    Si está utilizando una imagen de fondo, tenga en cuenta que algunos clientes de correo electrónico no los mostrarán. Si todavía desea utilizar una imagen de fondo, utilice las opciones de fondo HTML en lugar de usar CSS para declarar un fondo.
  • Colores de fondo de cuerpo completo 
    Muchos clientes de correo electrónico (como Gmail) no muestran un color de fondo que establezca para la etiqueta del cuerpo principal (<body>) Le sugerimos que si está estableciendo un color de fondo en la etiqueta cuerpo para que también tenga un div de ajuste con un color de fondo que rodea su contenido. De esta manera, incluso si el color de fondo del cuerpo no es compatible, tendrá algo bastante similar.

Misceláneos

  • No ponga nada por encima de la etiqueta de apertura <body>
    Cualquier cosa que pongas por encima de la etiqueta del cuerpo probablemente será despojada y no utilizada.
  • No incluya javascript
    Es probable que sería despojado en la mayoría de los clientes de correo electrónico y algunos filtros de spam pueden detectarlo como código malicioso.
  • Evita Microsoft Office como la peste 
    El HTML generado casi garantizará problemas. Además, al copiar y pegar desde Office, pegará en su formato y probablemente tendrá problemas de diseño. 
¿Tiene más preguntas? Enviar una solicitud