La guía definitiva para el diseño de correo electrónico: tamaños de fuente y dimensiones de imagen, mejores prácticas

Por qué es importante el diseño del correo electrónico: Importancia en el comercio electrónico y el marketing.

Fuente y tipografía

Tamaños de fuente:

Tamaños recomendados para correos electrónicos móviles y de escritorio

Para facilitar la lectura del correo electrónico móvil, generalmente querrás ceñirte a los siguientes tamaños de fuente:

1. Cuerpo de texto: 14-16px es un buen rango. Fácil de leer sin hacer zoom.
2. Encabezamientos: 22-27px funciona bien para encabezados. Quieres que se destaquen pero no sean abrumadores.
3. Subtítulos: Alrededor de 18-22 px. Deben ser más grandes que el cuerpo del texto pero más pequeños que los títulos principales.
4. Botones de acción: El texto dentro de los botones debe tener al menos 14 píxeles para poder tocarlos fácilmente.
5. Letra pequeña: Manténgalo al menos 12 píxeles para que sea legible pero claramente secundario.

La legibilidad es clave, especialmente para el comercio electrónico donde desea guiar al lector para que actúe. ¡Pruebe siempre sus correos electrónicos en varios dispositivos para asegurarse de que se vean bien!

Tipos de fuentes

Serif frente a sans-serif.

Cuando se trata de diseño de correo electrónico, la elección entre fuentes Serif y Sans-Serif puede marcar una verdadera diferencia. Aquí está la verdad:

Fuentes Serif

• Ejemplos: Times New Roman, Georgia
• Onda: Más tradicional, a menudo visto como formal o académico.
• Mejor para: Contenido de formato largo donde la legibilidad es clave.
• Pero: Puede verse desordenado en pantallas pequeñas, así que utilícelo con precaución en correos electrónicos móviles.

Fuentes Sans-Serif

• Ejemplos: Arial, Helvética, Verdana
• Onda: Moderno, limpio e informal.
• Mejor para: Contenido breve, ágil y legible en dispositivos móviles.
• Por qué: Más fácil de leer en pantallas pequeñas y da una sensación contemporánea.

Consejos para el diseño de correo electrónico

1. Consistencia: Cíñete a una o dos fuentes para mantener el diseño coherente.
2. Fuentes seguras para la Web: utilice fuentes que se muestren bien en todos los clientes de correo electrónico.
3. Jerarquía: utilice diferentes fuentes o estilos para los títulos y el cuerpo del texto para crear una jerarquía visual.
4. Prueba: Pruebe siempre cómo se representan las fuentes en diferentes dispositivos y clientes de correo electrónico.

Dado nuestro enfoque en el comercio electrónico, es posible que se incline por Sans-Serif por su estilo moderno y legibilidad móvil.

Pero si envías contenido educativo, una fuente Serif podría añadir un toque de autoridad. ¡Elige según tu marca y mensaje!

Espaciado entre líneas

El espaciado óptimo es importante para la legibilidad del correo electrónico.

• Cuerpo de texto: Apunte a un tamaño de fuente de 1,4 a 1,6 veces mayor. Entonces, si el tamaño de fuente es de 16 px, el interlineado sería de alrededor de 22 px a 26 px.

Por qué es importante el interlineado

1. Legibilidad: El interlineado adecuado evita que el texto se sienta apretado, lo que facilita su lectura.
2. Desnatabilidad: Un buen espaciado ayuda a los lectores a hojear el contenido, que es como la mayoría de la gente lee los correos electrónicos.

Consejos para el interlineado

1. Consistencia: Mantenga el interlineado constante en todo el correo electrónico para lograr una apariencia coherente.
2. Títulos y subtítulos: Estos pueden tener un espacio un poco más ajustado ya que normalmente son más grandes y más audaces.
3. Móvil: Pruebe en diferentes dispositivos para garantizar que el espaciado se vea bien en todos los ámbitos.

Para sus campañas de correo electrónico de comercio electrónico, el interlineado puede ayudar a guiar la atención del lector hacia las llamadas a la acción y la información clave. Así que ¡no lo pases por alto!

Imágenes y medios

Tamaños recomendados para imágenes de correo electrónico

1. Imágenes de ancho completo: 600-800px de ancho. Esto se ajusta a los anchos predeterminados de la mayoría de los clientes de correo electrónico.
2. Imágenes en línea o flotantes: 200-300 px de ancho. Estas son imágenes que se encuentran junto al texto.
3. Imágenes de héroe: 800-1200px de ancho. Estas son las imágenes grandes y llamativas de la parte superior.
4. Botones de acción: Al menos 44x44px para tocar fácilmente en el móvil.

Otros consejos

