26

Herramientas y Buenas Prácticas para el Diseño y Maquetación de Emails

212522Puntos

hace 5 años

El Email Marketing es una herramienta de marketing digital directo con muchísimas ventajas: Costos bajos, comunicación directa con los usuarios, contenido personalizable, pruebas y análisis de métricas para optimizar nuestras campañas, entre muchas otras.

Sin embargo, no siempre que recibimos un email nos emocionamos. Links rotos. Imágenes muy grandes o sin sentido. Contenido que no funciona en teléfonos o dispositivos pequeños. Incluso, puede pasar que abrimos un email pero no entendemos su mensaje o simplemente no es atractivo.

Quiero explicarte algunas técnicas muy útiles para diseñar y maquetar emails que enamoren a tus usuarios. Recuerda que puedes tomar el Curso de Diseño y Maquetación para Emails en Platzi para practicar estas y muchas otras técnicas para emails.

El lado oscuro de la maquetación para emails

Nuestros diseños deben seguir algunas normas y buenas prácticas. En general, es muy parecido a diseñar para la web.

Sin embargo, la maquetación sí que es muy diferente en web o emails. Debemos volver en el tiempo. Tablas. Estilos en línea. HTML en su primera versión. Colores y propiedades de CSS sin atajos. Nada de border radious. Debemos usar el !important más de lo que crees. ¡NI SIQUIERA PODEMOS INCLUIR JAVASCRIPT!

Pánico y desesperación

Pero no te preocupes.

El código puede parecer algo pasado de moda pero, aún así, podemos obtener resultados asombrosos. A los usuarios no siempre les importa el código detrás de la pantalla. Podemos convertir muy buenos diseños en realidad para incrementar las conversiones de los usuarios. Esto es lo que realmente importa.

Tipos de diseño para emails

Existen dos tipos de diseño de emails: escalable o responsive.

El diseño escalable se piensa desde móvil y crece para funcionar en dispositivos más grandes. Las posiciones siempre son las mismas, lo único que cambia es el tamaño con el que las vemos.

En cambio, el diseño responsive es un poco más complicado, necesita estilos complejos y media queries. La posición de nuestros elementos cambia para cada dispositivo, podemos diseñar una grilla de 2 o 3 columnas pero, para visualizarse en móviles, debemos pasar todo a una sola columna cuando no tenemos suficiente espacio.

Esto implica que diseñar y programar casi el doble pero vale la pena. Nuestros diseños pueden tratar de la mejor manera a todos los usuarios. Definitivamente, es muy buena idea aprender ambos tipos de diseño para emails y probar cuál funciona mejor para tu marca o producto.

Elementos indispensables de los emails

Los buenos y mejores emails tienen cinco elementos principales:

  • Header: El logo es sumamente importante, es la forma en que los usuarios pueden reconocer nuestra tu marca.
  • Contenido personalizado: Si no conoces los intereses de los usuarios es un buen momento para analizar sus clicks y su actividad. Usa la información que tienes de tus usuarios. ¡Háblales por su nombre! Es un detalle muy pequeño, fácil de implementar y genera un gran valor para los usuarios. Pueden sentir que sabemos quiénes son y que nuestro mensaje es especial para ellos.
  • Imágenes: Nos ayudan a llamar la atención del usuario pero, no abuses. La recomendación es que nuestros emails sean 20% de texto. Las imágenes deben ser usadas con medida y, para evitar que los servicios de correo electrónico las bloqueen, deben ser optimizadas para web.
  • Call To Action: Llamado a la acción. Un texto corto y conciso que llama la atención del usuario para llevarlo a una conversión y cumplir los objetivos de nuestra estrategia.
  • Footer: Es un espacio útil para proporcionar información de la marca como datos de contacto y redes sociales. Lo más importante es la parte legal: ¿Por qué los usuarios están recibiendo este correo? ¿Cómo pueden darse de baja o cancelar la suscripción?

Buenas prácticas para maquetar emails

Solo debemos tener algunas consideraciones muy importantes para no entrar en desespero y querer abandonar el proyecto (pequeño detalle que también es muy importante):

  • Comenta tu código: Es muy fácil perderse entre tabla y tabla. Incluso, podemos encontrar tablas dentro de más tablas. Lo mejor es hacer comentarios que nos ayuden a identificar las sección más importantes del email, así como las más confusas.
  • Ten en cuenta a todos: Gmail, Outlook, Apple Mail. Cada cliente de correo electrónico es diferente y tiene sus propias reglas (Outlook es el más complicado). Es buena práctica mandar un email de prueba para revisar que todas las partes de nuestros emails funcionen bien, desde cualquier cliente de correo y con cualquier dispositivo. Después de revisar podemos mandar la campaña de verdad.
  • Optimiza tus imágenes: Puedes usar herramientas como Tiny PNG o el mismísimo Photoshop para optimizar el peso de tus imágenes, por ejemplo, exportando al 80% de calidad. También es buena idea exportar las imágenes a una escala de 2x para que no se vean afectadas por dispositivos con pantalla retina.

También, recuerda que puedes analizar los dispositivos más usados para identificar y programar _media queries mucho más efectivas.

Herramientas para agilizar tu trabajo

Los Email Service Providers son plataformas de envíos masivos que, además de ayudarnos a clasificar y distribuir nuestra base de datos de usuarios, también nos permiten usar plantillas o templates para optimizar nuestros tiempos de desarrollo.

Por ejemplo, Mailchimp nos permite hacer envíos gratuitos de hasta dos mil contactos y nos facilita la implementación de diferentes tipos de campañas o estrategias de email marketing: Normales, automatizadas, de texto plano, pruebas A/B, entre otras.

Además, podemos utilizar Frameworks como Foundation que nos ofrecen plantillas responsive con muy buena distribución de contenido y completamente personalizables. Puedes aprender a usar Foundation para Emails en el Curso de Foundation en Platzi.

Conclusión

Recuerda que puedes tomar el Curso de Diseño y Maquetación para Emails para aprender a utilizar las herramientas de Mailchimp, desarrollar proyectos para todo tipo de campañas y usuarios con las mejores prácticas de diseño y optimización de emails.

¡#NuncaParesDeAprender! 🤓💚

Juan
Juan
juandc

212522Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
24975Puntos

Llevé ese curso y es realmente bueno, la profe es super explicita y se explica el paso a paso de manera detallada.

2
2703Puntos

Excelente aporte, Gracias!

2

Curso de Diseño y Maquetación para Emails, mi nuevo reto 😄

1

Would like to suggest that we could add the point of AMP Emails rather than the HTMl which we all have been used to. The AMP emails are really helpful for example- Mailmodo Email Templates . Mailmodo has good range of interactive email templates which we have used in our organisation and seen great changes in the engagement rate in emails and thus in such a way AMP emails can be used.
https://www.mailmodo.com/email-templates/