7 Herramientas principales de edición CSS en línea para correos electrónicos que debes probar hoy

En la superficie, enviar un correo electrónico HTML debería ser una tarea sencilla, no es una tecnología nueva. Sin embargo, puede ser increíblemente complicado. De hecho, Smashing Magazine ha afirmado que «El diseño y desarrollo de correo electrónico es una bestia. Los proveedores de clientes de correo electrónico no han sido tan progresistas como los proveedores de navegadores web al adoptar nuevos estándares». Definitivamente, esta es una tarea para sus técnicos o equipo de desarrollo, y no un trabajo rápido para darle al aprendiz de la oficina un viernes por la tarde.

Algunos gerentes creen erróneamente que enviar correos electrónicos en masa no es más que una versión ampliada de enviar correos electrónicos regulares. Desafortunadamente, no es tan simple como eso. No puedes simplemente escribir un correo electrónico y enviarlo a diez mil personas en tu proveedor de correo electrónico estándar, como Gmail u Outlook. Estos servicios tienen un límite de 500 destinatarios diarios, y te considerarían un spammer si intentaras enviar más. Por esta razón, necesitas usar un proveedor especializado de correos electrónicos en masa si tienes la intención de dedicarte al marketing por correo electrónico.

Puedes enviar correos electrónicos simples de texto; muchas empresas lo hacen, prefiriendo su simplicidad y sabiendo que se puede leer en virtualmente cualquier dispositivo. Sin embargo, en esta era visual, los correos electrónicos de texto no destacan. Si quieres que tus correos electrónicos se ajusten al resto de tu marca, realmente necesitas utilizar correos electrónicos HTML… y ahí es cuando las cosas se complican. Construir una plantilla HTML puede ser un trabajo difícil, incluso para un desarrollador experimentado.

Sin embargo, ahora hay varias herramientas que pueden ayudarte con el desarrollo de tu correo electrónico HTML, y algunas de ellas ayudan con la edición en línea de CSS.

Table de contenidos

Herramientas principales de edición en línea de CSS para correos electrónicos:

¿Por qué debes preocuparte por la edición en línea de CSS?

Al igual que las páginas web, los correos electrónicos HTML involucran una combinación de HTML (Lenguaje de Marcado de Hipertexto) y CSS (Hojas de Estilo en Cascada). El HTML proporciona la estructura general de tu correo electrónico, mientras que el CSS describe en detalle cómo se ve. Efectivamente, el HTML le dice a tu cliente de correo electrónico qué va dónde en tu correo electrónico, y el CSS se detalla en cómo se debe mostrar.

Cuando diseñas una página web, tienes tres formas de incluir el CSS en tu código. La mayoría de los desarrolladores web prefieren agregar su CSS en una hoja de estilos separada. Esto significa que puedes cambiar fácilmente el estilo de tu sitio sin alterar el código HTML principal. Otra opción es incrustar tus estilos en la sección <;head> de tu documento HTML principal. Esto también mantiene tu código CSS relativamente separado de tu código HTML principal y puede ser especialmente útil para diseños responsivos, donde modificas tu codificación para reflejar las diferentes formas en que vemos la web hoy en día (en teléfonos, tabletas, computadoras portátiles, incluso televisores).

Sin embargo, muchos clientes de correo electrónico, incluyendo Gmail, ignoran gran parte del CSS colocado en la sección <;head> de los documentos HTML. También bloquean el acceso a hojas de estilos externas. Si codificas tu correo electrónico HTML de la misma manera que lo haces con una página web estándar, te decepcionarás porque el correo electrónico resultante no reconocerá tus estilos CSS y se verá extraño.

La tercera forma de mostrar CSS para una página web es utilizar estilos en línea. Esto significa colocar tu código CSS entre tu código HTML, potencialmente desordenado y confuso para un sitio web de gran tamaño (y muy difícil de modificar si deseas cambiar el aspecto de tu sitio). Con estilos en línea, muestras elementos de código CSS que modifican la apariencia de las declaraciones HTML directamente al lado de cada declaración HTML relevante.

