La guía completa para diseñar por correo electrónico

Diseñar para el correo electrónico consiste en llegar al punto y aprovechar al máximo la breve oportunidad que tiene con sus suscriptores. Solo tienes un disparo, por lo que vale la pena emplear tantos trucos en el libro como sea posible para asegurarte de que tu mensaje llegue. Los principios subyacentes tienen que ver con el respeto a sus lectores, dándoles algo valioso a cambio de su tiempo, que es, después de todo, la razón por la que se inscribieron para escuchar de usted en primer lugar..

Una nota antes de comenzar

Algunas de las sugerencias que voy a hacer no se aplicarán a todas las listas, compañías o productos. Como siempre con el correo electrónico, pruebe cualquier cosa nueva y vea cómo funciona para determinar qué es lo mejor para sus suscriptores.

Regla # 1: ser transparente

Esto es realmente importante. Evite utilizar nombres de remitentes, líneas de asunto, preencabezados o copia enigmáticos o enigmáticos. Esto solo confundirá a sus lectores y los hará más propensos a eliminar su correo electrónico o marcarlo como basura.

Dígales a sus lectores quién es usted, exactamente por qué los está enviando un correo electrónico y exactamente qué van a sacar de la experiencia. Tenga todo esto tan cerca de la parte superior del correo electrónico como pueda obtenerlo. Esto significa que tan pronto como se abra su correo electrónico, sus intenciones e identidad queden claras, y su propuesta no se pasará por alto..

Asegúrese de que el nombre del remitente, la línea del asunto, el encabezado anterior y el contenido "por encima del pliegue" sean significativos y relevantes para su motivo de contacto con sus lectores..


¡Prueba esto! Nombre del remitente, línea de asunto, logotipo y contenido de apertura claros y obvios.

Regla # 2: ser obvio, abrazar la convención

Puede parecer aburrido, pero ser convencional realmente es útil con el correo electrónico. Los correos electrónicos son pequeños y están abiertos por un período de tiempo muy breve, por lo que la función de cada elemento debe ser clara..

Haz tus enlaces obvios

Crea botones bonitos, grandes, fáciles de hacer clic y que se puedan cambiar para tus enlaces. En dispositivos móviles, hágalos al 100% del ancho para que puedan ser tocados fácilmente con cualquiera de los pulgares (no se requiere alcance).

Si también desea tener enlaces de texto dentro de su copia, asegúrese de que estén en negrita y en un color de contraste para que se destaquen. Trate de no tener demasiados enlaces juntos, lo que puede hacer que un usuario toque accidentalmente el incorrecto.

Alrededor del 50% de las aperturas están en dispositivos táctiles en estos días, así que evite el lenguaje que no tenga sentido, como "haga clic aquí".


De Justine Jordan en litmus.com

No dude en agregar una flecha. Los estudios han demostrado que son más efectivos, pero, como siempre, prueban en sus propios suscriptores..

Hacer los beneficios de hacer clic obvio

Los mejores botones combinan el beneficio de hacer clic con la acción en sí. Por ejemplo, "Comience a usar su nueva cuenta" o "Reclame su prueba gratuita".

Regla # 3: Di menos

No escribas mucho Sus destinatarios escanearán el correo electrónico en busca de cosas que les interesen en lugar de leer todo el correo electrónico, así que divídalo en trozos pequeños que sean lo más cortos posible..

Su objetivo con el correo electrónico de marketing es hacer que la gente haga clic en su sitio web, por lo que no hay necesidad de retrasarlo con un monólogo extenso, especialmente porque un correo electrónico de aspecto prolongado abrumará a sus lectores con fatiga mental y los hará más probables. presionar "Eliminar".


¡Prueba esto! Bocados cortos y potentes, con llamadas claras a la acción..

Hazlo escaneable

Diseña tu correo electrónico para ser punzante. El texto debe aparecer en segmentos claros y delineados que lleguen al punto..

Use encabezados claros y llame conceptos en negrita para que sus lectores de escaneo puedan entender lo esencial, incluso si no leen todo (lo que la mayoría de ellos no entenderá).


¡Prueba esto! Oraciones cortas y punzantes con botones obvios.

Puedes decir más tarde

Si está en el negocio de enviar contenido más extenso que disfruten sus lectores, definitivamente no estoy diciendo que no haya lugar para ello en el marketing por correo electrónico..

