doppler academy: cómo maquetar una campaña de email en html
TRANSCRIPT
![Page 1: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/1.jpg)
![Page 2: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/2.jpg)
UI Developer
NAZARENO OVIEDO
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
![Page 3: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/3.jpg)
CÓMO MAQUETAR UNA CAMPAÑA DE EMAIL EN HTML
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
![Page 4: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/4.jpg)
Email Responsive, ¿Qué es?Es un email que se adapta al entorno de nuestro suscriptor, basándose en el tamaño de la pantalla y en el cliente de correo.
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
![Page 5: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/5.jpg)
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
Escritorio IPhone 6 - IOS Nexus – Gmail App
![Page 6: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/6.jpg)
• Modificar tamaños de contenido: imagenes, tamaños de tipografias.
• Ocultar contenido para mobile.
• Apilar columnas.
• Cambiar de un diseño de 2 columnas a una sola.
Email Responsive¿Qué nos permite hacer?
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
![Page 7: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/7.jpg)
FluidoUtiliza un ancho del 100%, no
usa mediaqueries
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
Adaptativo ResponsiveUtiliza un anchos fijos y se adapta
de acuerdo al dispositivoFunciona como fluido pero usa
mediaqueries
![Page 8: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/8.jpg)
Email Responsive, ¿Por qué es importante?
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
En 4 años las aperturas mobile han tenido un aumento del 500%, en 2011 ocupaban solo el 8%, hoy en día el 53%.
![Page 9: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/9.jpg)
Crecimiento de Entorno
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
![Page 10: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/10.jpg)
Esta tabla clasifica a los 10 clientes de correo mas populares, ya sean webmail, escritorio y móvil.
Como podemos observar, actualmente la tendencia sobre el uso de dispositivos móviles es bastante alta.
EmailClientMarketShare.comEstadísticas
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
![Page 11: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/11.jpg)
Email Responsive, ¿Quiénes lo soportan?
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
Los emails responsive no son soportados en todos los dispositivos, solo el 47% de los clientes de correo brindan soporte.
![Page 12: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/12.jpg)
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
Dispositivo ≠ Aplicación
Decir que un email responsive funciona en un dispositivo Android no es correcto.
Por eso es necesario hacer la siguiente diferenciación:
Por ejemplo, un email responsive es soportado por la aplicación nativa de Android, pero NO es soportado por la aplicación Gmail App.
Gmail no soporta emails responsive
Aplicación Nativa Gmail App
![Page 13: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/13.jpg)
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
Soporte de Media Queries
![Page 14: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/14.jpg)
Email Responsive, ¿Cómo se codifica?
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
![Page 15: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/15.jpg)
Vamos a utilizar Media Queries para detectar el tamaño de la pantalla y para modificar contenidos, estructuras, etc.
Un media querie es un conjunto de sentencias condicionales que permiten obtener estilos específicos:
• Si el ancho de la pantalla es mayor a 600px, nuestro color será rojo.
• Si el ancho de la pantalla es menor a 600px, la imagen se mostrara al 100%.
Como mencionamos anteriormente, los media queries no son soportados por todos los clientes de correo.
Email ResponsiveCodificación
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
![Page 16: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/16.jpg)
Email ResponsiveCodificación
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
<table width=“600” class=“responsive-table”>
Agregamos una clase a la estructura HTML que vamos a codificar para mobile.
![Page 17: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/17.jpg)
Email ResponsiveCodificación
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
@media screen and (max-width: 600px) { */Estilos Aqui*/ }
En el archivo CSS, hacemos la declaración del @mediaquerie con la condición especifica.
![Page 18: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/18.jpg)
Email ResponsiveCodificación
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
@media screen and (max-width: 600px) { table[class=“responsive-table”] { width: 100% !important;} }
Insertamos los estilos dentro del @mediaquerie, y utilizamos !important en la declaración de estilos.
![Page 19: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/19.jpg)
Email ResponsiveCodificación
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta> etiqueta para Email Responsive
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta> etiqueta para Windows Phone
![Page 20: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/20.jpg)
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
¿PREGUNTAS?
![Page 21: Doppler Academy: Cómo maquetar una Campaña de Email en HTML](https://reader031.vdocuments.mx/reader031/viewer/2022022201/589ca4711a28abf4148b6679/html5/thumbnails/21.jpg)
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
UI Developer
NAZARENOOVIEDO