Anatomía del correo electrónico perfecto

Anatomía del correo electrónico perfecto

Generales

En cualquier día dado, la mayoría de nuestras bandejas de entrada de correo electrónico están inundadas con un aluvión de correos electrónicos que hacen poco más que darnos otra tarea en el trabajo, entonces, los marcamos a todos como no leídos (sin leer) o cancelamos la suscripción por completo.

El correo electrónico es un componente importante de una estrategia de marketing, y su éxito depende en gran medida de lo bien que elabores tus campañas de email.

Es importante que los destinatarios de una campaña de correo electrónico

hayan aceptado por recibir este contenido y que cada correo ofrezca algo valioso.

Las campañas de correo electrónico son una parte importante del inbound marketing, un proceso continuo en el que los vendedores se reúnen con los compradores en cualquier etapa del camino de compra en el que se encuentren.

Aquí hay algunos ejemplos de diferentes propósitos que tu campaña de correo electrónico puede tener en cuenta:


Atraer


El correo electrónico puede ser un canal de promoción eficaz para el contenido de alto valor que creas en tu tienda en línea.


No todos los que se suscriben a tu lista de correo electrónico están listos para comprar. Puedes utilizar el email marketing para mantenerte en la mente del comprador mientras proporcionas el contenido educativo que es más relevante para ellos.


A medida que te mantienes en la mente del comprador, también puedes considerar formas de identificar los clientes potenciales que tienes con la intención de compra más alta y proporcionar contenido centrado en la conversión que los “alimente” hacia una venta (o al menos hacia la preparación para las ventas).

También puedes crear campañas para capturar una conversión de ventas de clientes potenciales que están cerca de una decisión de compra. (Un ejemplo podría ser la creación de campañas de “carrito abandonados” para recuperar conversiones de ventas perdidas.)


Los correos electrónicos transaccionales son los correos electrónicos que se envían después de que un cliente toma una acción en particular, como confirmaciones de envío, pedido y entrega.

Además de notificar a tu cliente de su actividad reciente, los correos electrónicos transaccionales son una gran oportunidad para crear conciencia de marca y lealtad al cliente.


Puedes crear campañas de email marketing para tus clientes existentes para promover oportunidades de ventas adicionales (up selling) y ventas cruzadas (cross selling).

También para recordarle al cliente que han habido nuevos lanzamientos o simplemente invitar a alguien que ya te compró a que te compre nuevamente, después de un tiempo.

Los conceptos básicos

Hay algunas reglas estéticas básicas que puedes seguir para asegurarte de que tus plantillas de correo electrónico se vean geniales y sean consistentes con tu tienda en línea.

Diagrama de correo electrónico

Cada correo electrónico tiene un área de contenido rectangular. Debido a las limitaciones de estilo y CSS en los clientes de correo electrónico, el área de contenido que contiene texto e imágenes debe ser un rectángulo y tener un ancho fijo. El ancho del área de contenido debe estar entre 500 y 700 px. Más amplio, y es posible que sus destinatarios deban desplazarse para ver todo el correo electrónico. Menos a este tamaño aparecerá muy estrecho en los escritorios.


Tienes que elegir los colores de fondo de estas áreas. Hay dos estrategias sobre cómo elegir colores para tus fondos de correo electrónico y contenido.

Usa blanco o negro para los fondos de contenido.

