Consejos de diseño de correo electrónico y errores comunes a tener en cuenta

Es un hecho bien conocido que las personas tienden a prestar atención primero a los elementos visuales, lo que a menudo les hace preferir la forma al contenido. El marketing por correo electrónico no es una excepción. Es la estructura de un correo electrónico, ilustraciones, formato de texto, paleta de colores y optimización móvil lo que generalmente determina si los usuarios terminarán de leer su correo electrónico y completarán la acción deseada.

El diseño del correo electrónico influye no solo en la percepción del lector, sino también en la reputación del remitente. Los proveedores de buzones de correo a menudo marcan los correos electrónicos con errores de diseño y diseño como spam, por lo que es una buena razón por la que debe preocuparse por el diseño de su plantilla de correo electrónico.

En este artículo, le proporcionaremos algunos consejos de diseño de correo electrónico sobre cómo hacer que sus correos electrónicos sean visualmente atractivos y efectivos en general. También hablaremos sobre los errores de diseño más comunes y mostraremos ejemplos de correos electrónicos bien diseñados de diferentes marcas.

Consejos de diseño de plantillas de correo electrónico

Una plantilla es la base de cada correo electrónico. Define el diseño y la apariencia visual de sus futuros correos electrónicos, lo que influye en los resultados generales de sus campañas.

En el diseño de su plantilla de correo electrónico, debe seguir las mismas pautas visuales que usaría para el sitio web, las redes sociales y otras plataformas de una empresa. Repasemos algunos errores comunes de diseño de correo electrónico y consejos de diseño de correo electrónico que será mejor que tenga en cuenta al crear su plantilla.

Errores a evitar

1. No cambie el diseño de la plantilla de correo electrónico con demasiada frecuencia. Si los usuarios reciben un correo electrónico diferente cada vez, les resultará más difícil recordarlo y reconocerlo.

2. No utilices imágenes en lugar de texto, porque

• es posible que las imágenes no se muestren;
• tendrá que cambiar la plantilla manualmente cada vez que desee cambiar el texto;
• cualquier código de promoción colocado en la imagen será imposible de copiar y pegar si es necesario;
• Los proveedores de buzones de correo pueden marcar los correos electrónicos que solo contengan imágenes como spam.

3. No utilice su color corporativo como el color principal de su correo electrónico si es demasiado llamativo y brillante.

4. No utilice un fondo brillante o complejo para el texto.

5. No dude en contar con la ayuda de un diseñador de correo electrónico profesional si tiene esa oportunidad. Un correo electrónico diseñado de forma incorrecta puede arruinar la reputación de una empresa o simplemente ser marcado como spam por un proveedor de buzones de correo. Mientras tanto, un diseñador profesional podrá crear un diseño de plantilla de correo electrónico duradero que mantendrá a sus suscriptores interesados ​​y comprometidos.

Mejores prácticas a seguir

1. Siempre diseñe plantillas de correo electrónico basadas en las pautas visuales de su empresa. Adoptar un enfoque holístico de su apariencia digital aumentará el reconocimiento de la marca y aumentará la lealtad de los clientes.

2. Si decide realizar pruebas A / B, pruebe elementos separados en lugar de un correo electrónico completo. De esta manera, sabrá con certeza qué detalles son más o menos efectivos, y el estilo de su empresa seguirá siendo reconocible para la audiencia.

3. Cree plantillas independientes para diferentes tipos de correos electrónicos y diséñelas con un estilo corporativo similar. Esto ayudará a sus suscriptores no solo a distinguir sus correos electrónicos de los de cualquier otra marca, sino también a diferenciarlos entre sí en función de su tipo.

4. Coloque la información más importante y la llamada a la acción en el primer desplazamiento y asegúrese de que todo el correo electrónico se vea equilibrado. Si sus titulares y descripciones están cuidadosamente diseñados, los botones de llamada a la acción son llamativos y las imágenes son de alta calidad, los destinatarios serán guiados sin problemas a lo largo de todo el correo electrónico directamente a la llamada a la acción.

5. Intente hacer que sus correos electrónicos tengan un ancho de 600px para que se muestren correctamente en cualquier cliente de correo electrónico.

6. Imágenes y bloques de texto alternativos. Es importante no solo para la legibilidad sino también para una mejor entrega de sus correos electrónicos, especialmente si comenzó a enviar correos electrónicos no hace mucho tiempo. En general, le recomendamos que siga la proporción de texto a imagen de 80:20 o 60:40.

7. Recuerde que para un fondo brillante, siempre es mejor usar un marcador de posición opaco que contraste.

8. A menos que pueda confiar en la ayuda de un diseñador, puede diseñar plantillas de correo electrónico usted mismo usando editores de correo electrónico de arrastrar y soltar.