La única forma consistente de garantizar que tus correos electrónicos se muestren como deseas es codificarlos con CSS en línea, lo cual puede llevar tiempo y ser desordenado si no has diseñado tu sitio de esa manera. Por lo tanto, debes utilizar una herramienta para convertir cualquier código de un sitio web que desees utilizar en tus correos electrónicos y así incluir CSS en línea.

¿Por qué puede ser complejo manejar correos electrónicos HTML?

Es posible que los desarrolladores web modernos no estén al tanto de las batallas que ocurrieron antes de los estándares consistentes que disfrutamos hoy en día. Antes de que Google Chrome reinara en el mundo de los navegadores de internet, hubo una batalla constante entre Internet Explorer de Microsoft y Netscape Navigator. Desde la introducción de HTML5 y CSS 3, ha existido una armonía relativa en la programación web, con estándares claros en todos los navegadores en competencia.

Desafortunadamente, los principales clientes de correo electrónico no se han desarrollado de manera tan ordenada. Aunque la mayoría de los navegadores web ahora aplican consistentemente los estándares de HTML y CSS, los clientes de correo electrónico como Gmail, Outlook y los demás no lo hacen. De hecho, en el caso de Outlook, Microsoft tomó una decisión consciente que empeoró las cosas. Antes de Outlook 2007, utilizaban Internet Explorer para mostrar correos electrónicos HTML. Pero en ese momento, Microsoft decidió utilizar Microsoft Word para renderizar correos electrónicos HTML (y de hecho, código HTML en todas sus aplicaciones de escritorio de Windows). Microsoft todavía muestra HTML de esta manera en sus aplicaciones, lo cual carece de gran parte de la compatibilidad que tendría un navegador.

Esto destaca claramente el problema. Enviar un correo electrónico en HTML es mucho más complicado que un simple correo electrónico basado en texto. Debes asegurarte de que funcione al menos en cuatro o cinco navegadores web principales y en 12-15 clientes de correo electrónico diferentes (todos los cuales tienen su propia forma de renderizar correos electrónicos HTML).

Y por supuesto, la mayoría de estos navegadores web y clientes de correo electrónico llevan en el mercado muchas iteraciones. Las empresas rara vez comienzan a desarrollar cada versión desde cero; simplemente realizan modificaciones a la versión anterior. Por lo tanto, esta falta de interpretación consistente empeora con el tiempo, lo que dificulta aún más la vida de los desarrolladores.

Herramientas de edición en línea de CSS para correos electrónicos

Por supuesto, es posible codificar en línea el CSS desde el principio, pero esto puede volverse rápidamente inmanejable. Por lo tanto, tiene sentido utilizar una herramienta que haga gran parte del trabajo pesado por ti. Con la mayoría de las herramientas que encontrarás, debes llevar cualquier código incrustado que tengas (o incluso cualquier código que tengas en una hoja de estilos separada), copiarlo en la herramienta de tu elección y la herramienta creará una versión en línea para que la utilices en tu cliente de correo electrónico.

1. Conversor de HTML del sitio web de Influencer Marketing Hub a HTML para correo electrónico

, Herramienta

Nuestra herramienta funciona de manera diferente al resto de los productos aquí. Hemos construido una herramienta que puede ayudar en la creación de tu correo electrónico HTML. Aquí tomamos el código HTML de tu página web y lo adaptamos para tus correos electrónicos en HTML.

Salida

2. Herramienta CSS Inliner de Mailchimp

Mailchimp reconoce que algunos clientes de correo electrónico eliminan las etiquetas <;head> y <;style> de los correos electrónicos, por lo que es mejor tener tu CSS escrito en línea dentro de tu marca. Saben que escribir CSS en línea consume tiempo y es repetitivo, por lo que han construido esta herramienta de conversión para convertir automáticamente el CSS de tu correo electrónico en línea. Todo lo que tienes que hacer es pegar el HTML de tu correo electrónico en el cuadro de la página, hacer clic en Convertir y obtendrás una versión más amigable para enviar por correo electrónico. Mailchimp observa que si el CSS de tu correo electrónico incluye consultas de medios para estilos receptivos, la herramienta de inliner dejará intactos esos conjuntos de reglas.

3. PutsMail CSS Inliner

