Codificación HTML y CSS en Email: 10 recomendaciones.

Este artículo va dirigido a todos aquellos que se dedican al diseño, codificación y entrega de emails en formato HTML y quieren que sus Newsletter se vean bien en la mayoría de los clientes de correo.

El envío de emails de Newsletters es una buena forma de comunicación entre los editores y los lectores, pero si además lo hacemos en formato HTML, nos permitirá enriquecer el documento con elementos visuales que hacen el email más atractivo, accesos directos a otras localizaciones y nos permitirá a nosotros mismos hacer mediciones sobre aperturas del email, rastrear y contabilizar los enlaces que visita, medir los intereses del lector, etc. Así, se le presenta al lector un email como si fuera una página web más fácil de navegar y escanear que un email en texto plano.

Al enviar un email en texto plano no podemos utilizar todas estás funcionalidades, pero por el contrario obtenemos otras ventajas como menor nivel de spam al no incluir etiquetas HTML y por eso mismo facilita a los clientes de correo visualizar perfectamente el contenido del email en todos los clientes.

Codificar HTML para emails puede darte muchos dolores de cabeza, debido a que los clientes de correo tanto los de escritorio como los basados en web no cumplen ningún standard web, no interpretan bien el código HTML y hojas de estilos o lo interpretan a su manera incluso añadiendo o eliminando código al email recibido, por lo que el diseño del email que el destinatario recibe puede ser bastante diferente al diseño del editor que envió ese email.

Este artículo te ayudara a asegurar que tus Newsletter enviadas en emails en HTML cumplan con los requisitos de los clientes de correo y se visualicen de la misma forma en todos los clientes actuales de correo a base de "crear un documento mal formado y no válido" que no corresponde a ningún standard actual del W3C.

10 Recomendaciones a la hora de codificar:

1. HTML por encima de CSS.
   
   Intenta usar las etiquetas de HTML y sus propiedades en la mayor parte de lo posible en lugar de hojas de estilos, ya que los clientes web tiene restringidas muchas de las propiedades y selectores CSS.
   
   
2. Uso de tablas para la maquetación.
   • Si, volvemos a las tablas. Los estándares web dicen que no se deben utilizar las tablas para maquetar una página web, pero esto no es una página web sino un email y es aconsejable utilizarlas en lugar de <div> si queremos que nuestras Newsletter se visualicen bien en la mayoría de los lectores de correo. Y es que los clientes de correo no soportan muchas de las propiedades necesarias para diseñar con divisiones <div>.
   • Usa los atributos de la tabla y celda para visualizar la tabla en lugar de utilizar propiedades CSS . Por ejemplo, asigna border="0", valign="top", align="left" (o center), cellpadding="0", cellspacing="0",etc.  Con esto conseguirás que se vea bien la tabla en clientes de correo antiguos.
   • Usa una tabla como contenedor de todas las tablas y elementos internos (por ejemplo para el header, content y footer)
   • Intenta no anidar muchas tablas y evitar el uso de la propiedad "colspan" ya que esta propiedad no es muy bien entendida por algunos clientes de escritorio.
     
     
3. Tamaño y resolución.
   Seguramente estés acostumbrado a codificar páginas web en 800×600 o en 1024×768 aproximadamente, pero para el diseño de emails en HTML puede que no funcione muy bien ya que la mayoría de los clientes muestra el email en una especie de "panel de previsualización" que es normalmente una parte del espacio total disponible.
   Lo más recomendable es configurar el ancho en unos 500-600px o dando un tamaño en porcentajes que es como yo suelo hacerlo para que se adapte al espacio que tenga disponible.
   
   
4. Uso de Hojas de Estilos en Cascada (CSS).
   
   El uso de las hojas de estilo en los documentos HTML para Email está limitado y según que cliente permitirá más o menos propiedades. Lo ideal es que los estilos deben aplicarse a la propia etiqueta (estilos en línea) en lugar de declarar las clases dentro de <style></style> en la etiqueta Head como se haría en una página web..
   
   Por ejemplo, es recomendable utilizar <p style="color: red;"> en lugar de <p class="colorRojo">.
   
   Los estilos en línea funcionan en todos los clientes.
   
   El uso recomendado de los estilos en línea se debe a que muchos clientes de correo sobre todo los basados en web, ignoran  la definición <style></style> y otros sólo permiten esta definición justo antes del cierre de la etiqueta body (</body>).
   
   Esta declaración, por ejemplo:
   
   <head><style>.colorRojo{color:red}</style></head>
   
   Funciona en Live Mail, New Yahoo, Old Yahoo!, Outlook 03, Outlook 07, AOL, Thunderbird, Mac Mail, Antourage
   No funciona en Gmail, Hotmail, Notes y Eudora.
   
   Y esta otra declaración:
   
   <body>.colorRojo{color:red}</body>
   
   Funciona en Hotmail, Old Yahoo, New Yahoo, Outlook 03/07, AOL, Thunderbird, Mac Mail, Entourage.
   No funciona en Gmail, Hotmail, Live Mail, Notes, Eudora
   
   Tampoco deberíamos usar la etiqueta LINK del Head:
   Si todos los clientes soportaran esta etiqueta, sería la forma ideal para crear un sistema de tracking perfecto.
   
   

   <link rel="stylesheet" type="text/css" media="all" href="http://jairoblanco.com/style.css" />

   Funciona en New Yahoo, Outlook 03/07, AOL ,Notes, Thunderbird, Mac Mail, Entourage
   No funciona en Gmail, Hotmail, Live Mail, Old Yahoo, Eudora
   
   
