Una guía completa para el correo electrónico HTML

Tabla de contenido

A continuación encontrará saltos rápidos a componentes particulares que podría necesitar. Desplácese hacia abajo para obtener una descripción general. O sáltate la tabla de contenido.

• accesibilidad
• insectos
• modo oscuro
• editores e IDE
• soporte de funciones
• marcos
• empezando
• guías y recursos
• CSS en línea
• inspiración
• generador de enlaces mailto
• solicitud de selección de correo
• márketing
• metalenguajes
• vistas previas
• productividad
• eliminar CSS no utilizado
• clientes de correo objetivo
• plantillas
• bloqueador de seguimiento
• transformar HTML

Primeros pasos con el correo electrónico HTML

Si solo está tratando de comprender todo lo que sucede detrás de escena de un mundo peculiar de correo electrónico HTML, Caity G. O'Connor ha publicado una guía maravillosa sobre cómo comenzar con la codificación de correo electrónico. El artículo presenta cursos, tutoriales, artículos y solo pautas generales para tener en cuenta al crear y diseñar correos electrónicos, todo en una guía completa de una página. En SmashingMag, Lee Munroe también ha publicado una guía detallada para crear y enviar correos electrónicos HTML.

Alternativamente, Cómo codificar correos electrónicos HTML para cualquier dispositivo es una guía muy completa sobre cómo crear una plantilla de correo electrónico HTML confiable y cómo probarla, junto con un ejemplo práctico de cómo crear una plantilla de boletín informativo desde cero. En general, esa es una descripción general muy sólida de todo lo que necesita saber para comenzar con el pie derecho.

Jason Rodriguez tiene un curso de video detallado sobre correo electrónico HTML (no gratuito) con casi todo lo que debe saber sobre ellos, desde accesibilidad hasta resolución de problemas, flujos de trabajo y herramientas.

Y si se encuentra luchando con un problema de correo electrónico o simplemente buscando ayuda de una comunidad, #emailgeeks es un excelente punto de partida. Es una comunidad de Slack solo por invitación con muchos canales para hablar sobre código, diseño, ofertas de trabajo, eventos y nuevas herramientas y recursos. También puede encontrar muchos recursos compartidos con el hashtag #emailgeeks en Twitter.

Marcos y lenguajes de correo electrónico HTML

Codificar correos electrónicos limpios y receptivos que brinden una experiencia sólida en todos los clientes de correo electrónico populares puede ser un desafío que requiere mucho tiempo. HEML está aquí para cambiar eso. El lenguaje de marcado de código abierto le brinda el poder nativo de HTML sin tener que lidiar con todas las peculiaridades del correo electrónico. No hay reglas especiales o paradigmas de estilo que dominar, por lo que si conoce HTML y CSS, está listo para comenzar.

MJML se basa en la misma idea de simplificar el proceso de creación de correos electrónicos receptivos. El lenguaje de marcado se basa en una sintaxis semántica que hace que el proceso sea sencillo, mientras que un motor de código abierto hace el trabajo pesado y traduce el MJML que escribió en HTML receptivo. Puede comenzar con un tutorial paso a paso a través de MJML.

Una biblioteca de componentes estándar le ahorra tiempo extra y aligera su base de código de correo electrónico. Y si desea crear el suyo propio, la Guía del sistema de plantillas modulares también podría ser útil.

Hablando de ahorrar tiempo: todos sabemos que el correo electrónico HTML requiere tablas sobre tablas para funcionar correctamente, y lo tedioso que puede ser construirlas. Ahí es donde entra en juego Inky. El lenguaje de plantillas convierte etiquetas HTML simples como <row> y <columns> en tablas HTML complejas para que no tengas que preocuparte.

Marco de correo electrónico HTML basado en Tailwind CSS

