Post on 10-Feb-2017
UI Developer
NAZARENO OVIEDO
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
CÓMO MAQUETAR UNA CAMPAÑA DE EMAIL EN HTML
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
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
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
Escritorio IPhone 6 - IOS Nexus – Gmail App
• 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
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
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%.
Crecimiento de Entorno
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
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
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.
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
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
Soporte de Media Queries
Email Responsive, ¿Cómo se codifica?
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
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
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.
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.
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.
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
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
¿PREGUNTAS?
noviedo@makingsense.com
HTML Responsive / Nazareno Oviedo / #DopplerAcademy
UI Developer
NAZARENOOVIEDO