Según Statista, en 2019, el número de usuarios de email en el mundo llegó a una marca de 3900 millones. 1400 millones utilizan Gmail, de acuerdo con Wikipedia. Parece que el 35.8 por ciento de todos los usuarios prefiere este cliente de correo.
Hay casos donde los emails de texto plano no son suficiente. Y los emails HTML llegan al rescate.
Pero es difícil o imposible crear un email HTML en Gmail. ¿Por qué? Porque este cliente no nos proporciona las herramientas adecuadas. Y, honestamente hablando, no hacen falta.
Internet ofrece un gran número de editores de plantilla de email HTML. La gran mayoría de ellos permite crear plantillas de emails adaptables, mientras que solo unos pocos permiten exportar directamente a Gmail.
¿Quieres hacer lo mismo en minutos?
Querrás enviar un email HTML en Gmail por muchas razones. La razón esencial para enviar plantillas de email a Gmail es que podrás hacer tus campañas de marketing sin usar herramientas de tercero porque ya sabes cómo enviar emails masivos en Gmail.
En este artículo, vamos a:
- crear una plantilla de email HTML;
- exportarla a mi cuenta de Gmail;
- resaltar algunas de las funciones técnicas de Gmail;
- y, por último, vamos a ver cómo Stripo ayuda a lidiar con esto, en otras palabras, qué hace que nuestras plantillas sean compatibles con Gmail.
1. Crear un email
Antes de exportar plantillas de email a tu cuenta de Gmail, necesitas crear una;
Hay tres formas de hacerlo:
1. La primera forma es utilizar nuestras plantillas de email HTML diseñadas.
Stripo ofrece 300+ plantillas listas para usar. Están categorizadas por tipos: confirmación, carro de compras abandonado, promoción, bienvenida, etc. Y categorizadas por características: HTML tradicional, Interactivas (escritas en HTML 5) e emails AMP (escritos en AMP HTML) - como sabemos, Gmail tiene soporte para AMP. Elige el que más te guste. Definitivamente necesitarás personalizarlo para que tu plantilla de email HTML se adapte mejor al estilo de tu marca. No te tomará mucho tiempo.
2. La segunda manera es crear una plantilla de email HTML desde cero.
Tendrás que iniciar sesión en tu cuenta Stripo, ir a la pestaña de Plantillas, y elegir “Plantillas básicas”. Allí encontrarás nuestra nueva oferta “Plantilla Maestra”. Crea una plantilla universal para muchos fines. Y simplemente combina los módulos de acuerdo con la meta de tu campaña de marketing.
También puedes elegir “Plantilla Vacía” en esta sección para arrastrar y soltar bloques básicos en tu plantilla de email HTML de Gmail.
3. La tercera manera es insertar/importar tu código HTML.
También necesitas ir a tu cuenta personal, en la pestaña “plantillas” —> “plantillas básicas”, y “Mi HTML”.
Abre esta “plantilla” e inserta tu código HTML personalizado.
La primera opción es la más fácil a menos que tengas creada tu propia plantilla HTML. Vamos a evaluarlo.
¿Cómo modificas nuestras plantillas de email listas para usar?
Hemos publicado muchos artículos sobre cómo trabajar con nuestro editor. De todas formas, nos encantaría añadir unas líneas.
Ya has elegido la plantilla que te gusta...
Ahora debes abrir el editor:
Paso 1. Cómo colocar una línea de asunto y un preencabezado con Stripo y cómo se verá tu email
Es un hecho conocido que el preencabezado es algo que ven primero antes de abrir el email. Y seamos honestos, ellos juzgan si abrirán o no el email por los siguientes factores: tu nombre, línea de asunto, y el preencabezado.
Por eso es por lo que te recomendamos que nunca omitas esta opción.
Algo importante para mencionar:
Puedes aplicar cualquier fuente que te guste al texto del preencabezado cuando crees una plantilla. Sin embargo, Gmail utilizará “Arial” cuando muestre este texto en la vista previa. Igual, en el cuerpo del email, permanecerá la fuente elegida.
(Fuente Arial, vista previa del encabezado en la línea de asunto)
(He aplicado Courier New al texto del preencabezado en la plantilla)
Nota importante:
Por favor, siempre añade el enlace “Ver en navegador”. También podría llamar se "versión web”.
Para obtener el enlace a la versión web de tu email, tienes que:
- ingresar al “Modo Vista Previa”;
- en una nueva ventana, haz clic en “Copiar” y guarda el enlace a tu portapapeles;
- pega este enlace en el campo correspondiente.
Paso 2. Cómo añadir un encabezado y logo con Stripo y cómo se verá tu email
Se ha dicho varias veces que el encabezado es el rostro de tu email y tu marca. Asegúrate de añadir el logo y nombre de la empresa.
También puedes agregar íconos de redes sociales e información de contacto en el encabezado.
Algo importante para mencionar:
Si colocas un menú sobre el banner, podría ser considerado elemento del encabezado.
Paso 3. Cómo añadir un banner con Stripo y cómo se verá tu email
Este es nuestro elemento favorito de plantillas. Los banners crean el ambiente para todo el email. Por lo tanto, tienes que trabajarlo bien. Encuentra e inserta la mejor imagen que te guste. Me enorgullece decir que actualmente somos el único editor que te permite aplicar filtros especiales a las imágenes de banners sin editores de imágenes o herramientas de terceros. Luego puedes colocar el texto sobre la imagen y envolverlo en el banner/fuentes decorativas, nosotros ofrecemos más de 40.
También, podrás aplicar una imagen adicional sobre un banner. Esto te deja crear banners multicapas sin ningún editor de imágenes.
Para más información sobre cómo crear banners, visita nuestra publicación del blog “Cómo crear banners con Stripo en menos de 10 minutos”.
Paso 4. Cómo añadir estructuras con Stripo y cómo se verá tu email
¿Una imagen y un texto, dos fotos y dos bloques en una fila? Tú decides. Esta es una función común, muchos editores te dejan elegir entre uno o dos bloques en una línea. Mientras que con nosotros puedes elegir hasta cuatro.
Aquí, eres libre de insertar imágenes, textos, botones, videos, etc.
Mira el ejemplo de dos columnas en una estructura:
Tres columnas en una estructura:
Como puedes ver, puedes añadir un botón bajo la descripción a cada bloque.
Estructura de cuatro columnas:
Algo importante para mencionar:
Si 4 columnas en la estructura no son suficientes, puedes añadir 4 columnas más. Eso serían 8 columnas en total.
Para eso, necesitas:
- colocar el puntero sobre la estructura completa en la plantilla de email HTML de Gmail, si lo haces bien verás la etiqueta “Estructura";
- en el panel de ajustes, haz clic en “+”;
- luego, puedes establecer el ancho de tus columnas, o puedes hacer que todas sean iguales.
Aplica imágenes o colores de fondo a cada bloque por separado, o usa un solo fondo para toda la estructura.
Paso 5. Cómo añadir íconos de redes sociales con Stripo y cómo se verá tu email
Ubícalos donde los quieras usar.
Ofrecemos 45 íconos de redes sociales, no solo los típicos para Facebook, Twitter e Instagram. Hicimos lo mejor que pudimos para juntarlos todos para tu conveniencia.
Como bonus, puedes elegir el esquema de colores y su tamaño.
Esto es muy sencillo: arrastra y suelta el bloque “Social” en la estructura necesaria, diseña tus íconos y pega tus URL en los campos “Enlace”.
¿Qué tienen de especial nuestros íconos de redes sociales?
Los configuras una sola vez, y los puedes utilizar en todas las campañas sin necesidad de tener que agregar los enlaces o trabajar en su diseño.
Tienes que hacer los ajustes necesarios en tu perfil con Stripo. Cuando crees tu próxima campaña, solo debes arrastrar el bloque básico “Social” en tu email HTML de Gmail y Stripo insertará los íconos que hayas elegido, con los respectivos enlaces y el diseño que hayas elegido.
Para más información sobre cómo agregar y colocar íconos de redes sociales a tus plantillas de email HTML, mira nuestra publicación en el blog.
Paso 6. Cómo usar nuestra biblioteca de módulos para que te ayude a crear emails HTML en Gmail
Definitivamente valoras mucho tu tiempo y no tienes ganas de crear plantillas similares cada día. Nosotros tampoco queremos eso cuando hay que hacer una nueva campaña. Por esta razón decidimos inventar la Biblioteca de módulos de contenido. Es muy fácil usar nuestra Biblioteca: una vez que creas una plantilla, guarda en la biblioteca el elemento de email/módulo que necesitas y dale un nombre. Y la próxima vez que inicies una campaña nueva, solo tendrás que arrastrar y soltar a la nueva plantilla.
Guarda los elementos, contenedores o estructuras enteras.
En la pestaña “Mis módulos”, verás los módulos que has guardado previamente. En “Módulos de plantilla”, puedes tener los bloques que han sido extraídos de la plantilla misma por el sistema. Y la sección “Avanzado” contiene los módulos creados por nuestros programadores y diseñadores.
Paso 7. Cómo añadir anotaciones promocionales de Gmail con Stripo y cómo se verá tu email
Gmail divide los emails que ingresan en pestañas: principal para emails personales, emails promocionales, actualizaciones, etc. Los usuarios pueden ajustar el número de pestañas.
Si envías emails masivos por Gmail, es probable que tus emails sean entregados en la pestaña de promociones.
Las anotaciones promocionales ayudarán a que tus emails destaquen entre los demás emails entrantes en la bandeja de entrada de los usuarios.
Esta función es solo para dispositivos móviles.
Para más información sobre cómo crear anotaciones, lee nuestra publicación en el blog.
Paso 8. Cómo añadir elementos AMP con Stripo y cómo se verá tu email Gmail
En marzo de 2019, Google lanzó AMP para emails. Y Stripo es el primer creador de plantillas drag-n-drop que permite crear emails AMP sin tener que saber código.
Stripo ofrece dos bloques AMP drag-n-drop:
- acordeón — para presentar tu contenido en secciones. De esa forma se ve más estructurado;
- carrusel de imágenes — para colocar 3-16 banners en una pantalla. Los lectores solo deberán hacer clic en la flecha para ver todas las imágenes del carrusel.
Puedes también crear componentes AMP con Google playground, e incrustarlos en tus plantillas de email HTML de Gmail para nuestro editor de código abierto.
Para más información sobre cómo crear emails AMP con Stripo, lee nuestra publicación en el blog.
Paso 9. Cómo ajustar tu email HTML para Gmail en dispositivos móviles
Literalmente, Todos los creadores de email ahora brindan a sus usuarios plantillas de email adaptable. Pero aun así, algunos pueden cargarse inapropiadamente en dispositivos móviles, con fuentes más pequeñas, sangrías faltantes y rellenos. Arruina el diseño del email y hace que sea ilegible.
Stripo permite ajustar tus emails para la app de Gmail con 1 solo clic.
Para activar esta opción tienes que:
- Ir a Apariencia;
- elegir la pestaña Ajustes Generales;
- activar el botón Adaptar para Gmail App.
Por favor, recuerda que también puedes añadir las siguientes funciones en tus emails HTML de Gmail:
- efecto rollover de imagen — funciona en escritorio;
- temporizadores — funciona en escritorio y móviles;
- enlaces ancla a pestañas de menú — funciona en escritorio y móviles;
- botones animados CSS — funciona en escritorio;
- formularios de encuesta — funciona en escritorio; en dispositivos móviles los lectores verán el enlace al cuestionario en Google.
Todos los elementos mencionados se procesan a la perfección en Gmail, y pueden ser fácilmente creados con Stripo sin saber HTML.
2. Exportar emails HTML a Gmail
Este es mi paso favorito.
Antes de exportar tu email, te recomendamos previsualizarlo. ¿Cómo? Solo haz clic en el botón de vista previa arriba del email. Se ve así:
Aquí verás tanto las versiones de escritorio como móvil de tu email.
La versión de escritorio de tu mail puede tener dos versiones también: HTML y AMP HTML. Debes previsualizar ambas. Si te gusta lo que ves, y tu validador de código AMP no detecta errores en tu email, puedes proceder a exportarlo.
- haz clic en el botón de exportar;
- en una ventana emergente, elige Gmail;
Nota: asegúrate de que tienes activada la opción de ventanas emergentes en tu navegador.
- en una nueva ventana emergente, se te pedirá que inicies sesión con Google;
- otorga acceso a Stripo a tus borradores haciendo clic en el botón “Permitir”;
- encuentra tu plantilla de email HTML en la carpeta de Borradores. Está listo para ser enviado.
Nota importante:
Esto lo haces solo una vez. Cuando exportes emails HTML a Gmail la próxima vez, solo deberás elegir Gmail de la lista de Exportación, y el email será exportado a este cliente de inmediato.
¿Cómo puedes usar las plantillas de email HTML en Gmail? Tan solo ingresa la línea de asunto si no lo has hecho en Stripo, inserta un lector si deseas enviar la plantilla HTML en Gmail a un solo usuario o un grupo si deseas enviar un email masivo, ¡y consentir a tus lectores con elegantes emails!
Por cierto, ¡puedes editar las plantillas antes de enviarlas!
3 y 4. Restricciones técnicas de Gmail y cómo lidiar con algunas usando Stripo
He leído varios hechos e hipótesis sobre Gmail y decidí probarlas todas. Estas son:
Hipótesis 1. Gmail sugiere que los lectores descarguen imágenes sin enlaces
Internet dice que, si una imagen en un email con formato HTML no contiene enlaces, entonces Gmail sugerirá que los usuarios descarguen eso.
Lo he probado, y es verdad. Podrías no querer este botón de “descargar” porque perjudica todo el diseño, y el email no lucirá profesional de ese modo.
Solución: cuando cargues imágenes para insertar al email, puedes añadir igual un enlace. Pero incluso si te olvidas, nuestro sistema tiene un “enlace” que se usa como predeterminado:
No llevará a tus clientes a ningún lado, pero no estará ese irritante botón de “descargar” sobre las imágenes en tus emails.
Conclusión: verdadera.
Hipótesis 2. Las imágenes sin texto alternativo van a la carpeta de Spam
Apuesto a que lo has oído también, que los emails con imágenes van a la carpeta de correo no deseado si no tienen texto alternativo en cada imagen usada.
Envíe deliberadamente muchos emails sin texto alternativo, y todos llegaron a la bandeja de entrada sin problemas. Aunque esta vez solo lo probé con Gmail. Así que no puedo prometer que tus emails sin texto alternativo pasen los filtros de spam de Outlook o Apple Mail. Como consecuencia, si vas a enviar emails a usuarios además de Gmail, necesitarás el texto alternativo para pasar los filtros de spam.
No importa cuán fácil sea pasar los filtros de SPAM, le recomendamos que agregue textos alternativos a las imágenes. Si los clientes de correo electrónico los bloquean, los destinatarios seguirán teniendo una idea de qué se trata el mensaje. Intenta que los textos alternativos sean lo más claros posible.
Conclusión: los correos electrónicos sin texto alternativo se entregan a Incoming. Pero eso podría ser solo suerte :) Además, necesitamos agregar texto alternativo a las imágenes para otros clientes de correo electrónico y para accesibilidad.
Hipótesis 3. Gmail recorta los mensajes
Esto es cierto. Gmail corta los emails que pesen más de 102kB.
Al final de la parte visible de un email, da la opción de “ver el mensaje completo”.
Actualmente, no hay posibilidad técnica para superar esto. Pero puedes pesar tus emails con nosotros:
- haz clic en el botón “exportar”;
- elige “HTML”;
- descarga HTML;
- y luego haz clic derecho para ver las propiedades del archivo.
Las propiedades del archivo dicen que pesa 65 kB. He verificado esta información con algunas aplicaciones, incluyendo mail-tester.com. Todas confirmaron el peso del archivo.
Conclusión: verdadera. Sabemos cómo pesar nuestros emails con mail-tester u otra herramienta parecida.
Hipótesis 4. Gmail no soporta la clase <div>
Gmail no transfiere y muestra estos atributos. Probada.
Conclusión: falsa.
Hipótesis 5. El botón deshacer no funciona para emails masivos
Totalmente falso en caso de que utilices Gmail sin Add-ons como Gmail Mail Merge. Todo lo que debes hacer es ir a tus ajustes, buscar “Deshacer Enviar” y elegir el tiempo: 5, 10, 20 o 30 segundos.
Probé aplicar este truco con emails masivos y funcionó.
Conclusión: falsa.
Hipótesis 6. Los bloques de texto con más de 8.500 caracteres son eliminados
Como redactora creativa, o como mujer, me gustan las oraciones largas y las explicaciones detalladas. Y decidí insertar uno de los artículos en el bloque de texto. El artículo contenía alrededor de 10.000 caracteres sin contar los espacios. Envié ese email a mi amigo. Mi email fue entregado, ninguno de los bloques fue recortado o eliminado.
Así que podemos decir que esta hipótesis no fue confirmada. Lo que es genial, por cierto. Pero sinceramente dudo que alguien envíe un email tan largo a nuestros clientes.
Conclusión: falsa.
Hipótesis 7. Los números de teléfono y direcciones de email se hacen cliqueables en emails HTML en Gmail
Escuché que Gmail inserta enlaces a nuestras direcciones de email y número de teléfonos en los emails, en otras palabras, los hace cliqueables. He probado gran cantidad de números de teléfonos y direcciones. ¿Sabes qué? Ninguno de los números se hizo cliqueable. Todavía tengo que seleccionar y copiar para usarlos.
¡¡Pero!! La situación con las direcciones de email fue bastante divertida. Estaban o grises, pero cliqueables, o azules y subrayadas, pero no cliqueables.
Conclusión: falsa. Tenemos que hacernos cargo manualmente :)
Hipótesis 8. Los fondos no se cargan en Gmail de escritorio si el ancho de email excede los 640 píxeles
Muchos marketers dicen que Gmail no muestra el color de fondo del email de Gmail, ni la imagen de fondo, si el ancho es mayor de 640 píxeles.
Por supuesto, probamos eso.
El color/imagen de fondo (probamos ambos) se mostraron en Gmail en todos los dispositivos y todos los navegadores.
(Ancho de la Parte de contenido: 670 píxeles, SO: macOS)
Conclusión: falsa.
Hipótesis 9. Gmail no reemplaza las fuentes personalizadas con las predeterminadas
Las fuentes personalizadas hacen que tus campañas sean más únicas. Sin embargo, esta es la verdad: Gmail tiende a reemplazar algunas fuentes personalizadas con la predeterminada: Arial.
He probado 4 fuentes diferentes.
Así es como funcionó:
- Great Vibes: funcionó bien en escritorio y móvil;
- Dokdo: fue reemplazada con Arial;
- Alexa Std: fue reemplazada con Arial;
- Montserrat: fue reemplazada con Arial.
Conclusión: verdadera. Pero deberás probar qué fuentes son las que en verdad te gustan y que no sean reemplazadas por las predeterminadas.
Recuerda que puedes cargar fuentes personalizadas con Stripo.
5. Previsualización y pruebas
Siempre, antes de enviar un email HTML en Gmail, y antes de exportarlo, asegúrate de hacer una vista previa y probar tus emails.
Nuestra herramienta de prueba de email te permite previsualizar los emails en más de 90 clientes de email y dispositivos sin salir del editor.
Últimas palabras
Ahora que sabes cómo crear un email HTML en Gmail, y como hacer esto con Stripo no lleva mucho tiempo, esperamos que desde ahora envíes solamente emails HTML elegantes a tus amigos y colegas.
Si tienes dudas o preguntas, deja un comentario debajo o escríbenos a support@stripo.email.
1 comentarios