Ahora veamos algunos ejemplos que demuestran estas mejores prácticas en acción.

Hemos tomado los dos primeros ejemplos de Behance. Ambas plantillas, una para los correos electrónicos de bienvenida y otra para los correos electrónicos semanales de “Nueva inspiración”, siguen principios de diseño similares, pero lucen un poco diferentes. El correo electrónico de bienvenida tiene un título grande y claro, imágenes de alta calidad, un diseño de cuadrícula roto y una fuente legible. Los bloques de texto e imagen se alternan, lo que facilita la lectura del correo electrónico.

En cuanto a un correo electrónico semanal, en general es más corto y pone más énfasis en las imágenes, con un botón de llamada a la acción en negrita en la parte superior.

Aquí hay otro ejemplo de una buena plantilla de correo electrónico de Downshiftology. La empresa puede presumir de enviar correos electrónicos minimalistas con una cuadrícula bien estructurada. Por lo general, comienzan con un encabezado y una introducción seguidos de algunas fotos de alimentos de alta calidad y los hipervínculos a las recetas. Una alineación justificada y colores claros hacen que el correo electrónico sea agradable de leer y fácil de leer.

Consejos de diseño de correo electrónico receptivo

Mientras piensa en el diseño y la plantilla de su correo electrónico, siempre tenga en cuenta cómo se verán en diferentes dispositivos, incluido el móvil. A continuación, se incluyen algunos errores que debe evitar y algunos consejos que debe seguir para un diseño de correo electrónico receptivo.

Errores a evitar

1. Evite el uso de varios hipervínculos juntos, ya que puede resultar en su desorden. Un destinatario puede tocar accidentalmente el enlace incorrecto situado demasiado cerca del que quería hacer clic.

2. No hagas que tus botones de llamada a la acción sean demasiado pequeños. Hacer zoom para hacer clic en un botón puede frustrar mucho a los destinatarios.

3. No utilice fuentes de menos de 14 píxeles para el cuerpo del correo electrónico y 20 píxeles para los titulares de los correos electrónicos, ya que esto hará que su correo electrónico sea difícil de leer en pantallas pequeñas.

Mejores prácticas a seguir

1. Siga las reglas de los correos electrónicos receptivos. Por ejemplo, si su plantilla de correo electrónico consta de varias columnas y desea que se ajusten a las pantallas de los dispositivos móviles, inserte un código especial y cree su correo electrónico dentro de una tabla.

2. Utilice plantillas de correo electrónico adaptables listas para usar de SendPulse o cree las suyas propias en nuestro creador de arrastrar y soltar si no quiere meterse con el código. Ya están ajustados tanto para escritorio como para dispositivos móviles; además, siempre puede obtener una vista previa de su plantilla de correo electrónico para ambos dispositivos.

Eche un vistazo al siguiente correo electrónico de Uniqlo, que se muestra bien tanto en computadoras de escritorio como en dispositivos móviles. Esto es lo que ve un usuario de escritorio:

El diseño de su versión móvil es un poco diferente:

Consejos sobre cómo utilizar texto en el diseño de su plantilla de correo electrónico

Incluso la copia más atractiva no llamará la atención si parece poco atractiva o es difícil de leer. Por el contrario, los usuarios difícilmente descuidan un correo electrónico con un diseño ordenado, párrafos cortos, titulares llamativos y aspectos destacados adecuados de la información más importante.

Errores a evitar

1. No mezcle demasiadas fuentes, estilos, colores y tamaños de fuente en un correo electrónico, ya que pueden hacer que se vea descuidado.

2. Evite el uso de fuentes demasiado pequeñas o pálidas; en ambos casos, su correo electrónico puede resultar difícil de leer.

3. No cree un correo electrónico basado en texto sin párrafos, titulares y puntos clave resaltados. Lo más probable es que aburra a sus lectores, incluso si su texto es realmente interesante.

Mejores prácticas a seguir

1. Elija una o dos fuentes principales para los titulares y el texto principal, no más.

2. Utilice fuentes básicas que serán representadas correctamente por la mayoría de los clientes de correo electrónico como Gmail, Yahoo, Outlook y otros. Si un servicio no puede reconocer su tipo de letra, lo reemplazará con otro tipo de letra, lo que puede afectar negativamente al diseño general de la plantilla de correo electrónico. Se considera que las fuentes más seguras son Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier e Impact.

3. No dude en utilizar sus propias fuentes corporativas en banners e imágenes. Sin embargo, asegúrese de que la fuente en el banner y en el correo electrónico combinen bien.

4. Divida su texto en secciones usando titulares y párrafos cortos. Un texto bien estructurado siempre es más fácil de leer.

