Este documento proporciona una guía para el armado de un HTML que cumpla con estándares de usabilidad. Recomienda utilizar CSS inline en lugar de Flash o JavaScript, revisar el código generado por programas como Dreamweaver, usar códigos de escape para caracteres especiales, y equilibrar texto e imágenes para evitar ser marcado como spam. Además, aconseja utilizar tablas para maquetar, fuentes sans serif para texto menor a 12 píxeles, y agregar un llamado a la acción para motivar interacción.

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

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

3. Uso de 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.
Uso de 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>
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

4. Texto e Imagen
Texto e Imagen

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

6. Información de contacto
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 las campañas
• 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.