Webinar: Responsive Email Design

Alejandra Castellano
Desarrollo de Emails
Conecta:
@AleCastellano /AleCastellano
www.digitalresponse.es
2/38

Responsive Email Design
3/38

FALTA DE SOPORTE E INTERPRETACIÓN HOMOGÉNEA
EN DISTINTOS CLIENTES DE EMAIL
POSICIÓN CONSERVADORA
4/38

¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE?
+50%
“Más de la mitad de los emails se abren en un móvil”
Ya no es una opción, sino una prioridad.
Referencia
5/38

+15%
Tasa de click
Referencia
6/38

CTO +16%
Caso Tous
7/38

Analiza tu audiencia ¿dónde abren tus emails?
¿Cómo? Litmus Analytics
8/38

DISEÑO
– Estructura de una columna: Es la que mejor funciona en móvil, ya que disponemos de un ancho
muy reducido.
– Botones y enlaces grandes: recordemos que pasamos de diseñar para un cursor a diseñar para
un dedo y debe haber espacio suficiente para hacer click con facilidad.
– Fuente: en algunos casos tendremos ajustar el tamaño de la fuente para una óptima legibilidad.
– Look Mobile: debemos facilitar la experiencia del usuario adaptando el estilo del email a lo que
está acostumbrado a ver en móvil. Coger convenciones ya establecidas para este tipo de dispositivos
nos puede ayudar. Estas convenciones pueden ser iconos, ubicación de objetos…
11/38

DISEÑO
– Look Mobile:
12/38

MAQUETACIÓN
Fluido
Adaptativo
Responsive
14/38

MAQUETACIÓN
Porcentajes + Tablas Anidadas + Media queries
No se trata de crear un mail “responsive”, sino uno, que
se muestre usable y con una imagen consistente en todos los dispositivos posibles.
15/38

MAQUETACIÓN
Porcentajes %
Generamos una interfaz fluida que se adapta al dispositivo
16/38

MAQUETACIÓN
Tablas Anidadas
Generamos una estructura de tablas que se recolocan según el espacio del que disponen
17/38

MAQUETACIÓN
Media queries
Cambiamos las reglas CSS que se aplican según la resolución de la pantalla desde la que vemos el email.
@media only screen and (min-width: 480px) and (max-width: 768px) { … }
18/38

MAQUETACIÓN
WEB
≠
EMAIL
www.digitalresponse.es 19/38

PROBLEMAS Y SOLUCIONES

Nota: CAMBIOS EN YAHOO
table[class=devicewidth]
{width: 320px!important;text-align:center!important;}
Selectores de atributo → (ya no son necesarios)
Yahoo soluciona sus problemas con las media queries

CASO PRÁCTICO
Media queries
Cambiamos las reglas CSS que se aplican según la resolución de
la pantalla desde la que vemos el email.
@media only screen and (max-width: 600px) {
table.devicewidth {width: 480px!important;text-align:center!important;}
table.devicewidth2 {width: 440px!important;text-align:center!important;}
img.banner {width: 100%!important;}
}
table.devicewidth {width: 320px!important;text-align:center!important;}
table.devicewidth2 {width: 280px!important;text-align:center!important;}
}

RECOMENDAMOS
Crear módulos reutilizables

CASO PRÁCTICO
Módulos: imagen

CASO PRÁCTICO
Módulos: texto -> contenedor centrado más estrecho

www.digitalresponse.eswww.digitalresponse.es
CASO PRÁCTICO
26/38

CASO PRÁCTICO
Módulos: imagen + texto – TABLAS ANIDADAS

www.digitalresponse.eswww.digitalresponse.es 28/38
CASO PRÁCTICO

Visible Desktop/Oculto Móvil Oculto Desktop/Visible Móvil
29/38
ELEMENTOS OCULTOS / VISIBLES

Oculto Desktop/Visible Móvil
30/38

31/38

Clientes sin soporte
de media queries
OPCIÓN 1
32/38

Clientes sin soporte de media queries: MOSTRAR VERSIÓN ESCRITORIO
37/38

Clientes sin soporte
de media queries
OPCIÓN 2
32/38

div[id=hiddenmobile] {display:none!important;}
}
div#hiddenmobile {display:none!important;} }
33/38

Clientes con soporte
de media queries y
display:none
34/38

www.digitalresponse.eswww.digitalresponse.es 35/38

ARTICULOS Y WEBS RECOMENDADOS
Email Client Market ShareEmail Client Market Share
Creando un sencillo email HTML Responsive (Nicole Merlin)Creando un sencillo email HTML Responsive (Nicole Merlin)
Litmus CommunityLitmus Community
Plantillas Responsive de ZurbPlantillas Responsive de Zurb
Responsive Email PatternsResponsive Email Patterns
Blog de Email Marketing de Digital ResponseBlog de Email Marketing de Digital Response

GRACIAS

Webinar: Responsive Email Design

Recommandé

Recommandé

Contenu connexe

Similaire à Webinar: Responsive Email Design

Similaire à Webinar: Responsive Email Design (20)

Webinar: Responsive Email Design