Hacer que un correo electrónico HTML funcione en todos los clientes de correo electrónico no es una tarea fácil. Afortunadamente, existen muchas herramientas, plantillas y marcos confiables para facilitar la realización de su trabajo. Por ejemplo, Maizzle es un marco que lo ayuda a crear rápidamente correos electrónicos HTML con Tailwind CSS y posprocesamiento avanzado específico de correo electrónico . También proporciona algunos proyectos listos para usar (Maizzle Starters) con los que puede comenzar de inmediato.

Maizzle utiliza el marco Tailwind CSS para permitir a los diseñadores y desarrolladores crear fácilmente prototipos de correos electrónicos con HTML y CSS. También viene con hermosas plantillas si prefiere no desarrollar cada correo electrónico desde cero. Alternativamente, es posible que también desee considerar MJML.

Marco de correo electrónico HTML basado en Sass

Foundation for Emails lo ayuda a crear correos electrónicos HTML receptivos que funcionan bien con todos los principales clientes de correo electrónico, incluso Outlook. Un enfoque basado en cuadrículas garantiza que su correo electrónico funcione en cualquier dispositivo, los patrones de interfaz de usuario y un inserto de CSS dan forma al correo electrónico rápidamente, y Sass le brinda control sobre los estilos comunes. No importa lo que esté creando, una selección de plantillas receptivas para cualquier cosa, desde correos electrónicos transaccionales hasta campañas de goteo y boletines, le ahorra tiempo que puede dedicar a su copia o embudos de conversión.

Plantillas de correo electrónico HTML a prueba de balas

Cerberus y HTML Email brindan pequeñas colecciones de plantillas confiables y sólidas para correos electrónicos HTML receptivos que han sido bien probados en más de 50 clientes de correo electrónico, incluidos Gmail, Outlook, Yahoo, AOL y muchos otros. EmailFrame.work le permite crear plantillas de correo electrónico HTML receptivas con opciones de cuadrícula preconstruidas y componentes básicos, compatibles con más de 60 clientes de correo electrónico.

Codedmails incluye 60 plantillas y temas de correo electrónico, todos escritos en MJML y probados para compatibilidad. Todo el código está disponible en Github, y las plantillas son de uso gratuito para proyectos no comerciales, mientras que los archivos fuente MJML se proporcionan por un cargo adicional.

Stripo, Chamaileon, Postales, Topol.io, GoodEmailCode, Pixelbuddha y Bee Free cuentan con muchas plantillas de correo electrónico HTML gratuitas, Litmus proporciona Plantillas de correo electrónico adaptables para boletines informativos, actualizaciones de productos y recibos, y CampaignMonitor tiene un generador de plantillas de correo electrónico HTML gratuito con arrastre. funcionalidad n'drop. Otro editor de arrastrar y soltar que vale la pena considerar es Unlayer. Le ayuda a crear plantillas de correo electrónico HTML listas para dispositivos móviles con solo unos pocos clics, sin necesidad de codificación.

Compatibilidad con la función de correo electrónico HTML: ¿Puedo enviar un correo electrónico...?

Una herramienta útil que pertenece al conjunto de herramientas de todos los que se encuentran lidiando con el correo electrónico HTML, ya sea de vez en cuando o con regularidad, es caniemail.com. Inspirado en el exitoso concepto de caniuse.com, Can I email le permite comprobar la compatibilidad con 179 funciones HTML y CSS en 31 clientes de correo electrónico.

Puede ingresar una función para ver qué tan bien es compatible , verificar el índice de funciones, comparar clientes de correo electrónico o ver un marcador de soporte de clientes de correo electrónico que clasifica a los clientes de correo electrónico según su soporte. Los datos completos también están disponibles como un archivo JSON.

Un repositorio para errores de correo electrónico

Apple Mail no muestra los SVG incrustados, Gmail no muestra los correos electrónicos en todo el ancho, Outlook cambia el comportamiento de los Gif animados: todos sabemos lo extraño que a veces se comportan los clientes de correo electrónico.

