Bootstrap es el framework que hay detrás de un enorme número de sitios y aplicaciones web, y tarde o temprano todos necesitan enviar emails: un mensaje de bienvenida tras el registro, un enlace para restablecer la contraseña, una confirmación de pedido. Nuestras plantillas de email gratuitas para proyectos Bootstrap te dan diseños que encajan con el aspecto de tu sitio y usan el tipo de marcado que las bandejas de entrada realmente entienden.
Por qué las plantillas de email para Bootstrap necesitan otro HTML
Una página Bootstrap depende de flexbox, de media queries y de una hoja de estilos cargada desde un archivo o un CDN. Los clientes de correo tratan las tres cosas de forma muy distinta a los navegadores:
- Sin hojas de estilos enlazadas. Gmail, Outlook.com y Yahoo Mail ignoran un archivo CSS enlazado desde el email, así que las clases de Bootstrap llegan a la bandeja de entrada sin ningún estilo detrás.
- Sin flexbox en el Outlook clásico. Outlook para Windows muestra el email con el motor de renderizado de Word, que no admite flexbox, floats ni posicionamiento, así que ahí una rejilla de Bootstrap se desmonta.
- Poco espacio para CSS. Gmail limita el tamaño de un bloque de estilos dentro de un email, y la hoja de estilos completa de Bootstrap es muchas veces más grande que ese límite.
Por eso los desarrolladores de email montan los diseños con tablas y estilos en línea. Blocks hace ese trabajo por ti: las plantillas se construyen con estructuras basadas en tablas y estilos escritos en los propios elementos, incluyen correcciones para Outlook y se adaptan a las pantallas del móvil en los clientes de correo que lo admiten.
Usar una plantilla de Blocks en un proyecto Bootstrap
- Elige una plantilla y ajusta los colores, las fuentes y el logotipo para que el email parezca parte de tu sitio.
- Exporta el resultado como archivo HTML o como archivo ZIP con imágenes, o copia el código directamente desde el editor.
- Guarda el HTML en tu proyecto como plantilla de email y sustituye los nombres, los enlaces y los datos del pedido por las variables que usa tu motor de plantillas.
- Envíalo a través de tu servidor SMTP o de una API de email como Amazon SES o SendGrid, y añade una versión en texto plano para los lectores cuyas apps de correo no muestran HTML.
Si prefieres escribir los emails a mano con clases al estilo de Bootstrap, existe un proyecto de código abierto aparte llamado Bootstrap Email que compila ese marcado en tablas y estilos en línea. Se desarrolla de forma independiente del equipo de Bootstrap y requiere un paso de compilación en tu equipo. Blocks toma en cambio la vía visual: diseñas en el navegador y obtienes el HTML terminado al instante.
Emails que envía todo sitio Bootstrap
- Emails de bienvenida que saludan a los nuevos usuarios y les indican el primer paso en tu producto.
- Emails de restablecimiento de contraseña con un único botón claro y una nota breve sobre cuándo caduca el enlace.
- Confirmaciones de pedido para tiendas y sitios de reservas que necesitan un resumen fiable de la compra.
- Emails de incorporación para aplicaciones web que presentan las funciones de una en una, mensaje a mensaje.
Consejos para plantillas de email en proyectos web
- Aloja las imágenes en un lugar público. Las URL absolutas de imágenes cargan en cualquier bandeja de entrada, mientras que las rutas relativas copiadas de tu app se rompen.
- Prueba en más de un cliente. Revisa al menos Gmail, Apple Mail y Outlook para Windows antes de lanzar una plantilla nueva.
- Pon nombres claros a las variables. Unos marcadores legibles le dicen al siguiente desarrollador exactamente qué valor va en cada sitio.
- Guarda las plantillas en el repositorio. Mantén el HTML de los emails junto al código que los envía, para que cada cambio pase por revisión.
Para profundizar en las opciones de marcado, lee nuestra comparativa de frameworks de email y la guía sobre emails HTML frente a texto plano. Si tu app envía muchos emails del sistema, el repaso de servicios de email transaccional te ayudará a elegir proveedor.
Consigue plantillas de email gratuitas para proyectos Bootstrap
Elige una plantilla de las de arriba, dale el estilo de tu tema de Bootstrap y exporta un HTML limpio para tu app. Si tu equipo también envía newsletters, el mismo diseño puede exportarse directamente a Mailchimp o HubSpot.