La gente lee el correo electrónico en todo tipo de escenarios diferentes. Algunos estarán 'sobre la marcha' y entre reuniones importantes, otros pueden estar extremadamente aburridos en la sala de espera de un dentista, y lamento decirle que otros todavía estarán en el inodoro. Estos escenarios son muy diferentes, pero es fácil atender a todos al mantener una jerarquía lógica.

Proporcione primero la información más breve y precisa, y luego incluya su contenido de formato más largo debajo. De esta manera, no está obligando a nadie a navegar por contenidos más largos, excepto aquellos que están trabajando activamente en su correo electrónico..

Repite tu llamada principal a la acción

Si su correo electrónico es largo y el usuario ha recorrido todo el contenido de su contenido, asegúrese de que tengan fácil acceso a otra llamada a la acción sin tener que desplazarse hasta la parte superior de su correo electrónico..


¡Prueba esto! Priorice su propuesta principal, luego incluya contenido secundario y / o más largo debajo.

Correos electrónicos promocionales y anuncios

Estos consejos se aplican a los mensajes de mercadotecnia donde, por lo general, hay una o dos cosas principales sobre las que se está comunicando con sus suscriptores..

No diluyas tu mensaje

Si está escribiendo a sus lectores sobre una cosa, intente no diluir el mensaje agregando muchas otras cosas debajo o en una barra lateral. Con cada opción adicional aumentas el riesgo de descarrilarlos..

Eliminar todos los elementos no esenciales

Evalúe el diseño de su correo electrónico, identifique cualquier cosa que no sea esencial para transmitir su mensaje y luego elimínelo. Menos distracciones significa una comunicación más clara..

No dar demasiadas opciones

Demasiadas opciones aumentan la carga cognitiva de sus lectores, lo que hace que tengan menos probabilidades de tomar una decisión..

Piense cuál es el requisito mínimo para que alguien haga clic en su sitio web y luego introduzca gradualmente más detalles. Sobrecargar a las personas con demasiadas opciones al principio solo fomentará el abandono de tareas.

Si está intentando que sus suscriptores elijan un producto y lo compren, no presente todas las opciones en el correo electrónico. Simplemente consígalos en su sitio web y comience a introducir la complejidad necesaria allí..

Trate de involucrar gradualmente a las personas

A veces es intimidante recibir un correo electrónico que dice de inmediato: "¡COMPRARLO! ¡INSCRIBASE! ¡COMPROMETE!"

En su lugar, intente llevar a la gente a su sitio en un paso previo del viaje, como "seleccione el tamaño de su zapato para ver los estilos disponibles" en lugar de "comprar estos zapatos".

Tener un punto focal

Haga que la llamada a la acción principal sea el punto focal principal de su correo electrónico. Asegúrese de que sus lectores no tengan que buscar una llamada a la acción en un mar de igualdad.

Crear un punto focal es fácil. En primer lugar, asegúrese de tener un objetivo principal. Entonces, solo necesita hacerlo más grande que todo lo demás, y asegurarse de que haya suficiente espacio alrededor de él para que el ojo se acerque primero a esta área. Esto se aplica más al diseño de su escritorio cuando un usuario ve una gran cantidad de correo electrónico a la vez.

Usa los espacios en blanco alrededor de los elementos

Si tiene muchas cosas que son todas de tamaño y peso similares sin espacios en blanco a su alrededor, aparecerán como un gran bloque amorfo que el ojo simplemente saltará. Usa espacios en blanco alrededor de los elementos para ayudar a llamar la atención sobre las cosas que importan.


¡Prueba esto! Un punto focal claro y una estructura que guía al lector..

Consejos universales

Si la gente quiere irse, déjalos ir

No entierre, oculte u oculte su información de cancelación de suscripción. Además de ser ilegal en muchos países, es grosero y contraproducente. Si alguien desea darse de baja de su boletín informativo y usted no puede hacerlo, no volverá a ser un suscriptor feliz. Solo generará mala voluntad hacia su marca, ya que se verán obligados a continuar procesando sus correos electrónicos (o configurarán un filtro para enviar sus mensajes a la basura).

Evite tener demasiadas divisiones verticales

Mientras más divisiones verticales haya en un diseño, más distraerá el ojo. Se adhieren a dos o tres divisiones verticales dentro de una cuadrícula.

Los bordes sólidos también distraen mucho la vista, así que manténlos al mínimo.


¡Prueba esto! Menos divisiones verticales lo hacen más fácil para el ojo.

