Este documento ofrece consejos para el diseño de campañas de email marketing que funcionen bien en todos los dispositivos. Recomienda mantener diseños simples y modulares con pocos elementos que se puedan reacomodar fácilmente cuando cambia el tamaño de la pantalla. También sugiere usar fuentes y botones de tamaño generoso para que sean legibles y usables en pantallas pequeñas, y optimizar las imágenes y el código HTML para que las campañas se carguen rápido en todos los dispositivos.

1. Email Marketing para Móviles
CÓMO GENERAR CAMPAÑAS RESPONSIVAS QUE
FUNCIONEN BIEN EN TODOS LOS DISPOSITIVOS
UX/UI Designer en Doppler
Agustina García Orsi

2. ¿Cuál es el objetivo
de tu campaña?
Saber esto determinará en gran parte la elección de recursos gráficos para
diseñar tu campaña o elegir un template pre-diseñado

3. TIPOS DE CAMPAÑAS DE EMAIL
Apuntadas a satisfacer necesidades específicas. Cada tipo de campaña tiene elementos que le
son propios y que ayudan a reconocerla como tal.
NEWSLETTER
• Fidelizar clientes
• Posicionar la marca
• Generar tráfico
PROMOCIONALES
•Generar conversiones
(clicks, recomendaciones,
ventas, suscripciones, etc.)
ESTACIONALES
• Fidelizar clientes
• Adquirir clientes
• Posicionar la marca
• Generar conversiones
INFORMATIVAS
• Posicionar la marca
• Comunicar una noticia
• Mantener el contacto

4. El diseño como factor
diferenciador y
constructor de valor.
Nuestra imagen nos hace reconocibles ante nuestros clientes y
permite construir lazos perdurables en el tiempo.

6. Nociones generales
#Tips para cualquier campaña

7. Cada cosa en su lugar
Una vez que haya decidido mi objetivo puedo
comenzar a jerarquizar los módulos de información y
sobre todo a agruparlos con sentido.

8. Jerarquías visuales
Establece un orden de lectura a través del uso de jerarquías visuales, destaca o esconde elementos a través
del uso del tamaño, el color, la forma y la ubicación de los mismos.

9. Ten en cuenta las limitaciones
…………………………………………
Recuerda: un diseño es brillante sólo
si tus suscriptores pueden verlo.
▪ Más de la mitad de los clientes de
correo bloquean las imágenes por
defecto, por lo que es vital diseñar
también sin imágenes en la mente.
▪ Utiliza las etiquetas «ALT». Estas son
parte importante de tu pieza de email,
ya que le explican al lector aquello que
no puede ver.
▪ Utiliza texto HTML y fuentes standard.
De esta manera puedes estar seguro
que tu usuario verá el diseño de forma
correcta.

11. ¿Ya podemos comenzar a diseñar?
Sabemos que queremos mostrar primero,
que será el cierre pero…
¡No tan rápido! un email no es un impreso

12. Dimensiones dinámicas, contextos
dinámicos y tú sin bola de cristal
#Tip. Mantén tu diseño lo más simple, limpio y
jerarquizado posible.
A diferencia de un impreso, un Email se reproduce tantas
veces como el usuario lo abre:
• Clientes de correo con interfaces y limitaciones técnicas diferentes.
• Diversidad de dispositivos y contextos
• Resoluciones diferentes de pantalla

13. Entendiendo el concepto
de diseño fluido
#Tip. Cuantos menos elementos poseas,
más sencilla será la tarea.
Antes de tomar decisiones respecto de cómo ubicar tus elementos
debes comprender una regla muy sencilla: A medida que reduzcas
el espacio horizontal, generarás ese espacio hacia abajo.
Ubica tus elementos
sobre espacios
modulares.
¿Por qué? De esta
manera dejarán de
comportarse como
elementos individuales
para moverse en
grupo.

14. ¡Genial! Tenemos lo básico
¿Profundizamos?

15. Mensaje claro y
conciso:
A medida que la pantalla
disminuye su tamaño, menos
verá el usuario en un primer
vistazo.

16. Estructuras
modulares y
acotadas:
La simplicidad es la clave.
Cuantos menos elementos
deban re-acomodarse, más
controlable será el resultado.

17. Resolución
mínima
Diseña siempre teniendo en
cuenta el mínimo en que se
verá tu pieza 320px. Sobre
todo para la longitud de tus
botones ;)

18. ¡No todos tienen
dedos pequeños!
IOS Human Interface
Guidelines de Apple
recomienda una zona mínima
de tapping de 44 × 44 puntos.

19. Tamaños de
fuente generosos
Asegúrate de que tu mensaje
se pueda leer fácilmente. El
tamaño mínimo sugerido para
hacerlo cómodamente para el
ojo humano es de 13px.

20. Genera bloques
identificables
Apóyate en el uso de
espacios en blanco para
separar mejor los bloques
de información y así lograr
una lectura más cómoda.

21. Utiliza herramientas
optimizadas
El universo html es basto, si no
cuentas con los recursos para
generar un html ¡no temas! Elige
una herramienta que cuente con
un editor que soporte plantillas
100% responsive.

22. #tips extras =)
Optimiza para dispositivos retina.
Simplemente exporta tus imágenes al
doble de tamaño.
Comprime tus imágenes.
Ten en cuenta que la velocidad y calidad
de conexión desde mobile nunca será la
misma que desde escritorio.
tinypng.com
Mantén la cabecera limpia.
Esto evitará que tu bloque principal
quede debajo del scroll.
Números de teléfono tapeables.
De esta manera tus usuarios podrán
llamarte fácilmente.

23. ¿Preguntas?

24. #extra

25. UX/UI Designer en Doppler
Agustina García Orsi
aorsi@fromdoppler.com
¡GRACIAS!
@_missagus_