Blog emBlue: Consejos para armar un HTML que cumpla con los estándares de usabilidad.

1. HTML Friendly
15 de enero de 2010

2. ¿Cómo lograr un template de email que se
adapte al paradigma de la usabilidad?

3. Diseño de HTML Friendly
• Crear piezas de email no es lo mismo que
armar un sitio web ya que no todos los
proveedores de correo electrónico
interpretan los HTMLS de la misma manera.
• Una pieza de email es considerada
"amigable" cuando logra ser efectiva en la
llegada al Inbox (Delivery rate) y también
efectiva en el impacto (Open rate y Click
through).

4. ¿Cómo logramos que el diseño
resulte efectivo en la llegada al
Inbox?
• El diseño de piezas de email debe estar orientado
a facilitar el deliverability y a presentarles a los
usuarios la información que quieren ver de
manera simple y eficiente.

5. Para maquetar con estándares de
usabilidad debemos:
• Utilizar un formato de html clásico:
Diseñar con CSS Inline que es un método
para insertar el lenguaje de estilo de
página directamente dentro de una
etiqueta HTML (body).
• No usar flash ni Java Script pues no son
lenguajes adecuados para los Clientes de
email.

6. Para maquetar con estándares de
usabilidad debemos:
• Si utilizamos programas como el
Dreamweaver para diseñar los emails,
tenemos que revisar la arquitectura del
código, ya que estos programas muchas
veces agregan por default código
innecesario.
• Es recomendable utilizar códigos de escape
(Código ampersand) para todo lo que sea
caracteres especiales dentro de la pieza de
HTML.

7. Para maquetar con estándares de
usabilidad debemos:
• Equilibrar la proporción entre texto -
imagen: Se recomienda enviar la misma
proporción de texto e imagen en las piezas,
o tratar de que haya un balance entre
ambas.
• Cuando se envían, por ejemplo, sólo
imágenes el mensaje puede ser filtrado como
SPAM. Procurar que el peso de la pieza no
supere los 50kb.

8. Para maquetar con estándares de
usabilidad debemos:
• Trabajar las imágenes en el código: Se
sugiere utilizar jpg y evitar gif animados.
• Incluir el atributo ALT= “descripción” en el
código de todas e indicar su tamaño.
• Almacenar las imágenes en el Server y nunca
adjuntar los archivos ya que esto evita
algunos filtros y además reduce
significativamente el peso de los mensajes.

9. Para maquetar con estándares de
usabilidad debemos:
• Evitar utilizar imágenes como fondo de
tabla porque no son aceptadas por
algunos clientes de email.
• Tratar de no usar archivos gif de 1x1
píxeles pues se trata de una práctica muy
común de los spammers y puede derivar
en que el mensaje sea bloqueado.

10. Para maquetar con estándares de
usabilidad debemos:
• Ausencia de formatos multimedia: Si
deseamos mostrar archivos de video o de
sonido deberemos recordar que los
programas de correo los suelen bloquear,
entonces es mejor subirlos a un servidor (o
plataformas como You Tube o Vimeo).
• Y enviar en el mensaje solamente la URL
donde esté alojado el archivo, a modo de
link para que el destinatario pueda acceder
al mismo.

11. Para maquetar con estándares de
usabilidad debemos:
• Utilizar tablas para maquetar:
La manera más fiable para establecer el ancho
de la tabla es establecer un ancho para cada
celda, no para la propia tabla.
Ejemplo:
1. <table cellspacing="0" cellpadding="10" border="0">
2. <tr>
3. <td width="80"> </ td>
4. <td width="280"> </ td>
5. </ tr>
6. </ table>

12. Fuentes
• Los estudios de "eyetracking"
(seguimiento de movimientos oculares)
confirman que los usuarios no miran las
áreas con colores de fondo y se centran
preferentemente en los contenidos, por
lo cual, un fondo blanco es el más
indicado.
• Utiliza tipografía “sans serif” si la fuente
es menor a 12 píxeles.

13. Párrafos
• El mejor enfoque es establecer la línea
de margen a través de CSS para cada
párrafo en su correo electrónico, así:
1. p (
2. margin: 0 0 1.6em 0;
3. )

14. Enlaces
• Establecer un color por defecto para cada enlace
en línea, así:
1. <a href="http://www.emblue.com.ar/"
style="color:#ff00ff"> este es un link </ a>
A continuación, agregue un lapso redundantes
dentro de la etiqueta a.
1. href="http:// www.emblue.com.ar/" <a
style="color:#ff00ff"> <span style="color:#ff00ff">
este es un link </ span> </ a>

15. Enlaces
• Asegúrese de que todos los enlaces a las
imágenes estén completos:
URL relativa (no de trabajo): <p> <a
href="lastpage.htm"> este texto </ a> es un enlace a
una página local, ya sea en su ordenador o en el mismo
sitio web. </ P>
URL completa (funciona): <p> <a
href="http://www.microsoft.com/"> este texto </ a>
es un enlace a una página web en vivo en la World
Wide Web. </ P>

16. Trate de lograr balance entre imagen y
texto
Templates diseñados por ePEXO

17. Call to action
• Todos los emails deberían tener un “call to
action” (CTA), que es la palabra o gráfico
mediante el cual llamamos al receptor a realizar
una acción.
• Por ejemplo: “regístrese”, “suscríbase”,
“descargue”, “envíe a un amigo” y otras tantas
que logren que el lector interactúe con la acción
a la que se lo invita.
• Hay que elegir con cautela el “call to action”
(CTA) y colocar más de uno y en más de un
formato para poder medir cuál consiguió más
atención de parte del cliente.

18. Call to action
• Recordemos que el call to action es el
vínculo entre nuestro email, nuestro sitio
web y el cliente, y si queremos lograr una
buena tasa de clicks es importante que se
distinga del resto de la pieza.
• Si colocamos un link en formato texto es
mejor que esté subrayado y sea de color
azul.
• Si en cambio utilizamos botones, es
preferible que estén en formato 3D para que
resalten y faciliten el click.

19. Call to action

20. Descentralizar la pieza usando:
• Webinars/Webcasts
• RSS feeds
• Blogs
• Podcasts
• Social Networks
• SMS
• Video Sharing (You Tube)
• Aplicaciones Mobile
• Microblogging (Twitter)

21. Incluya Información de Contacto
Completa al Pie
• Incluya los datos de su empresa (en fuentes
pequeñas), siempre debe incluirlos.
• El pie también es el lugar adecuado para la
información de derechos de autor (copyright)
como así también el vínculos de desuscripción.

22. Testear la pieza antes del envío
• Ponga a prueba sus piezas email en al menos
tres o cuatro clientes de correo electrónico,
como Yahoo, Gmail, AOL y Hotmail, sólo
para verificar el diseño y ver los errores.
• Envíe un mensaje de prueba a todas las
cuentas de correo electrónico gratuito
personales que tenga y testee cómo se ve su
diseño para asegurarse de que las imágenes,
colores y links se visualizan correctamente.

23. Testear la pieza antes del envío
• Way2Box te permite: ver 19 previews en distintas
aplicaciones de correo. Podrán verse tanto con
las imágenes del HTML. Como sin ellas (modo en
el que llegan inicialmente).