martes, 13 de septiembre de 2011

PostHeaderIcon Reglas de maquetación de e-mails HTML


E-mails bien maquetados en HTML, con textos e imágenes es un tema básico para gran cantidad de proyectos, como por ejemplo ‘campañas de e-mailing’. Un e-mail incorrectamente maquetado puede convertir la campaña en un desastre.

La maquetación conlleva mucha tarea de prueba y error, pero con este post intentaremos evitaros grandes pérdidas de tiempo y poder conseguir una solución deseada para cada uno de vuestros proyectos de e-mailings.

Una maquetación HTML para una web no tendría porqué ser distinta para un e-mail, pero sí lo es. El problema principal de los e-mails en HTML es que no se ven igual a través del gestor de correo (hotmail, gmail, yahoo, mozilla thunderbird, outlook, ect...) que directamente en un navegador. Tampoco se ven igual en todos los navegadores aun utilizando el mismo gestor. La razón es que los gestores filtran el código y lo reformatean para evitar amenazas de seguridad, spam y mejorar su usabilidad.

Con los e-mails HTML se crea un submundo que no entiende de estándares web ni nada por el estilo. Nuevamente el diseñador debe sacrificar su trabajo para conseguir un resultado aceptable en el mayor número posible de gestores.

Estas son algunas de las normas básicas que aplico a la maquetación de e-mailings:

  • Nada de scripts, enlaces a hojas de estilo, styles en <head>... nada de nada. El contenido del <head> lo eliminan la mayoría de gestores, especialmente los gestores on-line.
  • Flash, javascript y similares no se muestran y además puede hace creer al gestor de correo que nuestro e-mail es una amenaza acabando en la bandeja de correo basura o con el contenido bloqueado.
  • Los estilos CSS se pueden utilizar, pero siempre y cuando sean en linea, pero olvidaros de una maquetación con DIVs y similares. Lo mejor son las tablas.
  • Los gestores de correo añaden por defecto margenes, colores, alineamientos, interlineados... y si queremos que se conserve la apariencia visual hay que definir todas estas propiedades.
  • No utilizar imágenes de fondo, algunos gestores las eliminan.
  • Para evitar que las composiciones con imágenes se rompan hay que definir alturas y anchuras de las celdas que los contienen y añadir dentro de las propiedades del IMG unstyle="display:block".
  • Algunos gestores como Outlook 2007 aplican un interlineado por defecto que no podemos redefinir. Para evitar problemas haz composiciones que permitan un interlineado flexible.
  • Las imágenes siempre deben subirse a un servidor y enlazarlas en absoluto.


0 comentarios:

Publicar un comentario

Blog Archive

Blogs Interesantes

Secti Tecnología, S.L. Con la tecnología de Blogger.