cómo estructurar adecuadamente tu html para email marketing
DESCRIPTION
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 MarketingTRANSCRIPT
![Page 1: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/1.jpg)
Estructura, diseño y
envío de un email
en
![Page 2: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/2.jpg)
¿Miedo?
![Page 3: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/3.jpg)
¿Qué representa el
acrónimo HTML?
![Page 4: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/4.jpg)
¿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.
![Page 5: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/5.jpg)
Relación HTML vs Email
![Page 6: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/6.jpg)
Relación HTML vs Email
![Page 7: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/7.jpg)
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
![Page 8: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/8.jpg)
Visualización de un Email
![Page 9: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/9.jpg)
Visualización de un Email
![Page 10: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/10.jpg)
Visualización de un Email
![Page 11: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/11.jpg)
¿Cómo diseñar un
newsletter y que se vea
bien en todos los clientes
de correo?
![Page 12: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/12.jpg)
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
![Page 13: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/13.jpg)
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
![Page 14: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/14.jpg)
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)
![Page 15: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/15.jpg)
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
![Page 16: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/16.jpg)
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.
![Page 17: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/17.jpg)
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;”>
![Page 18: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/18.jpg)
-
Revisar envíos en todos
los clientes de correo.
![Page 19: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/19.jpg)
¿Qué es lo que
queremos?
![Page 20: Cómo estructurar adecuadamente tu HTML para Email Marketing](https://reader036.vdocuments.co/reader036/viewer/2022062511/54c4633b4a7959152e8b459e/html5/thumbnails/20.jpg)
¡Gracias!
Mauricio Torres
Customer Support Rep
Mx