Para ayudarlo a comprender lo que sucede cuando se encuentra con errores como estos, Remi Parmentier mantiene Email Bugs, un repositorio de GitHub para comportamientos extraños de clientes de correo electrónico . No solo facilita la vida de los diseñadores de correo electrónico al proporcionar un lugar para discutir errores, sino que también trata de informar cada error a la empresa en cuestión y solucionarlo para siempre. Pero en caso de que no sea posible, Cómo dirigirse a los clientes de correo electrónico proporciona una descripción general de las soluciones para dirigirse a clientes de correo electrónico específicos.

Generador de enlaces Mailto

Los buenos enlaces HTML antiguos pueden hacer más de lo que normalmente les damos crédito. Es posible que estemos acostumbrados al prefijo mailto: pero en realidad generar el código puede ser bastante molesto. Mailtolink.me hace una cosa, y lo hace bien: genera el fragmento para los enlaces de mailto , incluidos CC, BCC, línea de asunto y texto del cuerpo.

Mensaje de selección de correo a

A veces, cuando hace clic en una dirección de correo electrónico, es posible que se abra una aplicación que sus clientes realmente no están usando. Es por eso que es común copiar y pegar direcciones de correo electrónico en lugar de hacer clic en los enlaces directamente. Para evitar la frustración del otro lado, podemos usar Mailgo y MailtoUI.

En lugar de abrir un cliente de correo electrónico nativo, ambas herramientas abren una ventana modal , lo que permite al usuario elegir uno de los servicios preferidos o copiar y pegar el enlace. Además, tel también puede abordar todos los enlaces telefónicos, lo que les permite abrir Telegram, WhatsApp, Skype, llamar de forma predeterminada o copiar el número de teléfono, y también es compatible con el modo oscuro.

Inspiración de correo electrónico

Puede parecer que solo porque el correo electrónico HTML se siente bastante antiguo y desactualizado, también lo son las posibilidades de lo que podemos hacer con el correo electrónico HTML. Sin embargo, hay muchos recursos, blogs y podcasts que presentan nuevas técnicas de correo electrónico, ¡algunos de ellos a menudo se encuentran en el lado muy creativo de las cosas!

El blog Litmus, el blog CampaignMonitor y el correo electrónico HTML presentan muchos artículos y podcasts con mejores prácticas, consejos, recursos e incluso podcasts en correo electrónico HTML. Y si necesita un poco de inspiración para los correos electrónicos recientes, ordenados por industria, Really Good Emails y EmailLove también lo respaldan.

• No necesita revisar su propia bandeja de entrada de correo electrónico para encontrar inspiración para el diseño de correo electrónico HTML. Email Love ha reunido una fantástica selección de correos electrónicos inspiradores de las principales empresas.
• Really Good Emails facilita la búsqueda de inspiración de correo electrónico HTML. Tiene la opción de explorar la colección cronológicamente o puede restringir los resultados según el tipo de correo electrónico que sea (por ejemplo, cupón, prueba gratuita), cuál es el objetivo (por ejemplo, recompensas para el cliente, gracias), el nombre de la empresa o la categoría. y así.
• ¿No es suficiente? También hay diseños de correo electrónico HTML y galería de correo electrónico HTML.

Correos electrónicos accesibles

Con el correo electrónico, ¿dónde nos encontramos en términos de accesibilidad ? ¿Anunciamos correctamente los correos electrónicos a los lectores de pantalla? ¿Qué pasa con el modo oscuro? El repositorio de correo electrónico accesible destaca una serie de artículos, herramientas, presentaciones y recursos sobre accesibilidad, no solo para el correo electrónico, sino más específicamente para él.

Con Accessible-Email.org, puede analizar las campañas enviadas y verificar las mejoras de accesibilidad. Con Dark Mode for Email Simulator, puede verificar cómo se ve su correo electrónico en modo oscuro.

CSS en línea y transformar correos electrónicos HTML

