() translation by (you can also view the original English article)
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 una oportunidad, 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 usar nombres de remitentes, líneas de asunto, preencabezados o copia enigmáticos o crípticos. Esto solo confundirá a sus lectores y hará que sea más probable que eliminen su correo electrónico o lo marquen 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 de asunto, el encabezado anterior y su contenido "por encima del pliegue" sean significativos y relevantes para su razón de contactar a sus lectores.
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 se abren por un período de tiempo muy breve, por lo que la función de cada elemento debe ser clara.
Haz que tus enlaces sean obvios
Crea botones bonitos, grandes, fáciles de hacer clic y que se puedan cambiar para tus enlaces. En dispositivos móviles, haz que sean 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.
Aproximadamente el 50% de las aperturas están en dispositivos táctiles en estos días, así que evite un lenguaje que no tenga sentido, como "haga clic aquí".
No dude en agregar una flecha (los estudios han demostrado que son más efectivos) pero, como siempre, pruebe 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 largo, especialmente porque un correo electrónico de aspecto prolongado abrumará a sus lectores con fatiga mental y los hará más propensos para presionar "Eliminar".
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á).
Puedes decir más, más tarde
Si estás en el negocio de enviar contenido más extenso que disfruten tus lectores, definitivamente no estoy diciendo que no haya lugar para eso 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 adherirse a 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 contenido más extenso, 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 extenso y el usuario ha recorrido todo el camino a través 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.
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 acerca de una cosa, intente no diluir el mensaje agregando muchas otras cosas debajo o en una barra lateral. Con cada opción adicional, aumenta 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 le des 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 conéctelos a 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 correos electrónicos 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á. Use espacios en blanco alrededor de los elementos para ayudar a atraer la atención hacia las cosas que importan.
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én estos al mínimo.
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.
Utilizar 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 clientes de correo electrónico más nuevos 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 lograr 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 las 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.
No incluyas tu mensaje principal en una imagen. Se bloqueará de forma predeterminada 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.
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á incorporado. También hay muchas herramientas que le permitirán ver cómo se verá su diseño 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.
El beneficio 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:
- Diseña tu correo electrónico a aproximadamente 450px de ancho
- Los encabezados deben ser al menos 30px
- La copia del cuerpo debe ser de al menos 20px
2. Diseño de correo electrónico totalmente sensible
Un correo electrónico HTML totalmente sensible utiliza consultas de medios para mostrar el correo electrónico de una determinada 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 teléfonos inteligentes y tabletas 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 dirigirse 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 con gran capacidad de respuesta. Los correos electrónicos completamente receptivos también tardan mucho más tiempo en codificarse que sus primos agnósticos.
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, hilarantemente, no admite la propiedad de ancho máximo).
La ventaja 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 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íxel establecido).
Mejorando aún más su diseño de correo electrónico
Y, finalmente, hay algunas cosas extravagantes que puedes usar para comenzar a crear correos 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 un poco de 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 un sorprendente número 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 muestran 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 mucho que tener en cuenta al diseñar el correo electrónico! 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.