1. Relación de aspecto: Limítese a proporciones comunes como 16:9 o 4:3 para garantizar que las imágenes se escale bien.
2. Tamaño del archivo: Manténgalo por debajo de 100 KB si es posible para una carga más rápida.
3. Pantallas de alto DPI: Considere las pantallas Retina y utilice imágenes de mayor resolución, pero comprímalas para mantener el tamaño de los archivos bajos.

Formatos de imagen en correo electrónico

• JPEG: Bueno para imágenes complejas con muchos colores.
• PNG: Ideal para imágenes, textos y logotipos simples.
• GIF: Para animaciones simples.

Dado su enfoque en el comercio electrónico, las imágenes nítidas y de carga rápida pueden hacer que sus productos parezcan atractivos y mantener al usuario interesado. Pruebe siempre en varios dispositivos para asegurarse de que todo se vea bien.

Texto alternativo para imágenes en correo electrónico

Accesibilidad

1. Discapacitados Visuales: Los lectores de pantalla utilizan texto alternativo para describir imágenes.
2. Cómplice legal: Le ayuda a cumplir con estándares de accesibilidad como ADA.
3. Bloqueo de imágenes en clientes de correo electrónico: Algunos clientes bloquean imágenes de forma predeterminada. El texto alternativo proporciona contexto.

Beneficios de SEO

1. Clasificación de búsqueda: Si bien no afectan directamente al correo electrónico, las buenas prácticas de texto alternativo pueden ayudar en la estrategia general de SEO.
2. Esto sucede cuando tiene una página de archivo pública para los boletines salientes.

Experiencia de usuario

1. Internet lento: si las imágenes no se cargan, el texto alternativo proporciona contexto.
2. Aclaración: describe la imagen si es compleja o contiene información importante.

Mejores prácticas

1. Descriptivo: “Zapatillas deportivas azules para mujer” es mejor que solo “zapatos”.
2. Conciso: Sea breve pero informativo.
3. Palabras clave: Utilice palabras clave relevantes pero evite el exceso de palabras clave.

Vídeo incrustado en correo electrónico

Agregar videos en el correo electrónico puede aumentar la participación, pero conlleva algunas advertencias. Esto es lo que podrías cubrir:

Los profesionales

1. Compromiso: Los vídeos pueden aumentar las tasas de clics.
2. Información: Es más fácil transmitir información compleja o mostrar un producto.

Los contras

1. Compatibilidad: No todos los clientes de correo electrónico admiten vídeos incrustados.
2. Tiempo de carga: Los vídeos pesados pueden ralentizar la carga del correo electrónico.

Mejores prácticas

1. Imagen alternativa: Utilice una imagen en miniatura que enlace al vídeo, en caso de que la inserción no funcione.
2. llamada a la acción: agregue un botón de reproducción superpuesto para fomentar los clics.
3. Corto y dulce: Mantenga los videos breves, idealmente menos de 2 minutos.
4. Auto-reproducción: Generalmente evítelo; permitir a los usuarios elegir reproducir el vídeo.

Cómo

1. HTML5: Para clientes de correo electrónico que lo admitan, puede utilizar etiquetas HTML5 para incrustar.
2. Servicios de terceros: Plataformas como Vibetrace y Mailchimp suelen tener opciones integradas para vídeo.

Alternativas a la inserción de vídeo en correos electrónicos

1. GIF: Los GIF cortos y en bucle pueden brindar una experiencia similar a la de un video.
2. Miniatura vinculada: una imagen estática que enlaza con un vídeo alojado en otro lugar.

Pruebas

1. Múltiples clientes: Pruebe cómo aparece el vídeo en diferentes clientes de correo electrónico.
2. Móvil: asegúrese de que sea compatible con dispositivos móviles.

Diseño y estructura para el diseño de correo electrónico

Diseños de una o varias columnas: Pros y contras.

Diseño de una sola columna

ventajas

1. Compatible con dispositivos móviles: Es más fácil reducir la escala en pantallas más pequeñas.
2. enfocado: Guía al lector de forma lineal y directa.
3. Sencillez: Más fácil de diseñar y más rápido de cargar.

Contras

1. Contenido limitado: No es ideal para mensajes complejos con varias secciones.
2. Menos dinámico: Es posible que no capten la atención con tanta eficacia como los diseños de varias columnas.

Diseño de varias columnas

ventajas

1. Rico en contenido: Excelente para exhibir una variedad de productos o temas.
2. Atractivo visual: Más dinámico y atractivo.
3. Jerárquico: Permite una estructura de información más compleja.

Contras

1. Complejidad: Es más difícil de diseñar y es posible que no se reproduzca bien en todos los dispositivos.
2. Abrumador: Riesgo de desorden o sobrecarga de información.

