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

¿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

TIPOS DE CAMPAÑAS DE EMAILApuntadas 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

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.

Nociones generales#Tips para cualquier campaña

Cada cosa en su lugarUna vez que haya decidido mi objetivo puedo

comenzar a jerarquizar los módulos de información y

sobre todo a agruparlos con sentido.

Jerarquías visualesEstablece 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.

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.

¿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

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

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.

¡Genial! Tenemos lo básico

¿Profundizamos?

Mensaje claro y conciso:

A medida que la pantalla disminuye su tamaño, menos verá el usuario en un primer vistazo.

Estructuras modulares y acotadas:

La simplicidad es la clave. Cuantos menos elementos deban re-acomodarse, más controlable será el resultado.

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 ;)

¡No todos tienen dedos pequeños!

IOS Human Interface Guidelines de Apple recomienda una zona mínima de tapping de 44 × 44 puntos.

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.

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.

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.

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

¿Preguntas?

#extra

UX/UI Designer en Doppler

Agustina García Orsi

aorsi@fromdoppler.com

¡GRACIAS!

@_missagus_