Del diseño al envío: cómo crear emails HTML con Stripo sin un desarrollador

Puntos clave

• Diseñar para email es como diseñar para una impresora muy exigente. Lo que se ve bien en un navegador o en una herramienta de diseño no siempre se verá igual en la bandeja de entrada.
• Un email “listo para la bandeja de entrada” se renderiza correctamente en todos los clientes de correo, se lee bien en el móvil, carga sus imágenes y supera los filtros de spam.
• Muchos errores de diseño habituales tienen fácil solución: usa imágenes JPEG o PNG, texto con alto contraste y fuentes seguras para la web, y haz siempre pruebas antes de enviar.
• No necesitas un desarrollador. Herramientas como Stripo y Benchmark Email permiten a los equipos pequeños crear y enviar emails HTML profesionales sin escribir código.

Si alguna vez has creado un email que se veía perfecto en tu pantalla y luego has visto cómo se descuadraba en Outlook o se reducía hasta quedar ilegible en un móvil, no eres el único. Les pasa tanto a principiantes como a profesionales del marketing con experiencia.

Por eso nos hemos aliado con Stripo. Juntos, explicamos por qué el diseño de emails HTML es importante, cómo crear correctamente una plantilla en Stripo y cómo llevarla al nuevo Editor HTML de Benchmark Email para enviarla.

Por qué importa el diseño de emails HTML (aunque nunca escribas código)

Seré sincero: no tengo intención de escribir ni una línea de código. Pero envío muchos emails, así que entender cómo funciona el email HTML sigue siendo importante.

La idea clave es esta: el HTML para email funciona con reglas distintas a las del resto de la web. Muchos profesionales del marketing dan por hecho que, si algo se ve bien en una herramienta de diseño o en un navegador, también se verá bien en la bandeja de entrada. No siempre es así, y no conviene descubrirlo por las malas. Outlook, en particular, es famoso por eliminar estilos y por el renderizado imprevisible de los elementos.

Diseñar para email es un poco como diseñar para una impresora muy estricta. Hay cosas que simplemente no se trasladan, y eso es intencionado. Gmail, Outlook y Apple Mail pueden mostrar el mismo email de forma distinta. Por eso el email sigue dependiendo de diseños basados en tablas, estilos en línea y fuentes seguras para la web. Si partes de la mentalidad de “diseñar dentro de unas limitaciones”, te ahorrarás muchos dolores de cabeza.

Qué significa realmente que un email esté “listo para la bandeja de entrada”

Un email listo para la bandeja de entrada es mucho más que uno que se ve bien en tu pantalla. Debe:

• Mostrarse correctamente en todas partes: Gmail, Outlook y Apple Mail, tanto en escritorio como en dispositivos móviles.
• Leerse bien en el teléfono: más de la mitad de las personas lee su correo en el teléfono. Si los suscriptores tienen que ampliar la pantalla con los dedos, es menos probable que interactúen.
• Cargar sus imágenes: y seguir teniendo sentido si no se cargan. Evita construir un email en torno a una sola imagen.
• Mantenerse intacto: sin texto invisible, diseños rotos ni estilos eliminados.
• Superar los filtros de spam: para que llegue a la bandeja de entrada antes de nada.

5 errores comunes de diseño de email (y qué hacer en su lugar)

Le pueden pasar a cualquiera. Yo también he cometido algunos.

1. Usar imágenes SVG o WebP. Muchos clientes de correo no las admiten. Usa JPEG o PNG en su lugar.
2. Texto claro sobre fondos claros. Usa colores de texto y de fondo con alto contraste para facilitar la lectura.
3. Depender de fuentes web. Suelen sustituirse por las fuentes predeterminadas. Usa fuentes seguras para la web, como Arial o Georgia.
4. Olvidarse de hacer pruebas. Previsualiza y envía emails de prueba antes de cada campaña para ver cómo se renderiza tu email en los distintos clientes de correo.
5. Copiar el resultado de la herramienta de diseño directamente en tu ESP. Créalo en una herramienta específica para email o limpia el código antes de pegarlo.

¿Por qué crear tú mismo tus emails HTML?

No todo el mundo cuenta con un desarrollador a mano, sobre todo si trabajas solo o formas parte de un equipo de marketing pequeño. Crear tus propios emails HTML con las herramientas adecuadas te ofrece:

• Campañas más rápidas, sin esperar a que otra persona tenga hueco
• Control total del diseño, sin idas y venidas sobre qué queda bien
• Mayor coherencia de marca en todos los canales, incluido el email
• Costes de producción más bajos para equipos sin un gran presupuesto

Cómo crear emails en Stripo

Stripo se centra en una sola cosa: en el flujo de trabajo de producción de emails. Es donde creas el email antes de exportarlo a tu plataforma de envío:

• Un editor visual de arrastrar y soltar, con un editor HTML/CSS integrado para quienes quieran meterse de lleno en el código
• Más de 1.600 plantillas de distintos sectores, temporadas y tipos de email, para que nunca tengas que empezar desde una página en blanco
• Atajos de contenido, como importar el contenido de un enlace en un bloque de entrada de blog o insertar el enlace de un vídeo que genera automáticamente una miniatura y un botón de reproducción
• Colaboración en tiempo real y enlaces de aprobación que se pueden compartir para equipos que necesitan dar el visto bueno antes del envío
• Exportación a más de 90 ESP, incluido Benchmark Email

Stripo está diseñado para que lo verdaderamente difícil sea crear un email malo.

Después, llévalo a Benchmark Email.

Cuando tu plantilla esté lista, tendrás que llevarla a Benchmark Email, concretamente a su nuevo Editor HTML. Pega tu código o sube el archivo y, después, previsualízalo tanto en la vista de escritorio como en la de móvil. El selector Personalizar te permite añadir campos de combinación, como el nombre, sin tocar el código, y Benchmark añade automáticamente tu enlace de baja y tu dirección postal para que el cumplimiento normativo quede resuelto.

Pruébalo tú mismo: una lista de comprobación rápida.

Antes de enviar tu próximo email HTML:

• Un objetivo, un mensaje principal, un CTA
• Mensaje clave y CTA en texto real, no en imágenes
• Imágenes JPEG o PNG con alt text descriptivo
• Colores de alto contraste y fuentes seguras para la web
• Vista previa en móvil revisada
• Email de prueba abierto en Gmail, Apple Mail y Outlook

¿Aún no tienes una cuenta de Benchmark? Regístrate gratis y prueba el Editor HTML con tu primer diseño.

Preguntas frecuentes

¿Por qué mi email se ve diferente en Outlook que en Gmail?

Cada cliente de correo utiliza su propio motor de renderizado, y Outlook es conocido por eliminar estilos e ignorar muchas propiedades CSS modernas. Por eso, el HTML para email se basa en tablas, estilos en línea y pruebas en distintos clientes de correo.

¿Necesito saber programar para enviar un email HTML?

No. Los editores visuales como Stripo generan por ti un HTML compatible con email, y el Editor HTML de Benchmark Email te permite importarlo, previsualizarlo y personalizarlo sin tocar el código.

¿Qué formatos de imagen funcionan mejor en los emails?

JPEG y PNG son las opciones más seguras. Muchos clientes de correo no admiten SVG ni WebP.

¿Cómo paso mi email de Stripo a Benchmark Email?

Stripo permite exportar directamente a Benchmark Email. También puedes exportar tu HTML y pegarlo o subirlo al Editor HTML de Benchmark.