Un punto a tener en cuenta es que el negro “puro” (código hex #000) crea demasiado contraste, así que use un ligeramente negro, como #111 o #222.

Usa un fondo de contenido blanco sobre un fondo de correo de color o estampado.

Esto enmarcará el contenido del correo sin crear un contraste demasiado marcado. Una buena opción para el color de fondo es el color principal de tu tienda en línea. Si deseas agregar textura a tu correo electrónico, descarga fondos estampados de forma gratuita.

Usa una imagen no repetida como fondo del correo electrónico.

Otro método más audaz es establecer una imagen que no se repita como fondo.


Los bordes enmarcan tu contenido y, si estás utilizando un correo electrónico y un fondo de contenido blanco, distingue los dos entre sí. El ancho de tu borde puede oscilar entre 1 y 10 px; en el ejemplo anterior, utilicé un borde de 1 px. Si deseas que tu correo electrónico se sienta realmente enmarcado, elige un borde más grueso.

Fuentes, colores y estilo

La fuente que usas en tus correos electrónicos debe ser la misma o similar a la que usa en tu tienda en línea. Diferentes computadoras vienen con diferentes conjuntos de fuentes instaladas. Si estás utilizando una fuente personalizada en tu sitio, es posible que no puedas usar la misma fuente para tus correos electrónicos. Muchos clientes de correo electrónico no permiten importar fuentes personalizadas, por lo que si usas una fuente personalizada en su correo electrónico y alguien la abre en un ordenador que no admite fuentes personalizadas, por defecto será una fuente genérica.

Si estás utilizando una fuente personalizada en tu tienda,

es posible que no puedas usar la misma fuente para tus correos.

Si una fuente personalizada no está disponible, esto afectará el espaciado y el ajuste de texto. Por ejemplo, si una línea de texto personalizado no se ajusta, la fuente genérica puede agregar una línea de texto adicional al correo electrónico.

Si utilizas diferentes fuentes para tus encabezados y texto de párrafo en tu sitio web, haz lo mismo en tus correos electrónicos.

Tamaño de fuente

Es importante que los tamaños de fuente que utilizas sean consistentes en toda tu tienda en línea y correos electrónicos. Para textos de párrafo, o normal, usa el mismo tamaño de fuente que usas en tu sitio web. Esto es probable entre 11 px y 16 px. Además del texto del párrafo, debes tener cuatro tipos más grandes que correspondan a los tipos de encabezado: H1, H2, H3 y H4. Los tamaños de tus encabezados deben cambiar en relación con el tamaño de fuente de tu párrafo. La siguiente tabla te ayudará a encontrar tamaños de encabezados que funcionarán para tus plantillas.

Párrafo Título 4 Título 3 Título 3 Título 1
11 px 18 px 28 px 45 px 72 px
12 px 19 px 31 px 49 px 78 px
13 px 21 px 33 px 53 px 85 px
14 px 22 px 36 px 57 px 91 px
15 px 24 px 38 px 61 px 98 px
16 px 26 px 41 px 65 px 105 px

A pesar de que te mostramos cinco tamaños de fuente diferentes, no tienes que ir más grande que un encabezado H3, ya que habrá una marcada diferencia de tamaño entre tu encabezado H1 y el texto del párrafo. Si necesitas encabezados adicionales después de H3, puedes pasar a H2 y H1. Solo usa dos o tres tamaños de fuente en total. Del mismo modo, puedes reducir la escala del texto de tu párrafo utilizando la proporción áurea para los subtítulos de las imágenes o el texto del encabezado anterior.

Colores

Para ser consistente, la paleta de colores en tus correos electrónicos debe coincidir con la paleta de colores de tu tienda en línea. Las áreas de un correo electrónico donde los colores importan son:

  • Fondo del correo
  • Fondo de contenido
  • Barra de navegación
  • Pie de página
  • Botones
  • Enlaces
  • Texto

Si tus correos electrónicos tienen un fondo de contenido blanco, usa un texto negro u gris oscuro. Como recordatorio, evita usar negro “puro”.

El uso de color para enlaces o botones llama la atención sobre ellos. Los colores son particularmente efectivos cuando se usan con moderación, ya que estallarán contra el blanco y negro. Si usas demasiados colores, por otro lado, tu plantilla se verá ocupada y distraerá a los destinatarios de las áreas principales a las que quieres llamar la atención. Observa la siguiente imagen y nota como destaca más el botón en la plantilla de la derecha.

colorido vs escala de grises

Botones y bordes de estilo

Otro elemento de estilo de tu sitio que debe incluirse en tus plantillas, es la forma de tus botones para invitar a tus clientes a un llamado a la acción (Call To Action CTA). Tu tienda en línea utiliza uno de dos estilos de botones: redondeado o cuadrados. Si los botones de tu sitio web utilizan un pequeño radio de borde, por ejemplo, 2px, utilízalo para los botones de tus correos electrónicos.

A continuación, puedes ver la distinción visual entre botones redondos y cuadrados.

redondo vs cuadrado

Diseño y contenido

Cuantas más decisiones tenga que tomar tu destinatario de correo electrónico, mayor será la carga cognitiva y menores serán las conversiones.

Deberías simplificar tus diseños, deshaciéndote de enlaces innecesarios, elementos de diseño y llamadas a la acción. Al diseñar tus correos electrónicos, demasiado de todo puede ser algo malo, y lo vemos todo el tiempo.

¿Cómo puedes poner esto en práctica en tus diseños de correo electrónico, incluso si no eres diseñador?

Hazlo fácil

La gente está presionada por el tiempo y abrumada por las solicitudes de atención. El oficinista promedio recibe 121 correos electrónicos al día, ¡y eso es solo en su cuenta de trabajo! Entonces, ¿cómo captamos la atención de nuestra audiencia rápidamente mientras destacamos nuestras ofertas y los guiamos para hacer una acción?

Sigue estas prácticas recomendadas:

  1. Facilita el escaneo del contenido con encabezados, subtítulos y texto en negrita.
  2. Prioriza las ofertas poniendo tus mejores cosas en la parte superior y menos significativas en la parte inferior.
  3. Los diseños de una columna funcionan en todos los dispositivos y son menos abrumadores de escanear.

¿Tienes problemas para diseñar para la jerarquía visual? Prueba con los ojos entrecerrados para ver si la priorización y las ofertas son fácilmente escaneables, si todavía puedes decir lo que es más importante, tu diseño está listo. Si no es obvio, ¡vuelve a tu diseño de correo electrónico e intenta hasta que lo sea!

Cupones de descuento

A la gente le encantan los cupones. A los compradores les encanta conseguir una oferta en sus productos y marcas favoritas. A los comerciantes les encanta convertir a sus visitantes en compradores ofreciendo descuentos personalizados o por tiempo limitado.

Integra comunes de descuento en tus correos electrónicos para motivar a tus destinatarios a convertirse en clientes.

Imágenes en correos

Incluso la plantilla de correo electrónico más hermosa del mundo puede arruinarse con malas imágenes. Si bien es cierto que las imágenes son específicas del correo electrónico en el sentido de que probablemente no usará exactamente la misma imagen para múltiples correos electrónicos, hay pautas universales que debe seguir al crear o seleccionar tus imágenes.

  • Elige el tamaño de imagen correcto

Hay un punto medio entre imágenes que son demasiado grandes o demasiado pequeñas. Las imágenes borrosas o granuladas resultan cuando una imagen se escala incorrectamente, es decir, cuando se hace más grande una imagen pequeña. Las imágenes grandes serán más claras, y una regla general a seguir es que tu imagen debe tener el doble de su tamaño original para mantener su calidad en una pantalla de retina. En general, las imágenes más grandes son mejores.

Sin embargo, una advertencia: cuanto más grandes sean tus imágenes, más tiempo tardarán en cargarse. Un largo tiempo de carga puede ser la diferencia entre alguien que lee o ignora tu correo electrónico. Algunos datos informan que el 40% de los visitantes abandonarán tu página si tarda más de 3 segundos en cargarse, y lo mismo ocurre con los tiempos de carga del correo electrónico.

  • Usa imágenes profesionales

Siempre que muestres fotos de tus productos que tomaste tu mismo, asegúrate de que se muestren sobre un fondo de color sólido. Una foto de un producto en la sala o en la barra de la cocina, no hace que parezcas que estás dirigiendo un negocio profesional.

  • Elige el formato de imagen correcto

Hay tres formatos de imagen de uso común: PNG, JPEG y GIF. Los PNG son los mejores. Esto se debe a que no tienen pérdida de calidad. Los JPEG, por ejemplo, son imágenes con que pueden perder calidad.

Debido a que los GIF se pueden animar, son una gran elemento a ciertos correos electrónicos. Por ejemplo, puede crear un reloj de cuenta atrás usando un GIF. Los GIF también pueden añadir humor a un correo electrónico y llamar la atención de los destinatarios. También son una excelente manera de mostrar ciertos productos y sus modos de uso.

kate spade

  • No uses imágenes para reemplazar texto

Las imágenes aumentará el tamaño del archivo y el tiempo de carga de sus correos electrónicos. Normalmente, la razón para usar imágenes en lugar de texto sería incluir una fuente personalizada o una imagen con texto encima. Si estás utilizando una fuente personalizada para tu logotipo o está incluyendo una imagen con una superposición de texto, no hay forma de evitar usar una imagen. Para los encabezados y el texto del párrafo, por otro lado, no uses imágenes en lugar del texto, y con esto quiero decir que no insertes una imagen de la palabra “Bienvenido” en lugar de escribirla.

Si las imágenes de tu correo electrónico no se cargan, un correo electrónico de todas las imágenes se verá en blanco, por no mencionar que los correos electrónicos de todas las imágenes pueden activar filtros de spam. Tus correos electrónicos deben ser coherentes con o sin imágenes.

Debido a que algunos de sus destinatarios de correo electrónico pueden tener las imágenes deshabilitadas, es importante usar texto alternativo. Alt text es una descripción de texto de una imagen. Por lo tanto, una foto de una flor podría tener una descripción de texto alternativo de “Flor”, pero es una buena práctica ser lo más descriptiva posible. En caso de que tus imágenes no se carguen, el texto alternativo describirá lo que se supone que debe representarse, que es mejor que una pantalla en blanco.

Videos en correos

No hay un comercio que debata que el vídeo se está apoderando de Internet. Cerca del 80% del consumo global de Internet es contenido de vídeo.

Como comercio electrónico, sabes que el correo es la base de una tienda exitosa, así que ¿por qué dar el salto para incorporar el vídeo en el marketing por correo electrónico?

Desde el punto de vista de la compatibilidad, el vídeo y el correo electrónico están en una relación que podría describirse mejor como “es complicado“. Algunos de los mayores clientes de correo electrónico, como Gmail, Outlook y Yahoo, todavía no pueden reproducir vídeos incrustados en el correo electrónico. Pero eso no significa que sea una causa perdida para promocionar un video dentro de tu correo electrónico. Hay algunas soluciones fáciles para este problema.

  • Usa una toma fija estática (que parece una miniatura de vídeo)

Es probable que hayas visto esto usado antes en un correo electrónico, una imagen que ha sido manipulada para parecerse a una miniatura de video. Este método es sencillo y efectivo porque sin siquiera leer el texto del correo electrónico, el destinatario recibe el mensaje: “¡Haz clic aquí!” La ciencia detrás de crear una miniatura de video convincente no es terriblemente complicada, una imagen interesante o una cara sonriente generalmente funciona mejor que el texto.

  • Prueba un GIF animado (bucle de una sola toma o varias tomas)

El uso de un GIF animado con una sola toma en bucle o varias tomas puede dar la apariencia de un video funcional en un correo electrónico y ayudar a empujar al lector al ser una llamativa llamada a la acción.

  • Enlace en el texto

Suena contraintuitivo, pero si estás enlazando a un video de terceros o usando un video como referencia, un enlace en el texto del cuerpo puede ser una excelente manera de enviar a tu video.

Temporizadores de cuenta regresiva

Cuando se trata de tomar una decisión, ¿alguna vez tiendes a dudar? ¡Por supuesto que sí! Es natural dudar de sus decisiones, especialmente cuando se trata de hacer una compra en línea.

Entonces, ¿cómo consigues que la gente actúe rápidamente desde tu tienda de comercio electrónico? Necesitas eliminar cualquier distracción potencial que pueda convertir a tus compradores. ¿Cómo? Creando un sentido de urgencia en sus correos electrónicos.

Esencialmente, hay dos formas de mostrar un reloj de cuenta regresiva en sus correos electrónicos: puede usar HTML para codificar uno o puede crear un archivo GIF.

Tenen en cuenta es que los GIF se restablecerán automáticamente cuando un destinatario salga del correo, y permanecerán constantes sin importar cuándo un destinatario abra el correo electrónico: si envías el correo electrónico a las 11:00 PM con una cuenta regresiva durante una hora y un destinatario abre el correo electrónico a las 11:30 PM o al día siguiente, el reloj seguirá leyendo una hora. Esta estrategia es bueno para usar en los carritos abandonados, o cupones de descuento, en donde el objetivo es darle la sensación de urgencia al cliente.

temporizador de cuenta atrás

Alternativamente, puedes codificar tu propio reloj de cuenta atrás usando HTML. Puedes usar Sendtric para crear tus temporizadores e incrustarlos en tu correo.

Aquí hay cuatro recomendaciones para asegurarte de que estás creando un sentido de urgencia.

  • No te excedas. No uses un temporizador de cuenta regresiva en todas tus campañas promocionales. Usar temporizadores en torno a promociones o eventos específicos es mucho más fuerte que usarlos todo el tiempo.
  • Usa segundos. Estoy seguro de que si estás usando un temporizador de cuenta regresiva estás usando segundos. Si no, deberías hacerlo porque añade un poco más de urgencia a tu temporizador.
  • Deja claro tu mensaje. Esto puede sonar obvio, pero asegúrese de recordar incluir mensajes alrededor del temporizador. El mensaje es clave para promover la acción que desea tomar. Crea un mensaje claro diciéndole a tu lector a qué estás contando la cuenta atrás.
  • Prueba, prueba y prueba. ¡Prueba! Utiliza pruebas divididas A/B para medir el impacto del temporizador dentro de tu campaña. Puedes probar muchas variables diferentes a tu alrededor de tu temporizador de cuenta regresiva. Puede probar el mensaje con o sin temporizador, la colocación (arriba o abajo) y el diseño general del temporizador. ¡Prueba todo!

Otros tipos de archivos

Si deseas compartir otro tipo de archivo a través de un correo electrónico (por ejemplo, un PDF, mp3 u otro recurso), deberás alojar el archivo fuera y luego vincularlo en tu correo electrónico. Es posible que puedas alojar el archivo en tu plataforma web, o que puedas utilizar un servicio de alojamiento de archivos como Google Drive o Dropbox.

Una vez que hayas alojado tu archivo, copia la URL donde está alojado (o el enlace para compartir, si ha utilizado una herramienta como Dropbox). En tu plantilla, crea un botón y pegue la URL en el campo URL de enlace.

Anatomía del correo

Después de conocer los conceptos básicos del diseño de plantillas de correo electrónico y cómo usar las fuentes y los colores de manera efectiva en los correos electrónicos. Ahora conoceremos la estructura de un correo electrónico, desde tu texto de vista previa hasta tu enlace para darse de baja. Trabajaremos desde la parte superior de un correo electrónico hasta la parte inferior.



Tu texto de encabezado, a veces llamado texto de vista previa, es el primer componente de cualquier correo electrónico. Ten en cuenta una línea inicial de texto en la parte superior de tu plantilla de correo electrónico. Este es el texto que se mostrará en la vista previa de la bandeja de entrada del correo electrónico, después de la línea de asunto, por lo que es importante que transmitas tu mensaje a tus destinatarios. El texto de tu encabezado no debe distraer del contenido de tu correo electrónico, así que usa una fuente más pequeña que el texto de su párrafo. Para diferenciarlo aún más del resto de su correo electrónico, debe estar ubicado en el área de fondo del contenido, y el color de la fuente debe ser unos tonos más oscuro que el color de fondo del correo electrónico.


Tu logotipo es el elemento principal que utilizarás para definir tu marca, por lo que probablemente ya sepas que tu logotipo debería aparecer en tus plantillas de correo electrónico. Sin embargo, la forma en que aparece tu logotipo es muy importante. Si tu logotipo está centrado en su sitio, céntralo en tus plantillas de correo electrónico; si está alineado a la izquierda, haz lo mismo en tus plantillas. Si muestras tu logotipo contra el color de fondo del correo electrónico, asegúrate de que tu logotipo no sea un color en conflicto. El tamaño del logotipo en tus plantillas de correo electrónico debe ser el mismo que en tu sitio, a menos que sea superior a 150px. Si su logotipo mide más de 150px de altura, empujará el contenido principal de su correo electrónico por debajo de la pantalla, lo que obligará a los destinatarios a desplazarse hacia abajo para verlo. Dado que tu logotipo es la piedra angular de tu marca, también es importante asegurarse de que sea de alta resolución: no quieres que tu logotipo esté borroso.


Probablemente no puedas encajar todos los enlaces de la barra de navegación de tu tienda en línea en tu plantilla de correo electrónico, así que incluye los 3 o 4 enlaces más importantes. En todas tus plantillas, asegúrate de incluir un enlace a la página de inicio de tu tienda en línea. Después de eso, si no estás seguro de qué otros enlaces incluir, incluye enlaces a las páginas más populares de su sitio o colecciones más vendidas.


El cuerpo de un correo electrónico es la parte que está sujeta a la mayor variación, ya que cambiará dependiendo del tipo de correo electrónico que estés enviando.

Los diseños de correo electrónico vienen en dos formas: de una o varias columnas. Las columnas te permiten mostrar contenido lado a lado en escritorios, ya sean imágenes, copias o alguna combinación de los dos. En el móvil, las columnas se apilarán, por lo que es importante tener esto en cuenta al planificar tu correo.

Apilar columnas en dispositivos móviles eliminas el problema de la reducción de imágenes en pantallas más pequeñas para mantener un diseño de columna. Hay ventajas en los correos electrónicos de una y varias columnas, lo que se utilizará depende del contenido y el correo electrónico.

Los correos electrónicos de varias columnas son especialmente geniales siempre que incluyas una serie de imágenes o párrafos, como carritos abandonados o correos electrónicos con una galería de imágenes o sugerencia de productos.


Debajo de la sección del cuerpo de tu correo electrónico está el pie de página. Comienza incluyendo enlaces sociales relevantes o enlaces de la barra de navegación de su sitio que no pusiste el la primera barra de navegación, como enlaces a su blog o menú de ayuda. Al incluir estos enlaces en la parte inferior de un correo electrónico, no te distraes de las otras llamadas a la acción, pero son fáciles de encontrar si un destinatario las está buscando.


Una información requerida para incluir en tu pie de página es la información de contacto de tu empresa, a saber, su dirección física. Esto es legalmente requerido. También es útil incluir una dirección de correo electrónico o un número de teléfono para ventas o atención al cliente.

En cada correo electrónico no transaccional, debes incluir un enlace para darse de baja. Los enlaces para darse de baja te ayudan a evitar ser marcado como spam y te convierten en un buen ciudadano de la web. Un lugar común en el que la gente busca un enlace para darse de baja está en la parte inferior de un correo electrónico. Si estás creando una plantilla de boletín, también debe incluir un enlace de preferencias en el pie de página de su correo electrónico. De esa manera, los destinatarios pueden simplemente actualizar sus preferencias de frecuencia de envío en lugar de darse de baja.

¿Te resultó útil esta información?


Evalúa nuestro contenido que hemos preparado para ti, ¡nos ayuda a mejorar!