¿Qué herramientas para incorporar automáticamente el estilo CSS para crear código HTML de correo electrónico? [cerrado]


122

Cuando eche un vistazo a http://www.campaignmonitor.com/css/, se da cuenta de que necesita incrustar estilos en línea en su HTML, para que su correo electrónico pueda leerse en cualquier cliente de correo.

¿Conoces alguna herramienta o script para convertir automáticamente un archivo HTML con un archivo declarado en un archivo HTML con solo atributos de estilo CCS en línea?

Editar : ¿Alguna solución de Javascript (es decir: http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ )? Con jQuery?


3
Acabo de hacer una pregunta similar sobre Recomendaciones de software como seguimiento de esta: softwarerecs.stackexchange.com/questions/9983/…
Grzegorz Oledzki

Solo tenía que resolver esto exactamente para un departamento en el trabajo. Esta pregunta proporcionó los pasos necesarios para resolver el problema.
Gopherkhan

Respuestas:


80

Consulte el convertidor en línea premailer.dialect.ca o este script de Python para hacerlo.


10
Parece que Premailer se mudó a una nueva URL: premailer.dialect.ca
Matt Huggins

2
Mail Chimp ofrece un gran estilo de línea aquí: beaker.mailchimp.com/inline-css
dhornbein

1
premailer.dialect.ca es genial, pero se ahoga en muchas páginas. Es más de la mitad en mis pruebas. Por ejemplo, prueba esta página.
Nick Woodhams

Ejecute su propio servidor de premailer ... github.com/TrackIF/premailer-server Fácil de ejecutar en ec2: docs.aws.amazon.com/elasticbeanstalk/latest/dg/…
Adam Lane

NINGUNO de ellos en realidad elimina la etiqueta STYLE, que es el problema principal con el que lidiará
Coldstar el

33

Aquí hay una lista de herramientas de alineación listas para usar basadas en la web, se han mencionado anteriormente algunas. Si hay alguna que me haya perdido, siéntase libre de editarla y agregarla. No puedo prometer que cada uno funcione como se anuncia, así que deje los comentarios, pero no dispare al mensajero ...

Y aquí hay uno que funciona a la inversa (sin alinear su CSS)


3
MailerMailer fue el único que funcionó para mí manteniendo el formato intacto.
Jeshurun



8

Escribí una biblioteca Node.js llamada Styliner que integra CSS en Javascript del lado del servidor.

También admite MENOS hojas de estilo (y admite complementos para otros formatos)


7

Es posible que desee echar un vistazo a PostageApp .

Una de sus características realmente fuertes es que tiene un sistema de plantillas muy robusto que puede alinear automáticamente HTML y CSS sin ningún problema.

( Divulgación completa: soy el gerente de producto de PostageApp).


¿Entonces está haciendo CSS inlining al final de la cadena de procesamiento (justo antes de enviar el correo electrónico a alguien)?
zazi

6

Esto puede ser demasiado tarde, pero si desea hacer que su HTML sea lo mejor posible para el marketing por correo electrónico (al incluir su CSS y al usar un montón de otras herramientas geniales), use el Premailer . Es gratis y, por supuesto, hecho en asociación con CampaignMonitor.

Espero eso ayude.


+1 para Premailer. Tiene un formulario web y una API que puede usar para integrarlo en cualquier plataforma. Si está utilizando node.js, hay un contenedor aquí .
Jed Watson

6

Llego un poco tarde al juego, pero espero que esto ayude a alguien.

Encontré este pequeño y agradable método jQuery / javascript que se puede insertar en una página: http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery / /

Lo he editado un poco para admitir IE y también para admitir una página con varios archivos CSS adjuntos aplicando estilos en el orden correcto.

$(document).ready(function ($) {
            var rules;
            for(var i = document.styleSheets.length - 1; i >= 0; i--){
                if(document.styleSheets[i].cssRules)
                    rules = document.styleSheets[i].cssRules;
                else if(document.styleSheets[i].rules)
                    rules = document.styleSheets[i].rules;
                for (var idx = 0, len = rules.length; idx < len; idx++) {
                    if(rules[idx].selectorText.indexOf("hover") == -1) {
                        $(rules[idx].selectorText).each(function (i, elem) {
                            elem.style.cssText = rules[idx].style.cssText + elem.style.cssText;
                        });
                    }
                }
            }
            $('style').remove();
            $('script').remove();
            $('link').remove();
        });

La página se puede copiar / pegar en el cuerpo del correo electrónico.


¿Por qué eliminas el script? Y aquellos que eliminan la ejecución, creo que deberían salir del ciclo for.
jcubic

@jcubic Tienes razón en cuanto a: la ubicación de la ejecución de eliminación, editaré. La eliminación del script estaba en mi código original, quería HTML más limpio con solo lo que era realmente necesario para mostrar la página.
John C

Muchas gracias por este script conciso, he estado buscando durante horas y esta es la solución más limpia que he encontrado.
kerzek

1
Estaba en el mismo bote que @kerzek. Esto funcionó hasta cierto punto, pero algunos estilos se estropearon. Sin embargo, esta versión del código funcionó de manera excelente (probado y pobre): devintorr.es/blog/2010/05/26/…
radu.luchian

5

No es suficiente simplemente alinear tu CSS. No hay normas observadas sobre cómo se mostrará un correo electrónico HTML en cualquier cliente de correo electrónico que se utilice. Todos lo hacen de manera diferente, y cuanto más diseñe su correo electrónico, más probabilidades habrá de que se convierta en una mayor cantidad de clientes. Muchos profesionales en este espacio simplemente usan imágenes y tablas y quizás algunos colores de fondo, pero nada más. Incluya siempre un enlace a un sitio web que tenga una copia funcional del correo electrónico y siempre proporcione una variante de texto sin formato.




Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.