5. Haga que su fuente no sea menor a 14px.

Uno de los ejemplos de un buen diseño de texto es un correo electrónico de DesignLab. Tiene un título centrado en negrita y consta de tres párrafos cortos seguidos de la CTA prominente, resaltada en naranja.

Consejos sobre el uso del color en el diseño de plantillas de correo electrónico

El color es una herramienta poderosa que puede crear el ambiente de un correo electrónico y fortalecer su mensaje. Sin embargo, al elegir los colores incorrectos, corre el riesgo de hacer que su correo electrónico sea demasiado aburrido, distractor o caótico.

Errores a evitar

1. No abrume a sus lectores con un montón de colores. Demasiado rojo, amarillo como fondo para el texto o una combinación de colores que no coinciden pueden arruinar la impresión que está tratando de causar, ya que probablemente distraigan a los usuarios de la idea principal.

2. Abstenerse de demasiados gradientes. Si se usan de manera poco profesional, pueden hacer que su correo electrónico se vea descuidado o disminuir la visibilidad del texto.

Mejores prácticas a seguir

1. Use colores llamativos y brillantes solo para enfatizar elementos o palabras separados, mientras elige colores más calmantes para su fondo.

2. Tenga en cuenta las preferencias de su audiencia al elegir un tema de color. Por ejemplo, Kissmetrics informó que los hombres prefieren colores contrastantes, mientras que las mujeres eligen paletas de colores más suaves. Para saber qué colores les gustan más a sus usuarios, realice pruebas A / B e intente cambiar el color de uno o dos elementos a la vez para medir los resultados con precisión.

3. Utilice herramientas como Adobe Color para elegir una paleta de colores perfecta que se verá visualmente equilibrada.

B&Q, por ejemplo, usa su color naranja corporativo como resaltador y se adhiere a tonos más neutros para el resto de los elementos.

Consejos para el diseño de encabezados de correo electrónico

El encabezado es el primer bloque de un correo electrónico colocado en la parte superior. Por lo general, contiene un logotipo, enlaces a secciones del sitio web, detalles de contacto y otra información general. El encabezado del correo electrónico, junto con el nombre del remitente, ayuda a los usuarios a identificar un remitente.

Errores a evitar

1. No intente poner demasiada información en el encabezado. Sí, puede proporcionar enlaces a su sitio web, por ejemplo, pero si también coloca sus enlaces de redes sociales, información de contacto detallada y otros bloques dentro de su encabezado, este último se volverá demasiado grande y probablemente confuso.

2. No utilice imágenes de mala calidad en su encabezado ni en ningún otro lugar de su correo electrónico, ya que esto dará la impresión de un diseño amateur.

Mejores prácticas a seguir

1. Enfatiza la información principal de tu encabezado y deja que los otros elementos sean un poco más pequeños o menos brillantes.

2. Utilice encabezados temáticos especiales durante las vacaciones, temporadas de rebajas y otros eventos especiales para crear el ambiente. También puede variar los encabezados para diferentes tipos de correos electrónicos, como resúmenes o correos electrónicos transaccionales.

Eche un vistazo al encabezado minimalista en el correo electrónico de TheRealReal:

Sugerencias de diseño de pie de página de correo electrónico

El último bloque de un correo electrónico, pero no el menos importante, es su pie de página. Por lo general, contiene una firma de correo electrónico, un enlace para cancelar la suscripción, datos de contacto de la empresa y enlaces a las redes sociales. Aunque este bloque parece ser el más fácil de diseñar, todavía hay algunos errores que las empresas cometen con frecuencia.

Errores a evitar

1. No abrume su pie de página con demasiada información general, para que no se vea desordenado y confuso.

2. Nunca oculte el enlace para darse de baja, hágalo demasiado pequeño o apenas visible. Si un usuario tiene dificultades para darse de baja, lo más probable es que haga clic en "Spam", lo que siempre es una mala noticia para la reputación de su remitente.

Mejores prácticas a seguir

1. Incluya solo los enlaces a su pie de página que realmente serían importantes para sus usuarios; intente agrupar bloques de contenido similares para mejorar la legibilidad.

2. Sea honesto con su audiencia y haga que su enlace para darse de baja sea bien visible.

3. Agregue una firma de correo electrónico creativa a su pie de página para terminar su correo electrónico con una nota amigable y deje que el destinatario espere tener noticias suyas la próxima vez.

El pie de página del correo electrónico de LinkedIn, que puede ver a continuación, sigue perfectamente los consejos mencionados anteriormente. Contiene una firma de correo electrónico, un botón claro para cancelar la suscripción y los datos de contacto de la empresa, sin que se proporcione ninguna información innecesaria.

