Consejos para el HTML

HTML Friendly

15 de enero de 2010

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

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).

¿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.

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.

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.

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.

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.

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.

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.

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>

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.

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. )

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>

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>

Templates diseñados por ePEXO

Trate de lograr balance entre imagen y texto

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.

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.

Call to action

Descentralizar la pieza usando:

• Webinars/Webcasts• RSS feeds• Blogs• Podcasts• Social Networks• SMS• Video Sharing (You Tube)• Aplicaciones Mobile• Microblogging (Twitter)

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.

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.

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).