Si todo lo que necesita es un espacio limpio para transformar su HTML y CSS, Alter.Email es una opción confiable. Con la herramienta, puede elegir algunos "transformadores", por ejemplo, CSS en línea y limpiar el código , eliminar CSS no utilizado, así como formatear HTML e incluso evitar palabras viudas. Alternativamente, también puede usar Postdrop, que también le permite minimizar y CSS en línea y también enviar un correo electrónico de prueba.

Eliminar CSS no utilizado de las plantillas de correo electrónico

Escribir CSS no es una tarea particularmente emocionante con el correo electrónico HTML, salpicado de estilos !important y en línea por todas partes. Para eliminar el CSS no utilizado de las plantillas de correo electrónico, existe Email Comb. La herramienta le permite agregar clases e ID que le gustaría ignorar, elegir si desea minimizarlo y eliminar comentarios, y muestra exactamente lo que ha eliminado.

Hoja de trucos para la orientación de clientes de correo electrónico

Los clientes de correo electrónico modifican y eliminan parte de su HTML y CSS, a menudo sin piedad. Si uno de los clientes de correo electrónico no se comporta como se esperaba, es posible que desee tratarlo por separado. Una hoja de trucos para apuntar a clientes de correo electrónico le permite elegir un cliente de correo electrónico de destino y al menos intentar abordarlo directamente. Puede que no funcione todo el tiempo ya que los clientes de correo electrónico cambian todo el tiempo, pero es algo que vale la pena probar.

Todo HTML Recursos de correo electrónico

Thebetter.email proporciona un repositorio cada vez mayor de recursos útiles de marketing por correo electrónico, que incluyen personas, sitios de aprendizaje, herramientas, detalles sobre proveedores de servicios de correo electrónico, boletines, código y recursos de correo electrónico interactivos. Elegido a mano por Jason Rodríguez, quien ha estado en la industria durante años y ha pasado mucho de ese tiempo hurgando en la suciedad para encontrar las cosas buenas.

Recursos de marketing por correo electrónico

Si necesita profundizar en las trincheras del correo electrónico HTML, las mejores prácticas y el marketing por correo electrónico, las guías de CampaignMonitor y las guías de Mailchimp tienen muchos recursos para comenzar. De hecho, algunos de ellos serán específicos del producto, pero también son guías más generales sobre las mejores prácticas para enviar correos electrónicos, guías de diseño, consejos de entrega, requisitos antispam y muchos otros temas similares.

Y si está buscando tendencias actuales en marketing por correo electrónico, las tendencias de marketing por correo electrónico de Oracle incluyen una gran cantidad de videos sobre la capacidad de entrega de correo electrónico, la arquitectura de correo electrónico modular, la accesibilidad del correo electrónico y también el marketing por correo electrónico.

Modo oscuro en Gmail y Outlook

Todos nos hemos acostumbrado al modo oscuro en muchas aplicaciones y sitios web, pero ¿qué pasa con la compatibilidad con el modo oscuro en los clientes de correo electrónico HTML? Por supuesto, podríamos enviar el mismo correo electrónico a todos los suscriptores, pero si está acostumbrado al modo oscuro en su sistema operativo, un correo electrónico brillante podría resultar desagradable y alentar el abandono .

La Guía del desarrollador para el modo oscuro en el correo electrónico destaca algunas de las pautas importantes que se deben tener en cuenta al crear una versión en modo oscuro de su correo electrónico HTML. Explica cómo apuntar al modo oscuro, cómo manejar las imágenes y la compatibilidad general con el navegador (¡lo cual es bastante bueno!).

Remi Parmentier profundiza un poco más y muestra cómo solucionar los problemas del modo oscuro de Gmail con los modos de fusión CSS. Gmail impone un cambio de cualquier color de texto claro a color de texto oscuro. Si necesita arreglarlo, Remi ha ideado un uso creativo del mix-blend-mode (compatible con Gmail) para mantener el color claro del texto si es necesario. Y si necesita asegurarse de que sus correos electrónicos respondan al modo oscuro de Outlook.com , Remi también lo tiene cubierto.

IDE de desarrollo de correo electrónico HTML

