Tips para diseñar newsletters
Por lo general, el pensamiento de un diseñador al tener que enfrentarse a la creación de un newsletter es: "Tengo que diseñarlo de igual manera que un sitio web" Y aunque en parte "algo" de razón se tiene en ello, el diseño de un newsletter es MUY especial y hay que tomarlo con pinzas. Pensemos que ese diseño pasará por varios procesos, desde que entra a nuestra bandeja de entrada (o en su peor caso como Spam) el e-mail se verá por default con las imágenes ocultas (y su contenido también, en algunos casos), también pasará por severos analisis para saber si es un e-mail SPAM o nó, será visto por el sistema anti-virus por si posee algún código malicioso, y por último será renderizado de diversas formas dependiendo del soporte de estilos que tenga cada webmail/cliente de correo. Por eso es recomendable tener presente algunos tips: Editores WYSIWYG Al estar codificando el HTML, muchos editores WYSIWYG (como por ejemplo Dreamweaver) pueden incorporan 'residuos' en el trabajo final los cuales pueden lograr una mala renderización en los clientes de correo y webmails. Es preferible realizar la codificación de forma manual con algún programa de edición de texto plano/HTML ó en su defecto identificar los 'residuos' y eliminarlos. Etiquetas DOCTYPE , <head> y <body> La mayoría de los webmails eliminan las etiquetas DOCTYPE y <head>, mostrando solamente el contenido dentro del body del mensaje. Maquetaciones Realizar maquetaciones simples, de una ó dos columnas, utilizando tablas (no me odien, pero la maquetación a través de CSS utiliza propiedades que no todos los programas/webmails logran soportar, por lo cual se corre el riesgo de visualizar un newsletter desmaquetado). Ancho del diseño El diseño no debe sobrepasar los 500-600px de ancho. Elementos Flash, Javascript, videos, música, no serán mostrados en ningún programa/webmail y posiblemente el email sea bloqueado por el sistema antivirus por ser sospechoso ó directamente eliminado el código por los webmails. Bloqueo de imágenes De forma predeterminada, todos los programas/webmails bloquearan las imágenes de un e-mail.
URLs Incorporar el atributo “_blank” para que los enlaces se abran en una nueva ventana. Estilos Los estilos CSS deben ser incorporados de manera ‘inline'. No se deben incorporar:
Testing en diferentes clientes de correo y webmails Así como cada navegador tiene un comportamiento diferente ante un diseño, los clientes de correo y webmails poseen una actitud similar, ya que no todos soportan la misma cantidad de propiedades HTML/CSS. De forma ideal, los diseños se deben testear en diferentes circunstancias (programas, sistemas operativos) para lograr la mayor compatibilidad. Una forma de abarcar a la gran mayoría de circunstancias es realizando el testing en los programas y servicios más populares:
Enlaces útiles para tener en cuenta
Vía: Leandono's Blog |