Consideraciones prácticas

Mantenlo por debajo de 600px de ancho

Generalmente, este es el ancho máximo más seguro para el diseño de su escritorio para garantizar que los usuarios no tengan que desplazarse horizontalmente.

Usar mejora progresiva

Antes de dar a cada cuadro las esquinas redondeadas y las sombras, piense cómo funcionará su diseño sin estas mejoras Considérelo como su diseño 'base', al que agregará sus esquinas redondeadas y sombras como mejoras.

La creación de formas en negrita con bordes cuadrados se ve igual de bien, y los usuarios de los nuevos clientes de correo electrónico podrán ver sus esquinas redondeadas como un bono adicional.

Este enfoque le ahorrará mucho tiempo a la hora de crear su correo electrónico. Si tiene que crear un cuadro de texto con esquinas redondeadas con una sombra paralela y tiene que funcionar en cada cliente de correo electrónico, tendrá que crear los efectos utilizando imágenes, lo que puede llevar mucho tiempo, especialmente al crear plantillas reutilizables..

Dale a tu diseño un poco de sala de respiración

Aproveche el hecho de que no siempre es posible hacer que las cosas se vean idénticas en todos los clientes de correo electrónico hasta el último píxel. Diseñe con esto en mente para aliviar los dolores de cabeza en el futuro.

Cree diseños que tengan un poco de espacio para respirar, donde no importará si un cliente agrega 7 píxeles de espacio misterioso debajo. Por lo menos, absténgase de detalles minúsculos extra-delicados que se verán rotos si son un píxel de salida..

Considerar toda la experiencia

Su correo electrónico es un todo cohesivo, así que piense en cómo funciona todo junto. Los usuarios verán el correo electrónico en su bandeja de entrada primero y leerán el nombre del remitente, el asunto y el encabezado anterior. Entonces probablemente verán una versión de su correo electrónico con imágenes deshabilitadas, la predeterminada para la mayoría de los clientes de correo electrónico. Finalmente, verán su correo electrónico como usted lo quiso, si habilitan imágenes.

Asegúrese de que todo esté bien unido y que los suscriptores aún puedan entender su mensaje, incluso con las imágenes desactivadas.


En la bandeja de entrada de correo electrónico (izquierda) y con las imágenes desactivadas (derecha).

No incluyas tu mensaje principal en una imagen. Será bloqueado por defecto y muchos clientes de correo electrónico tampoco mostrarán sus etiquetas alt.

En el siguiente ejemplo, puede ver cómo casi todo el mensaje se perdería sin las imágenes activadas, ya que todo el texto está contenido en las imágenes y el texto alternativo no ha sido diseñado para que sea legible..


Un correo electrónico de viajero frecuente de Velocity con imágenes desactivadas (izquierda) e imágenes activadas (derecha).

Estilo de sus etiquetas Alt

Puede agregar estilos CSS a las imágenes (o sus celdas primarias o etiquetas de enlace) para asegurarse de que se muestren bien en los clientes que admiten etiquetas alt. Esto realmente puede mejorar la experiencia global para sus suscriptores.

Prueba de ceguera al color

Si está utilizando Photoshop, esto está integrado. También hay muchas herramientas que le permitirán ver cómo su diseño se verá en el 10% de las personas con algún tipo de deficiencia de visión del color..

Vincular todo

Al construir, no solo vincule sus botones. Asegúrese de vincular todo para que los usuarios puedan hacer clic en cualquier lugar. Vincular la imagen, el botón y el titular. Heck, incluso vincular el texto si funciona.

Cómo diseñar un correo electrónico amigable para móviles

Hay algunas formas en las que puede acercarse a la creación de un correo electrónico compatible con dispositivos móviles..

1. Columna única, diseño de dispositivo agnóstico

Esta es sin duda la forma más fácil de tener un correo electrónico compatible con dispositivos móviles. Usando este método, las imágenes y el texto se configuran para ser bastante grandes, de modo que si el correo electrónico se ve en un escritorio o en un móvil, la fuente es legible y las imágenes ya son lo suficientemente grandes..

La ventaja de este tipo de diseño es que solo necesita codificar un diseño único. Definitivamente es tu opción más rápida y fácil. Los clientes de teléfonos inteligentes que admiten escalar escalarán su correo electrónico a un ancho del 100%, y en aquellos que no lo hagan, habrá muy poco desplazamiento horizontal.

