Guía para el armado de un HTML

Crear una pieza con estándares de usabilidad • 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 mail. • 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. A modo de ejemplo, si queremos escribir las palabras GUIÓN CINEMATOGRÁFICO debemos escribir el código de la siguiente manera (ver las notas en azul): <strong>- TALLER de GUI&Oacute;N CINEMATOGR&Aacute;FICO: CORTOMETRAJES</strong>

De esta manera en el cuerpo de texto veremos esta imagen: TALLER de GUIÓN CINEMATOGRÁFICO: y no esta:

• 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. En este punto es fundamental respetar las normas convencionales establecidas internacionalmente para la creación de una pieza de comunicación en html. • 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 más info sobre cómo realizar esta acción Ver Paso 4 de iPLAN Express. • 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. • 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. • 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:

<table cellspacing="0" cellpadding="10" border="0"> <tr> <td width="80"> </ td> <td width="280"> </ td> </ tr> </ table>

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

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> 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> Texto e Imagen

Uso de Fuentes

Uso de Enlaces

Texto e Imagen

Texto e Imagen

• 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. • 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. Ejemplos

Call to Action

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.

• Ponga a prueba sus piezas email en al menos tres o cuatro clientes de correo electrónico, como Yahoo, Gmail 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.

Información de contacto

Testear las campañas