5. Selectores y propiedades CSS.
   
   Acabo de decir que lo mejor es utilizar los estilos en línea que las clases, ya que son válidos para todos los clientes, pero otra cosa diferente es las propiedades y selectores CSS que se pueden incluir en el estilo en línea.
   Intenta utilizar el CSS en la medida de lo posible para dar formato y color a la fuente y nunca para posicionar elementos.
   
   La empresa Campaign Monitor a sacado hace poco una guía resumida de las propiedades y selectores permitidos por los principales clientes de correo.
   
   Lo puedes ver aquí
   
   
   
6. Uso de imágenes
   
   Si tenemos que incluir imágenes en el código lo haremos indicando la ruta de forma absoluta. Es decir, en lugar de <img src="foto1.jpg"> utilizar <img src="http://www.miservidor.com/mailing/images/foto1.jpg"> ya que incrementaríamos demasiado el tamaño del email al enviar las imágnes adjuntas.
   
   
7. Uso de la etiqueta <p>
   
   No todos los clientes interpretan la etiqueta <p> correctamente no aplicando el salto de línea que por defecto la etiqueta tiene. Para ello, yo por ejemplo, simulo el párrafo de esta forma:
   
   <span style="">
   Esto es un párrafo para mi.
   </span><br><br>
   
   Las dos etiquetas <br> finales simulan el salto de línea que debería tener.
   
   
8. Flash, Javascript, Vídeos, ActiveX, etc
   
   No uses estas tecnologías en tus mailings pues la mayoría de los programas y antivirus bloquean este tipo de contenido en los emails. Además no todo el mundo tiene habilitado o hace uso de estas tecnologías.
   
   
   
9. Varios.
   
   
   • Intenta no poner ningún atributo dentro de la etiqueta <body> ya que será eliminado por muchos clientes web, algunos incluso como Yahoo la renombran a <xbody> para que no tenga validez y sea confundida con la propia del documento del cliente web.
   • Define el color de fondo en  la propiedad "bgcolor=" del  <td> y no en la hoja de estilo. ( hack para Gmail y visualizadores antiguos).
   • Usa el atributo background para las imágenes en lugar de usar CSS.
   • En la medida de lo posible , usa el atributo padding y cellpadding para controlar los márgenes dentro de la celda <td>
   • Si necesitas poner un color suave a un link contra un color fuerte de fondo, pon la definición de "font" en el <td> y añade a la etiqueta <a style="color:">( hack para Gmail y visualizadores antiguos).
   • Si los <p> y las fuentes aparecen en diferentes tamaños, envolver las etiquetas <a> dentro de los <p>. (Gmail)
   • Centrar un layout en Notes no funcionara. Los contenedores de los emails deberían siempre estar alineados a la izquierda.
     
     
10. Evitar spam desde código.
    
    
    
    • No utilizar fuentes rojas brillantes , o muchos colores desordenados, estilos, y formatos.
    • No utilizar mucho los puntos de admiración!!!!!!!! ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡
    • No utilizar mucho las letras mayúsculas
    • No utilizar las "spamming words" como "viagra, penny, sex, porn, free, gratis,Click here, pincha aquí, limit time, loan, act now, etc"
    • No usar !, $, o 100%
    • Dar al usuario la posibilidad de desuscribirse de la Newsletter desde el email.
    • Tener especial cuidado con las etiquetas HTML, no dejando etiquetas abiertas, no introducir contenido después de </html>, no dejar <title></title> vacío.
    • No envíes texto simulado para hacer pruebas, como por ejemplo añadir el típico texto "lorem ipsum”. Es mejor enviar el contenido real.
    • Elimina los comentarios HTML del email.
    • Si tienes algún programa para comprimir el contenido HTML sin modificar su código ayudará a una lectura más rápida para los clientes.
    • No uses la palabra “test”o "prueba" en el asunto del mensaje.
    • No envíes el email a ti mismo y siempre incluye un texto alternativo en el email.
    • Mira más información sobre Spam en Test filtros antispam
      

(1 votos, media: 2 de 5)

 Loading ...