PutsMail afirma que su CSS Inliner mejora la compatibilidad y la resiliencia de tu diseño al convertir tus estilos en línea. Al igual que muchas de estas herramientas, simplemente copias el cuerpo (código fuente HTML) y haces clic en el botón para generar CSS en línea.

Contenido relacionado:

4. Campaign Monitor CSS Inliner

Campaign Monitor enfatiza que su inliner de CSS maneja consultas de medios, fuentes web y otras técnicas que dependen de que se incruste algún CSS.

5. Premailer

Premailer ha proporcionado una versión de un inliner de CSS desde 2007. Han tenido dificultades para mantenerlo en funcionamiento en los últimos años, pero Mr. Templates ahora pone a disposición el pre-volado de Premailer para correos electrónicos HTML. Te pide una URL como fuente, o puedes pegar HTML como fuente. Luego te pide una cadena de consulta para agregar a los enlaces. También puedes seleccionar varias opciones antes de hacer clic en Enviar para preparar tu código.

6. HTML Email Responsive Email CSS Inliner

El Responsive Email CSS Inliner de HTML Email funciona de manera similar a la mayoría de los productos mencionados aquí. Ingresas tu código fuente HTML/CSS en un cuadro y luego muestra el CSS incrustado resultante en otro cuadro.

Esta herramienta tiene una interfaz de usuario más moderna que algunos de los otros productos, y también muestra tu correo electrónico resultante tal como se vería en el correo electrónico de alguien, tanto en proporciones de escritorio como móviles.

HTML Email resalta que la herramienta está impulsada por Juice. Como es un proyecto de código abierto, se está trabajando y mejorando continuamente.

HTML Email también da algunos consejos sobre cómo usarlo con una hoja de estilo externa. En este caso, primero deberás copiar tus estilos entre una etiqueta <;style>. También observan que las consultas @media se ignoran por defecto, por lo que tus estilos receptivos se mantienen.

7. Litmus Builder

Otro enfoque es utilizar un generador de correo electrónico especializado como Litmus Builder para crear tu

, emails. Los desarrolladores pueden usar el Editor de Código HTML para construir correos electrónicos y plantillas desde cero. Otros («interesados en el correo electrónico», según Litmus) pueden usar el Editor Visual para crear correos electrónicos sin errores y de acuerdo con la marca sin necesidad de programar.

Incluso puedes utilizar la Sincronización con ESP para sincronizar automáticamente tu código desde Litmus Builder a tu proveedor de servicios de correo electrónico (ESP) con solo hacer clic en un botón. Una vez conectado, cada vez que realices cambios en tu código en Litmus Builder, este se actualizará automáticamente en tu ESP también.

Con Litmus Builder, puedes convertir automáticamente el CSS de tu correo electrónico en línea con un interruptor sencillo.

Preguntas frecuentes

¿Qué es una herramienta de CSS en línea?

Algunos clientes de correo electrónico eliminarán y comentarán el código CSS.

¿Cómo se hace un CSS en línea?

El CSS se puede agregar a los documentos HTML de dos maneras: a través de la línea, utilizando el atributo de estilo dentro de los elementos HTML, o internamente, utilizando

¿Qué aplicación se utiliza para CSS?

CSScomb es un formateador de estilo de codificación que puede ayudarte a ordenar las propiedades CSS en un orden preconfigurado específico. CSS Compressor es otra aplicación que puedes utilizar, la cual ayuda a minimizar y comprimir tu CSS. Live CSS Editor es una extensión de Chrome y Safari que te permite escribir libremente reglas CSS en cualquier sitio y ver los resultados de inmediato.

¿Qué es un ejemplo de CSS en línea?

Un ejemplo de CSS en línea incluye:

A continuación, se aplicará este CSS en línea a este encabezado:

¿Cómo traduzco HTML a CSS?

Puedes traducir HTML a CSS a través de la línea de comandos. Abre un símbolo del sistema y ejecuta el código de esta manera:

Instala

Descarga, instala y abre VS Code.

Pulsa CMD/CTRL+P para abrir el cuadro de diálogo de Apertura Rápida.

Escribe ext install tautvydasderzinskas. vscode-html-to-css.

Haz clic en el botón Instalar y luego en el botón Habilitar.