El inconveniente es que la versión de escritorio es muy grande en escala (lo que personalmente no veo como un inconveniente).

Para lograr este diseño:

  1. Diseña tu correo electrónico a aproximadamente 450px de ancho
  2. Los encabezados deben ser al menos 30px
  3. La copia del cuerpo debe ser de al menos 20px

2. Diseño de correo electrónico totalmente sensible

Un correo electrónico HTML completamente sensible utiliza consultas de medios para mostrar el correo electrónico de cierta manera, dependiendo del tamaño del dispositivo en el que se está viendo. Casi ninguno de los principales clientes de escritorio y correo web admite consultas de medios, pero muchos clientes de correo de tabletas y teléfonos inteligentes sí lo hacen. Esto significa que la codificación de los correos electrónicos de respuesta es un poco cara a cara en comparación con la codificación de los sitios web de respuesta, en el sentido de que la versión de su escritorio es la versión "base" y utiliza una consulta de ancho máximo para ajustar el diseño a dispositivos más pequeños.

La ventaja de este tipo de diseño es que puede crear un gran correo electrónico de varias columnas que se traduce en una versión móvil de una sola columna fácil de leer. Las consultas de medios también son versátiles porque puede apuntar a tamaños de pantalla específicos y también a pantallas de densidad de píxeles específicas (para mostrar imágenes de alta resolución).

El inconveniente es que la aplicación Gmail para Android (el cliente de correo más popular en Android) no admite consultas de medios, y puede generar algunos resultados inusuales al procesar sus compilaciones de correo electrónico de respuesta total. Los correos electrónicos completamente receptivos también tardan mucho más tiempo en codificarse que sus primos agnósticos del dispositivo.

3. Diseño de correo electrónico completamente fluido

Piense en esto como una respuesta sin las consultas de los medios..

Este método consiste en crear un diseño fluido, 100% ancho, con un ancho máximo de alrededor de 600 px establecido en la mesa exterior. Se requieren comentarios condicionales (para Outlook), así como una consulta de medios (para Apple Mail que, hilaramente, no admite la propiedad de ancho máximo).

El beneficio de este tipo de diseño es que responderá a todos los clientes de correo electrónico, incluida la aplicación Gmail para Android. Este método también se puede utilizar junto con las consultas de medios para refinar aún más el tamaño del texto y los botones en los clientes que los admiten.

El inconveniente es que solo funcionará bien con diseños que son bastante sencillos y generalmente no tienen más de una columna. El contenido de dos columnas está bien siempre que sea lo suficientemente pequeño para verse bien en una columna estrecha en la pantalla de un teléfono inteligente.

También tiene que poder usar anchos porcentuales para sus imágenes, lo que no siempre es posible al crear plantillas (a menudo las imágenes en las plantillas deben tener un ancho de píxeles establecido).

Mejorando aún más su diseño de correo electrónico

Y, finalmente, hay algunas cosas extravagantes que puede utilizar para comenzar a crear correos electrónicos realmente sofisticados que realmente se destacan..

Imágenes de fondo

Las imágenes de fondo solían ser algo para la pila "Demasiado difícil", pero gracias a Stig Morten Myre y la gente de Campaign Monitor, ahora hay un generador super fácil de Fondos de correo electrónico a prueba de balas que elimina toda la molestia. Ya no es necesario restringir la adición de imágenes de fondo a sus campañas..

Fuentes Web

El uso de fuentes web también es una excelente manera de hacer que su diseño se destaque del resto. Con una pequeña consideración adicional de diseño y un poco de tiempo de compilación adicional, es fácil implementar fuentes web que se mostrarán realmente bien en una sorprendente cantidad de clientes de correo electrónico.

Animación CSS3

Los clientes de correo electrónico modernos (como Apple Mail y los dispositivos iPhone y Android) son compatibles con la animación CSS3, lo que significa que puedes empezar a pensar en agregar algunas cosas realmente geniales a tus campañas. Las transiciones, así como las animaciones de fotogramas clave, se reproducen bastante bien y pueden ser una adición fantástica al correo electrónico (siempre que se degraden con gracia) porque no aumentan el tamaño del archivo tanto como lo haría un GIF animado.

Conclusión

Hay una mucho A tener en cuenta a la hora de diseñar por email! Los consejos que se enumeran en este artículo le darán un buen comienzo y buscarán más publicaciones en esta serie que abordarán diversos aspectos (como el uso de fuentes web y el diseño responsivo) con más detalle..