Cómo diseñar el email de tus sueños: la guía definitiva
El primer paso siempre es el más difícil. Sí, también cuando hablamos de diseño de emails.
Cuando decides crear un email desde cero, te pueden surgir mil preguntas. ¿Cuál es el tamaño óptimo de una plantilla de email, su ancho y su alto? ¿Cuánto debería ocupar un boletín? ¿Y qué pasa con las fuentes y los colores?
Para no perder el rumbo en el diseño de tu email necesitas buenas indicaciones, y precisamente por eso hemos escrito esta guía. ¿Por qué nosotros? Hemos creado más de 390 plantillas de email impecables y todavía más emails únicos para nuestros clientes. Acompáñanos en todo el proceso de crear un email perfecto, desde sus dimensiones hasta el pie, y descubre cómo montarlo en Blocks, nuestro editor de emails sin código.
Parte 1. Empecemos por el principio
Lo primero es entender qué dimensiones debe tener tu plantilla de email. Un alto y un ancho adecuados son clave para que el contenido se vea bien y el mensaje llegue a tu audiencia. Y como las dimensiones de una plantilla de email (incluido su contenido) suelen medirse en píxeles (px), en esta guía también usaremos esa unidad.
¿Qué ancho debe tener mi email?
Durante mucho tiempo, el ancho medio de un email era de 600px en escritorio y de 320px en vertical y 480px en horizontal en dispositivos móviles. Pero con los años la resolución de las pantallas ha ido aumentando. Hoy, según este artículo de Selzy, el ancho perfecto para la versión de escritorio de tu email es de 640px; el de móvil sigue siendo el mismo.
Claro que tu email puede tener más de 640px de ancho, pero intenta no pasar del límite de 800px. Cada cliente de correo tiene sus propios ajustes y limitaciones, y tienes que ajustarte a ellos si quieres que todos tus destinatarios reciban la mejor versión de tu mensaje. Y si tu email no cabe en ese límite, pruébalo en todos los clientes de correo para asegurarte de que no se descuadra ni se rompe.
Ten en cuenta otra cosa: si la versión móvil de tu email mide 480px de ancho, los usuarios tendrán que girar el teléfono para verlo bien. Igual que con el ancho de escritorio, puedes hacerla más ancha de 320px, pero pruébala a fondo.
¿Qué largo debe tener mi email?
En cuanto al alto del email, el único límite es tu imaginación (y el peso del archivo). La longitud perfecta ronda los 1500px, pero puedes alargarlo, ¡incluso hasta 3000px! Eso sí, cuanto más largo sea tu email, más probable es que los usuarios piensen «demasiado largo, no lo leo» y lo cierren sin más.
Y si tienes mucho contenido que contar, dale estructura: usa viñetas, acorta los párrafos, añade títulos. Además, puedes poner parte de la información en imágenes, usar GIF o incluso adjuntar un vídeo.
¿Cuánto debe pesar mi boletín?
Tu email no debería pesar más de 102 KB. Tenlo siempre presente e intenta no sobrecargar el email con demasiado contenido (y no hablamos solo de imágenes o vídeos).
El peso del email se mide por el peso de su código HTML. Cuantas más líneas de código, más pesado será el archivo. Por eso tienes que vigilar el volumen de contenido: cada bloque cuenta, por así decirlo.
¿Y si te pasas de los 102 KB? Pues la consecuencia es sencilla: algunos clientes de correo (como Gmail, por ejemplo) recortarán tu email. Si lo que se corta es el pie, a veces se puede pasar por alto, pero si el email se corta por la mitad, la cosa cambia. No lo pierdas de vista.
¿Cómo crear un email desde cero en Blocks?
¡Blocks te permite crear un email precioso sin escribir ni una línea de código! Empieza con una plantilla en blanco, genera un email con IA o elige uno de la galería de plantillas; después arrastra bloques de contenido al lienzo y ajusta las propiedades de los elementos y la configuración del email en el panel de la derecha.
Parte 2. Cómo hacer que tu email brille
La estructura básica de nuestro email está lista, y ahora toca fijarse en sus elementos. Hablemos de la maquetación del email y de cómo diseñarla bien.
1. Preencabezado y cabecera (alto, ancho, contenido)
El preencabezado es una línea fina que va encima del email. Normalmente también se muestra detrás del asunto. El preencabezado puede ampliar lo que dice el asunto (por ejemplo, anunciar el envío gratuito o descuentos extra) o cumplir una función puramente práctica (como incluir el enlace «ver en el navegador»).
En cuanto al formato del texto del preencabezado, hay un par de cosas que tener en cuenta. El tamaño de fuente del preencabezado debe ser menor que el del cuerpo del email (sin pasarse, claro). Por ejemplo, si el cuerpo del email va a 14px, deja el preencabezado en torno a 10-12px. En cuanto a su alto, con 55-60px basta: si lo haces más grande, llamará demasiado la atención.
Y, por supuesto, no te olvides de la longitud del texto del preencabezado: debe tener entre 50 y 100 caracteres.
Pasemos ahora a la cabecera del email. Suele contener el logotipo de tu empresa junto con botones, un menú u otros elementos. Aquí van algunos consejos sobre su tamaño.
Si la cabecera lleva un logotipo de tamaño estándar, el mejor alto es de 70px. Si añades un botón o texto a la cabecera (o usas un logotipo más grande), puedes subir el alto a 100-150px. Para una cabecera con menú, plantéate aumentarlo hasta 200px. Pero recuerda siempre: una cabecera larga acapara demasiada atención.
Además de los márgenes interiores superior e inferior, también puedes añadir márgenes a la izquierda y a la derecha de tus bloques. A diferencia de los de arriba y abajo, estos deben ser iguales en todo el email: si usas márgenes laterales de 40px en el cuerpo, deben ser también de 40px en el preencabezado y la cabecera.
En cuanto al diseño de la cabecera, el límite lo ponen tu imaginación y el estilo general del email. Lo único que hay que tener en cuenta es que todos los elementos se vean coherentes tanto en escritorio como en móvil.
2. Banner (alto, ancho, qué hacer y qué no)
El banner del email es una imagen JPG, PNG o SVG que acapara la mayor parte de la atención y es el lienzo perfecto para lucir tu creatividad. Puedes jugar con el tamaño del banner, los estilos de fuente (y su tamaño) y distintos colores. Eso sí, sin perder la cabeza: un banner abarrotado de contenido acabará siendo un caos en lugar de un reclamo para la vista.
Dimensiones de las imágenes del email:
El ancho del banner suele depender del ancho total del email. Por ejemplo, si tu email mide 600px de ancho en escritorio y 320px en móvil, el banner puede tener ese mismo ancho. También puedes añadirle márgenes laterales, pero recuerda que deben ser iguales en todo el email (si son de 40px en los demás bloques, deben serlo también en el banner).
En cuanto al largo del banner, no hay un límite real más allá del sentido común. Aun así, te recomendamos que mida entre 700px y 1400px. Un banner más largo probablemente hará más mal que bien a tu email.
3. Texto (estilo de fuente, tamaño, colores, formato)
Con el diseño del texto de un email es fácil liarse. ¿Cuál es el mejor tamaño de fuente para un email? ¿Hay alguna fuente y un tamaño «profesionales» que debas usar? Entre decenas de opciones, ¿cuál elegir?
Tranquilo, no es nada difícil. Te ayudamos a elegir el estilo de fuente, el tamaño, el interlineado, el color y el formato perfectos para tu email.
Estilo de fuente:
Hay dos grandes familias de fuentes: Serif y Sans Serif. La diferencia está en los remates de las letras: las fuentes de la familia Serif los tienen y las Sans Serif no.
Al principio, Blocks solo tenía un conjunto limitado de fuentes. ¡Pero tras varias actualizaciones, ahora también admitimos Google Fonts! El kit de fuentes inicial incluye las fuentes seguras: las que se muestran correctamente en todo tipo de dispositivos y clientes de correo. Son estas:
Las Google Fonts, en cambio, son algo más delicadas: algunos clientes de correo y dispositivos pueden mostrarlas mal. Puedes usarlas igualmente, claro, pero si lo haces, prueba tus emails antes de enviarlos.
Te recomendamos no usar más de dos fuentes en tu email. Así mantendrás la coherencia y la legibilidad, y además el texto será más claro (algo bastante importante para la accesibilidad de cualquier email).
Y hablando de legibilidad, fíjate en cómo cambia solo con el estilo de fuente:
Sí, la segunda opción queda mucho más elegante, pero cuesta muchísimo más leerla.
Tamaño de fuente e interlineado:
Después de probar varias combinaciones de tamaños para títulos, subtítulos y texto, llegamos a esta conclusión sobre el tamaño de fuente recomendable:
- 22-24px para los títulos;
- 18-20px para los subtítulos;
- 14-16px para el texto normal.
En cuanto al interlineado perfecto, mantenlo en el 150-200%. Así tu texto se leerá con claridad y resultará agradable a la vista.
Y recuerda: no existe una fuente ni un tamaño «profesionales» para los emails. Todo depende del contexto y de tu decisión creativa. Eso sí, asegúrate siempre de que el email se lea bien y evita que el texto sea demasiado grande o demasiado pequeño.
Color de la fuente:
Aquí nuestro consejo es parecido al de los estilos de fuente: no uses más de dos colores de texto en todo el email. Elige colores que contrasten para mejorar la accesibilidad del texto.
Formato del texto:
Hay 3 formas principales de dar formato al texto y destacar partes concretas: ponerlo en negrita, en cursiva o subrayarlo. Veamos cómo usar cada una:
- La negrita suele usarse para resaltar las palabras en las que el lector debe fijarse (por ejemplo, una fecha, las condiciones de una oferta, etc.).
- La cursiva se usa para destacar citas y títulos de libros, películas, etc.
- Y, por último, subrayamos los enlaces: es el uso habitual de este formato.
Aunque no son obligatorias ni mucho menos, estas prácticas se han convertido en costumbre: la gente tiende a fijarse en el texto en negrita y a hacer clic en el texto subrayado. Tenlo en cuenta también en el texto de tus emails.
4. Botones (ancho y alto, color, fuentes, márgenes)
Igual que con el tamaño del banner, para los botones no hay límites exactos. Aun así, hay algunas reglas y recomendaciones generales que te ayudarán a sacar el máximo partido a este elemento.
- Los botones deben destacar sobre el fondo y el resto del contenido del email. Tienen que llamar la atención y verse a la primera.
- En la versión móvil, los botones deben ser lo bastante grandes para que los lectores puedan pulsarlos sin problemas.
- Usa colores que contrasten al diseñar los botones para que se distingan bien.
- Aprovecha el espacio en blanco y añade márgenes alrededor del texto del botón. Así será más fácil de leer y de pulsar.
5. Bloques de contenido (número de elementos en la cuadrícula, dimensiones y estilo)
Hay muchos tipos de bloques de contenido: artículos, cuadrículas de productos, citas, etc. En el fondo, todos son tablas formadas por una o varias columnas. Un consejo: mejor no usar más de 4 columnas en las cuadrículas de productos y 2 columnas en los demás tipos de bloques.
Ten en cuenta también que un bloque demasiado largo puede quitarle al destinatario las ganas de seguir leyendo (y eso es justo lo que no queremos). No te pases y mantén el alto de cada bloque de contenido en 200-300px. El alto de todos los bloques de contenido de tu email debería rondar los 1000-1200px.
6. Pie (ancho, alto, contenido obligatorio y opcional)
Los pies de email cumplen una función más práctica. Su tamaño depende de la cantidad de contenido que incluyan. Un pie típico contiene:
- La dirección física de la empresa.
- Enlaces a redes sociales.
- Los contactos de la empresa (teléfono o email).
- Enlace o código QR de la app móvil.
- Un recordatorio de por qué el destinatario recibe el email.
- Enlace a la política de privacidad.
- Enlace para darse de baja.
Hay que tener en cuenta que tanto la ley CAN-SPAM como el RGPD obligan a incluir el enlace de baja para los destinatarios de EE. UU. y de la UE, respectivamente. Aunque no trabajes directamente con esos países, puede que tengas clientes estadounidenses o europeos en tu base de datos.
Por eso, siempre es mejor incluir el enlace para darse de baja en el pie, por si acaso. Haz que se vea bien y permite que tus suscriptores se den de baja con un solo clic. Y una última cosa: ningún ESP te dejará enviar un email sin el enlace de baja. Aunque se te olvide añadirlo, te lo recordarán o lo añadirán automáticamente (como Selzy).
Además de los elementos ya mencionados, puedes incluir otros en el pie (como menús, información sobre las ofertas en curso y más).
Por último, hablemos de las dimensiones del pie. Su ancho debe ser exactamente igual que el del email, y su alto depende de la cantidad de contenido. Aun así, dale al pie al menos 200px de alto.
Parte 3. Últimos retoques y pruebas
¡Nuestro email está listo! Solo quedan unos pasos finales.
Comprueba que los espacios entre los elementos tienen la misma altura. No deben ser ni demasiado pequeños ni exagerados: el tamaño perfecto es de 30-40px. Asegúrate también de que el tamaño del texto es uniforme en todos los bloques, de que cada imagen tiene texto alternativo y de que todos los enlaces están en su sitio.
No olvides añadir etiquetas UTM a los enlaces (si hace falta). Las etiquetas UTM son pequeños fragmentos de código que te permiten seguir el rendimiento de tus campañas. Si programas tu email a mano, tendrás que añadirlas enlace por enlace, pero en Blocks puedes añadirlas a todos los enlaces en un par de clics.
Después, comprueba cómo se ve y funciona tu email en dispositivos móviles (mucha gente lee el correo en el móvil). Y, por último, envía un email de prueba para confirmar que se muestra correctamente en todos los dispositivos y clientes de correo.
Conclusión
Como ves, diseñar un email bonito desde cero no es nada difícil. Es cierto que algunas recomendaciones (por ejemplo, las dimensiones de la plantilla) son algo más estrictas que otras (como elegir el mejor tamaño de fuente). Pero con nuestra guía detallada, estamos seguros de que el diseño de tus emails nunca perderá el rumbo.