La maquetación de e-mailings es una de mis principales tareas desde hace 2 años. Durante este tiempo, a causa de la poca información disponible, he tenido que ir aprendiendo a base de prueba y error. A día de hoy puedo considerar que se algo del tema.
Una maquetación HTML para una web no tendría porque ser distinta para un e-mail, pero si 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 standares 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 un style="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.
Entradas
que bueno lo de style="display:block", he sulucionado en parte un probelma en hotmail.
ResponderEliminarIgual sigo teniendo un inconveniente, las tablas a pesar de tener en absoluto el width y height con imagenes dentro tambien con las mismas propiedades la tabla se hace lmas larga, a que se debe.
Gracias.