Consejos sobre cómo usar imágenes en el diseño de correo electrónico

Las imágenes juegan un papel importante en el diseño de un correo electrónico: una elección inteligente de imágenes puede poner a sus suscriptores en una mejor posición de inmediato y garantizar su participación con el correo electrónico hasta el final.

Errores a evitar

1. No cree correos electrónicos que solo contengan imágenes, ya que el 43% de los usuarios desactivan las imágenes en sus clientes de correo electrónico; sin embargo, tenga en cuenta que el contenido de su correo electrónico debe permanecer claro incluso si las imágenes no son visibles.

2. No haga imágenes más grandes de lo recomendado. Por ejemplo, si se le aconseja que use imágenes de 300 px de ancho, no use las de 1200 px de ancho.

Mejores prácticas a seguir

1. Optimice las imágenes antes de agregarlas a su correo electrónico. Un correo electrónico con imágenes pesadas tardará más en cargarse, especialmente en teléfonos móviles. Lo más probable es que un usuario no espere a que se carguen las imágenes y simplemente cerrará el correo electrónico. Para optimizar las imágenes, use herramientas como Squoosh o TinyPNG.

2. Agregue texto alternativo a sus imágenes para que los usuarios comprendan de qué se tratan las imágenes en caso de que no se carguen automáticamente.

3. Aumenta el tamaño de tus iconos 2 veces más, para que se vean bien en dispositivos iPhone y Macbook con pantalla Retina. Por ejemplo, si necesita usar un ícono de 70 × 20, cargue una versión de 140 × 40 en el servidor y luego cambie el tamaño del ícono en su correo electrónico usando el siguiente atributo: width="70" .

¡Nota! Cuando usa este método, solo cambia el tamaño de una imagen, no su peso. Es por eso que primero debes optimizar tus imágenes y luego subirlas al servidor.

4. Haga que se pueda hacer clic en las imágenes. Si echas un vistazo a un mapa de clics de tus correos electrónicos, verás con mayor frecuencia que las personas hacen clic en las imágenes. Utilice esa ventaja para llevar a las personas a su sitio web o redes sociales.

5. Utilice imágenes de alta calidad tomadas por usted mismo o encontradas en sitios web de fotografías de archivo.

Pasando a los ejemplos, puede ver que TheSill recuerda agregar texto alternativo que aclara qué tipos de flores se representan en las imágenes.

Mientras tanto, The New York Times Magazine utiliza imágenes de alta calidad e ilustraciones únicas para alegrar sus correos electrónicos llenos de texto.

Consejos de diseño de CTA

Una llamada a la acción en un correo electrónico es un enlace o un botón creado para obtener algún tipo de respuesta de un usuario: registro, compra o contacto con un gerente. Un llamado a la acción claro y su ubicación correcta lo ayudarán a aumentar su CTR, mientras que los errores en un CTA pueden complicar la capacidad de su suscriptor para realizar una acción deseada, haciendo que su correo electrónico simplemente sea inútil.

Errores a evitar

1. No oculte un solo botón de llamada a la acción al final de su correo electrónico o incluso detrás del primer desplazamiento.

2. No haga que los usuarios adivinen lo que deben hacer; en su lugar, bríndeles una llamada clara.

3. No oculte sus hipervínculos si los usa en lugar de botones de llamada a la acción. No deberían perderse con otros elementos del correo electrónico. Tampoco deben ser demasiado pequeños o desaturados.

Mejores prácticas a seguir

1. Coloque su CTA principal en el primer pergamino. Si su correo electrónico es largo, puede repetir la llamada a la acción un par de veces a lo largo del mismo.

2. Asegúrese de que su línea de asunto y su CTA estén dedicados al mismo tema.

3. Haga que su botón de llamada a la acción sea brillante y visible. Debe contrastar con el fondo, el texto y otros elementos de un correo electrónico.

En uno de sus correos electrónicos, LinkedIn, por ejemplo, no solo repitió su CTA dos veces, sino que también lo hizo audaz y contrastante.

En otro ejemplo de Neil Patel, puede ver que la línea de asunto del correo electrónico se correlaciona con el texto de la CTA:

Una lista de verificación de consejos de diseño de correo electrónico

Para ayudarlo a revisar fácilmente sus correos electrónicos antes de enviarlos, hemos reunido todas las pautas que debe recordar y las hemos agrupado por categorías.

Creemos que, con todos estos consejos a mano, podrá crear correos electrónicos receptivos y bien diseñados, y no sin SendPulse. El servicio también lo ayudará a probar A / B diferentes elementos de su correo electrónico y elegir las mejores opciones para su campaña.