Consejos para el HTML
-
Upload
emblue-email-marketing-embluemail -
Category
Design
-
view
2.241 -
download
1
description
Transcript of Consejos para el HTML
![Page 1: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/1.jpg)
HTML Friendly
15 de enero de 2010
![Page 2: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/2.jpg)
¿Cómo lograr un template de email que se adapte al paradigma de la usabilidad?
![Page 3: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/3.jpg)
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).
![Page 4: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/4.jpg)
¿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.
![Page 5: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/5.jpg)
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.
![Page 6: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/6.jpg)
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.
![Page 7: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/7.jpg)
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.
![Page 8: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/8.jpg)
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.
![Page 9: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/9.jpg)
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.
![Page 10: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/10.jpg)
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.
![Page 11: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/11.jpg)
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>
![Page 12: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/12.jpg)
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.
![Page 13: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/13.jpg)
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. )
![Page 14: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/14.jpg)
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>
![Page 15: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/15.jpg)
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>
![Page 16: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/16.jpg)
Templates diseñados por ePEXO
Trate de lograr balance entre imagen y texto
![Page 17: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/17.jpg)
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.
![Page 18: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/18.jpg)
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.
![Page 19: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/19.jpg)
Call to action
![Page 20: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/20.jpg)
Descentralizar la pieza usando:
• Webinars/Webcasts• RSS feeds• Blogs• Podcasts• Social Networks• SMS• Video Sharing (You Tube)• Aplicaciones Mobile• Microblogging (Twitter)
![Page 21: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/21.jpg)
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.
![Page 22: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/22.jpg)
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.
![Page 23: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/23.jpg)
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).
![Page 24: Consejos para el HTML](https://reader033.fdocuments.es/reader033/viewer/2022042816/5597f6101a28ab704b8b46ad/html5/thumbnails/24.jpg)