Doppler Academy: Cómo maquetar una Campaña de Email en HTML

UI Developer

NAZARENO OVIEDO

HTML Responsive / Nazareno Oviedo / #DopplerAcademy

CÓMO MAQUETAR UNA CAMPAÑA DE EMAIL EN HTML


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.



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?


FluidoUtiliza un ancho del 100%, no

usa mediaqueries


Adaptativo ResponsiveUtiliza un anchos fijos y se adapta

de acuerdo al dispositivoFunciona como fluido pero usa

mediaqueries

Email Responsive, ¿Por qué es importante?


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


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


Email Responsive, ¿Quiénes lo soportan?


Los emails responsive no son soportados en todos los dispositivos, solo el 47% de los clientes de correo brindan soporte.


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


Soporte de Media Queries

Email Responsive, ¿Cómo se codifica?


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




<table width=“600” class=“responsive-table”>

Agregamos una clase a la estructura HTML que vamos a codificar para mobile.



@media screen and (max-width: 600px) { */Estilos Aqui*/ }

En el archivo CSS, hacemos la declaración del @mediaquerie con la condición especifica.



@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.


¿PREGUNTAS?

[email protected]


UI Developer

NAZARENOOVIEDO

/facebook

/linkedin

Doppler Academy: Cómo maquetar una Campaña de Email en HTML

Internet

Transcript of Doppler Academy: Cómo maquetar una Campaña de Email en HTML