Consejos para centrarse en el comercio electrónico

• Una sola columna: Ideal para campañas enfocadas, como lanzamientos de productos u ofertas especiales.
• Varias columnas: Ideal para boletines informativos o para mostrar una gama de productos.

La elección entre una o varias columnas debe alinearse con su estrategia de contenido, la complejidad de su mensaje y las preferencias de su público objetivo. Pruebe siempre ambos diseños para ver cuál resuena mejor con su audiencia de comercio electrónico.

Importancia de los espacios en blanco en el diseño de correo electrónico

En el diseño los espacios en blanco tienen una especial importancia. Hay muchas ventajas de utilizar espacios en blanco, pero para el correo electrónico las más importantes son:

Legibilidad y espacio para respirar: El espacio entre el texto y los elementos hace que el contenido sea más fácil de digerir.

Enfoque y atención: Los espacios en blanco pueden dirigir la atención del lector a elementos importantes como las llamadas a la acción.

Profesionalismo y apariencia limpia: Un diseño ordenado parece más profesional y confiable.

Experiencia de usuario y skimmable: ayuda a los lectores a hojear el contenido, que es como la mayoría de la gente lee los correos electrónicos.

Experiencia móvil y fácil de tocar: El espacio adicional hace que sea más fácil tocar botones en dispositivos móviles.

Para sus correos electrónicos de comercio electrónico, los espacios en blanco pueden ayudar a guiar al lector hacia acciones clave, como realizar una compra o comprobar un nuevo producto. No es sólo un espacio vacío; ¡Es un elemento de diseño funcional!

Capacidad de respuesta móvil

Asegurándose de que se vea bien en todos los dispositivos. Hay una mayor certeza de que dispositivos móviles se utilizan más que el escritorio para leer correos electrónicos.

Asegurarse de que su correo electrónico responda y pueda adaptarse a las pantallas de los móviles no es una opción, sino la forma de empezar a diseñar un correo electrónico.

Llamados a la acción (CTA) en correo electrónico

• Colocación de CTA: Dónde colocarlos para lograr el máximo impacto.
• Diseño de botones CTA: Tamaño, color, texto.

Experiencia de usuario (UX)

Tiempo de carga

Importancia del tiempo de carga del correo electrónico (según tamaño y número de imágenes)

1. Experiencia de usuario: Los correos electrónicos de carga lenta pueden frustrar a los usuarios y generar una menor participación.
2. Usuarios móviles: A menudo están en movimiento y no esperan contenido lento.
3. Optimizar imágenes: Mantenga los tamaños de archivo pequeños pero la calidad alta.
4. Minimizar código: HTML/CSS limpio y simple se carga más rápido.
5. Correos electrónicos más cortos: Si bien puede ser más fácil intentar agregar mucho a los correos electrónicos, en realidad es mejor mantenerlos más breves.
6. Recorte de correo electrónico: Ciertos clientes de correo electrónico (como Gmail) recortan los correos electrónicos si superan un tamaño determinado.
7. Prueba: Pruebe siempre los tiempos de carga en varios dispositivos, clientes de correo electrónico y resoluciones.

Navegación

Navegación por correo electrónico

1. Descubrimiento de contenido: para correos electrónicos más largos, como boletines informativos, la navegación ayuda a los usuarios a encontrar lo que les interesa.
2. CTA: una navegación clara puede guiar a los usuarios a tomar medidas.
3. Menú: Para correos electrónicos con mucho contenido, un pequeño menú en la parte superior puede resultar útil.
4. Jerarquía: Utilice títulos y subtítulos para dividir el contenido y guiar al lector.

Accesibilidad

Elección de fuentes en el correo electrónico

1. Elección de fuente: Las fuentes simples y limpias son más fáciles de leer.
2. Tamaño de fuente: Limítese a un tamaño legible, generalmente entre 14 y 16 píxeles para el cuerpo del texto.
3. Lectores de pantalla: Pruebe su correo electrónico con un software de lectura de pantalla para asegurarse de que sea accesible.
4. Disponibilidad de fuentes: Cuando utilice fuentes personalizadas (que no están instaladas de forma predeterminada en los dispositivos), asegúrese de que los archivos de fuentes se carguen correctamente.

Contraste de color

1. Legibilidad: El alto contraste entre el texto y el fondo mejora la legibilidad.
2. Accesibilidad: Ayuda a las personas con problemas de visión o daltonismo.
3. Texto versus fondo: Apunte a texto oscuro sobre un fondo claro o viceversa.
4. CTA: Asegúrese de que los botones se destaquen pero también sean legibles.
5. Herramientas: Utilice fichas de contraste para probar sus opciones de color.