Estructura, diseño y
envío de un email
en
¿Miedo?
¿Qué representa el
acrónimo HTML?
¿Qué significa las siglas <HTML>
 Hiper es lo contrario de lineal.
 Texto se explica por sí solo.
 Marcado es lo que ha...
Relación HTML vs Email
Relación HTML vs Email
Visualización de un Email
Uno de los problemas más comunes al
diseñar una newsletter o una pieza de mail, es
lograr que el...
Visualización de un Email
Visualización de un Email
Visualización de un Email
¿Cómo diseñar un
newsletter y que se vea
bien en todos los clientes
de correo?
Diagramar con tablas
1. Debemos usar tablas para la estructuración del contenido puesto que no
todos los correos nos inter...
Diagramar con tablas
Piensa como distribuirás
el contenido del
emailing(imágenes, texto,
enlaces…) y crea una
tabla de man...
Diagramar con estilos
Gmail y otros buzones de correo no soportan estilos en cascada (CSS), así
que mejor dejarlos de lado...
Diagramar con textos alternos
Ya sabemos que la mayoría
de buzones de correo bloquean
las imágenes y que el lector no las
...
Consejos de imágenes
 Tu email sin imágenes también es efectivo (los buzones de correo las
bloquearán a priori).
 Las im...
Un HTML raro, ¿estoy viendo claro?
<body style=“width:100% !important; -webkit-text-size-adjust:none; -ms-text-size-adjust...
-
Revisar envíos en todos
los clientes de correo.
¿Qué es lo que
queremos?
¡Gracias!
Mauricio Torres
Customer Support Rep
Mx
Cómo estructurar adecuadamente tu HTML para Email Marketing
Upcoming SlideShare
Loading in...5
×

Cómo estructurar adecuadamente tu HTML para Email Marketing

294

Published on

Mauricio Torres, Ingeniero en Sistemas Computacionales y Doppler Customer Support Rep, brindó una interesante capacitación sobre cómo estructurar adecuadamente tu HTML para Email Marketing

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
294
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cómo estructurar adecuadamente tu HTML para Email Marketing

  1. 1. Estructura, diseño y envío de un email en
  2. 2. ¿Miedo?
  3. 3. ¿Qué representa el acrónimo HTML?
  4. 4. ¿Qué significa las siglas <HTML>  Hiper es lo contrario de lineal.  Texto se explica por sí solo.  Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc.  Lenguaje es lo que es HTML. Este lenguaje hace uso de muchos términos en inglés.
  5. 5. Relación HTML vs Email
  6. 6. Relación HTML vs Email
  7. 7. Visualización de un Email Uno de los problemas más comunes al diseñar una newsletter o una pieza de mail, es lograr que el mismo funcione bien en todos los clientes de correo electrónico
  8. 8. Visualización de un Email
  9. 9. Visualización de un Email
  10. 10. Visualización de un Email
  11. 11. ¿Cómo diseñar un newsletter y que se vea bien en todos los clientes de correo?
  12. 12. Diagramar con tablas 1. Debemos usar tablas para la estructuración del contenido puesto que no todos los correos nos interpretan los div correctamente. 2. Las dimensiones deben darse por medios de los atributos de tablas. 3. Para la cabecera, el contenido y el pie de página establecer la anchura de la tabla al 98%.Resulta que Yahoo! toma como cojín el 1% a ambos lados para mostrar el correo electrónico correctamente
  13. 13. Diagramar con tablas Piensa como distribuirás el contenido del emailing(imágenes, texto, enlaces…) y crea una tabla de manera que coloques cada porción de contenido en cada celda de la tabla
  14. 14. Diagramar con estilos Gmail y otros buzones de correo no soportan estilos en cascada (CSS), así que mejor dejarlos de lado. Además, muchos buzones sólo dan soporte a los estilos más básicos de HTML (font-family, font-weight, etc) y no soportarán estilos avanzados (clear, float, z-index, etc)
  15. 15. Diagramar con textos alternos Ya sabemos que la mayoría de buzones de correo bloquean las imágenes y que el lector no las verá si no pulsa el botón ‘Mostrar imágenes’. Así que, de antemano, tenemos que suponer que nuestro destinatario no verá las imágenes, por lo que debemos diseñar el email con esa idea. No confíes todo el contenido del email a las imágenes
  16. 16. Consejos de imágenes  Tu email sin imágenes también es efectivo (los buzones de correo las bloquearán a priori).  Las imágenes incluyen el atributo alt.  Las imágenes son .GIF o .JPEG (evitar .PNG).  El valor border es 0.  Incluye style=”display:block;” a las imágenes para evitar espacios debajo de ellas.  Las imágenes incluyen los atributos de alto y ancho (height y width).  Utiliza referencias absolutas y no relativas (usar src=”www.misitio.es/imagenes/logo.gif” en lugar de src=”/imagenes/logo.gif“).  Outlook no soporta imágenes de fondo.
  17. 17. Un HTML raro, ¿estoy viendo claro? <body style=“width:100% !important; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; margin:0; padding:0;”>
  18. 18. - Revisar envíos en todos los clientes de correo.
  19. 19. ¿Qué es lo que queremos?
  20. 20. ¡Gracias! Mauricio Torres Customer Support Rep Mx
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×