Si pasa bastante tiempo con el correo electrónico HTML, es posible que desee utilizar un editor de correo electrónico HTML dedicado. Parcel es solo eso: un editor de código creado específicamente para codificar y diseñar correos electrónicos. Proporciona vistas previas en vivo, para que pueda ver en tiempo real lo que está creando, y también tiene funciones de accesibilidad listas para usar, para que pueda verificar los problemas de accesibilidad mientras construye o diseña el correo electrónico. Además, la herramienta también le permite colaborar con su equipo y ejecutar pruebas de correo electrónico directamente desde la herramienta.

Como alternativa, también puede echar un vistazo a Mail Studio, una sofisticada aplicación de escritorio (para Windows, macOS y Linux) que combina la edición visual y de código en un IDE de correo electrónico .

La aplicación viene con una biblioteca de componentes, desde encabezados hasta barras de navegación y acordeones, un par de plantillas de correo electrónico receptivas, integraciones de Google Fonts, compatibilidad con Sass incorporada, paleta de comandos, herramientas de colaboración, vistas previas de correo electrónico e incluso integración con proveedores de servicios de correo electrónico como MailChimp, Campaign Monitor y Sendgrid. Se supone que la integración de Figma llegará pronto.

Generar una vista previa de correo electrónico de página completa

Si necesita una vista previa de página completa de su correo electrónico HTML, Emailpreview.io podría ser justo lo que necesita. Puede copiar/pegar HTML, o importar un archivo EML que acaba de recibir, y la herramienta genera una imagen completamente renderizada de su correo electrónico. También puede elegir el ancho del dispositivo. Una pequeña herramienta útil para tener cerca.

Bloqueador de rastreadores de correo

La mayoría de los correos electrónicos de marketing incluyen rastreadores en el correo electrónico HTML, por lo que pueden rastrear con qué frecuencia, cuándo y dónde los clientes abren los correos electrónicos. MailTrackerBlocker actúa prácticamente como un bloqueador de anuncios para navegadores, pero funciona con clientes de correo electrónico. La herramienta etiqueta quién está rastreando a los clientes y elimina los píxeles de seguimiento antes de que puedan mostrarse, por lo que aún puede cargar todo el contenido remoto y mantener su comportamiento privado. Actualmente solo está disponible para Apple Mail en macOS 10.11 - 11.x ( ¡saludos a Jeremy Keith! ).

Mejorar el correo electrónico

Bandejas de entrada desbordadas, spam con solicitudes de backlinks, personas que te envían correos electrónicos un viernes por la tarde y te hacen un seguimiento el lunes por la mañana: hay muchas cosas que hacen que lidiar con el correo electrónico sea desagradable. Sin embargo, dado que no hay forma de evitar el correo electrónico, solo hay una solución: mejoremos la situación juntos. Con eso en mente, Chris Coyier está ejecutando "Email is Good", un sitio sobre la productividad del correo electrónico .

“El correo electrónico es bueno” echa un vistazo a las cosas que hacen que los correos electrónicos sean molestos, consejos e ideas sobre cómo podemos hacerlo mejor, así como pequeñas anécdotas con las que todos pueden identificarse. Una gran oportunidad para reflexionar sobre cómo cada uno de nosotros trata el correo electrónico y las reacciones que nuestros hábitos de correo electrónico pueden provocar por parte del destinatario.

Terminando

¡Probablemente nos hemos perdido algunas técnicas y recursos importantes y valiosos! Por lo tanto, deje un comentario y refiérase a ellos. Nos encantaría actualizar esta publicación y mantenerla actualizada para que todos podamos volver a ella y crear correo electrónico HTML mejor y más rápido.

¡Sigue aplastando!

Otras lecturas

• Herramientas de auditoría de CSS
• Generadores de CSS
• Generadores SVG
• Una introducción a la creación y envío de correo electrónico HTML para desarrolladores web
• Además, suscríbete a nuestra newsletter para no perderte las próximas.