10 tips que deberías tener en cuenta al diseñar un newsletter
Sábado, 28 de Junio de 2008 18:27
Por lo general, el pensamiento de un diseñador al tener que enfrentarse a la creación de un newsletter es:

{xtypo_quote}Tengo que diseñarlo de igual manera que un sitio web{/xtypo_quote}

Tips al diseñar un newsletterY 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.

  • Es recomendable no incorporar texto importante (titulares, anuncios, etc) en imágenes.
  • Es recomendable utilizar la propiedad ALT en las imágenes y realizar una pequeña descripción de que trata dicha imagen.
  • Es una buena práctica realizar la verificación de  como queda el diseño con las imágenes desactivadas.
  • Los tags <img> deben llamar a las imágenes con su ruta absoluta hacia donde está alojado el archivo en el servidor.
  • No llamar a las imágenes a través de su dirección IP.
  • Evitar contenido en color blanco o colores claros (al estar las imágenes bloqueadas, el texto se verá con fondo blanco y si este posee un color claro será imperceptible)
  • Declarar el ancho y largo de cada imagen incorporada en el diseño
  • Varios sistemas anti-spam toman en cuenta que exista un balance entre contenido de imágenes y contenido de texto

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:

  • Dentro de las etiquetas <head>
  • Usando etiquetas <style>
  • Llamando a estilos externos

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:

  • Web - Hotmail, Yahoo!  y Gmail
  • PC - Outlook, Windows Mail y Thunderbird
  • Mac - Mac Mail y Entourage

Enlaces útiles para tener en cuenta



 
Comentarios (11)
1 Domingo, 29 de Junio de 2008 11:27
Santiago
Muy buen post. La verdad me aclaro várias dudas que tenía.
Muchas gracias.
Saludos
Santiago
2 Lunes, 30 de Junio de 2008 00:59
Jack The Ripper
Totalmente de acuerdo. Muy buenos tips :)
3 Lunes, 30 de Junio de 2008 12:21
rith
ahora se por que no me funcionaban algunos estilos, gracias, me parece un post bastante completo.
4 Martes, 01 de Julio de 2008 16:11
Daniel Longas
Que buen post. En Internet es difícil encontrar información tan completa como esta.
5 Miércoles, 16 de Julio de 2008 01:05
Nod
Muy interesante gracias por el tip

poseo algunos tips para webmasters/diseñadores que os podia interesar ;)
6 Martes, 29 de Julio de 2008 09:10
Mkl
Gracias por el tema, no viene nada mal, os recomiendo el programa Thunderbird para poder gestionar diferentes plantillas con un sólo clic.
7 Miércoles, 30 de Julio de 2008 17:17
david
Buen tema, la verdad es que me viene de miedo.
Tengo unas pregunta, estoy realizando un mail corporativo, tiene algunas imágenes como logo, etc. Dices que las imágenes de la plantilla se aloje en servidor y se ponga ruta absoluta (como seria esa ruta absoluta ej.), al instalar la plantilla en Outlook ¿cómo pilla las imágenes del servidor? Y mi última duda es como hacer que todos los mail de un dominio correo1@dominio.com les salga la plantilla para escribir o tengo q instalar la plantilla en Outlook en cada ordenador.
Gracias.

davidvelada@hotmail.es
8 Miércoles, 10 de Septiembre de 2008 15:41
Federico
Le agradezco, me viene bien toda la info. Estamos en saludyjusticia.com.ar para aquellos que necesiten nuestra ayuda. Gracias
9 Martes, 16 de Septiembre de 2008 18:34
ciberpunk
gracias por la informacion me ha sido de mucha utilidad voy a visitar este blog mas seguido
10 Miércoles, 03 de Diciembre de 2008 07:47
Laura
Estoy diseñando un newsletter y ya lo probé en programas y servicios. Y se ve bien en todos lados menos en hotmail. No entiendo porqué. Tiene las rutas absolutas, es más, en dreamweaver se ve perfecto en la previsualización.
AYUDA POR FAVOR!!!
11 Miércoles, 03 de Diciembre de 2008 07:47
Laura
Estoy diseñando un newsletter y ya lo probé en programas y servicios. Y se ve bien en todos lados menos en hotmail, QUE NO SE VEN LAS IMAGENES. No entiendo porqué. Tiene las rutas absolutas, es más, en dreamweaver se ve perfecto en la previsualización.
AYUDA POR FAVOR!!!

Agregue su comentario

Tu Nombre:
Tu email:
Tu sitio web:
Comentario: