El documento destaca la importancia del diseño de correos electrónicos responsivos, dado que más del 50% se abren en dispositivos móviles, convirtiéndose en una necesidad prioritaria. Se discuten estrategias de diseño, como el uso de una columna, botones grandes y fuentes ajustadas, así como la implementación de maquetación fluida y media queries para asegurar una experiencia de usuario óptima en distintos dispositivos. Además, se sugieren prácticas para crear módulos reutilizables y gestionar elementos visibles y ocultos en diferentes plataformas de correo.

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

2. Responsive Email Design
www.digitalresponse.es
3/38

3. www.digitalresponse.es
FALTA DE SOPORTE E INTERPRETACIÓN HOMOGÉNEA
EN DISTINTOS CLIENTES DE EMAIL
POSICIÓN CONSERVADORA
4/38

4. www.digitalresponse.es
¿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

5. www.digitalresponse.es
¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE?
+15%
Tasa de click
Referencia
6/38

6. www.digitalresponse.es
¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE?
CTO +16%
Caso Tous
7/38

7. www.digitalresponse.es
¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE?
Analiza tu audiencia ¿dónde abren tus emails?
¿Cómo? Litmus Analytics
8/38

8. 10/38

9. www.digitalresponse.es
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

10. www.digitalresponse.es
DISEÑO
– Look Mobile:
12/38

11. www.digitalresponse.es 13/38

12. www.digitalresponse.es
MAQUETACIÓN
Fluido
Adaptativo
Responsive
14/38

13. www.digitalresponse.es
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

14. www.digitalresponse.es
MAQUETACIÓN
Porcentajes %
Generamos una interfaz fluida que se adapta al dispositivo
16/38

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

16. www.digitalresponse.es
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

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

18. www.digitalresponse.es
PROBLEMAS Y SOLUCIONES
www.digitalresponse.es 20/38

19. www.digitalresponse.es
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
www.digitalresponse.es 21/38

20. www.digitalresponse.es
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;}
}
@media only screen and (max-width: 480px) {
table.devicewidth {width: 320px!important;text-align:center!important;}
table.devicewidth2 {width: 280px!important;text-align:center!important;}
}
www.digitalresponse.es 22/38

21. www.digitalresponse.es
RECOMENDAMOS
Crear módulos reutilizables
www.digitalresponse.es 23/38

22. www.digitalresponse.es
CASO PRÁCTICO
Módulos: imagen
www.digitalresponse.es 24/38

23. www.digitalresponse.es
CASO PRÁCTICO
Módulos: texto -> contenedor centrado más estrecho
www.digitalresponse.es 1/38

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

25. www.digitalresponse.es
CASO PRÁCTICO
Módulos: imagen + texto – TABLAS ANIDADAS
www.digitalresponse.es 27/38

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

27. www.digitalresponse.eswww.digitalresponse.es
Visible Desktop/Oculto Móvil Oculto Desktop/Visible Móvil
29/38
ELEMENTOS OCULTOS / VISIBLES

28. www.digitalresponse.eswww.digitalresponse.es
Oculto Desktop/Visible Móvil
30/38
ELEMENTOS OCULTOS / VISIBLES

29. www.digitalresponse.eswww.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
31/38

30. www.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es
Clientes sin soporte
de media queries
OPCIÓN 1
32/38

31. www.digitalresponse.eswww.digitalresponse.es
Clientes sin soporte de media queries: MOSTRAR VERSIÓN ESCRITORIO
37/38
ELEMENTOS OCULTOS / VISIBLES

32. www.digitalresponse.eswww.digitalresponse.es
Clientes sin soporte
de media queries
OPCIÓN 2
32/38
ELEMENTOS OCULTOS / VISIBLES

33. www.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es
@media only screen and (max-width: 640px) {
div[id=hiddenmobile] {display:none!important;}
}
@media only screen and (max-width: 600px) {
div#hiddenmobile {display:none!important;} }
33/38

34. www.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es
Clientes con soporte
de media queries y
display:none
34/38

35. www.digitalresponse.eswww.digitalresponse.es 35/38
ELEMENTOS OCULTOS / VISIBLES

36. www.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es 36/38

37. www.digitalresponse.es
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
www.digitalresponse.es 38/38

38. www.digitalresponse.es
GRACIAS
www.digitalresponse.es 38/38