Share
Inmediatamente después de algunos de nuestros hallazgos recientes sobre el estado de CSS en el correo electrónico, consideré que ya era hora de sacudir un poco las cosas. Así que aquí va - CSS3 en vidas de correo electrónico. Ok, lo siento si te hice dejar caer tu tostada, ahí. Sé que estás pensando: "Pero ... Todavía es en gran parte experimental ... ¡En el navegador, para arrancar!" Sí, la compatibilidad con CSS3 es aún más inconstante entre un gran número de clientes de correo electrónico que ni siquiera pueden entender bien CSS2. Pero eso no significa que sea demasiado pronto para tocar nada de eso..
En este artículo, analizaré dos propiedades que puede usar en sus plantillas de correo electrónico, junto con algunos ejemplos prácticos. Así que, cepilla tu tostada y vamos a empezar a trabajar.
Si ha estado diseñando plantillas de correo electrónico HTML por un tiempo, sabrá que a menudo es casi imposible predecir qué tipo de peculiaridades relacionadas con CSS se mostrarán al probar su diseño en los principales clientes de correo electrónico. Por ejemplo, Gmail ha sido notorio por eliminar cualquier CSS que no esté en línea (y por un tiempo, no reconocer el relleno de celdas y espacios de celdas de la tabla), mientras que algunos clientes simplemente eligen eliminar los estilos por completo..
Si eres nuevo en el diseño de plantillas de correo electrónico HTML, esta es probablemente la cosa más premonitoria que puedes leer. Pero no temas, hay mucha información para ponerte al día. Déle un vistazo a 24ways "Rock Solid HTML Emails 'y verá que no hay ninguna razón para aumentar el zefrank. Es manejable.
De todos modos, dado que los diseñadores ya tienen suficientes problemas con el soporte de CSS2 en los clientes de correo electrónico, ¿no debería CSS3 ser un sueño imposible? Bueno, sigue leyendo.
Si y no. Para el caso de sí, hay un par de clientes de correo electrónico populares que tienen un soporte CSS3 bastante sólido (más sobre esto más adelante). La buena noticia es que algunas de las propiedades de CSS3 que se muestran en estos clientes se degradan con gracia en cualquier otro lugar, lo que significa que siempre hay una opción alternativa. Pero dicho esto, si desea asegurarse de que sus plantillas de correo electrónico se muestren de manera casi coherente en los principales clientes de correo electrónico, entonces CSS3 no es para usted.
Si recurre a nuestra guía de CSS en el correo electrónico, verá que hay algunos clientes de correo electrónico que tienen soporte parcial o total para varias propiedades de CSS3. Y en su mayor parte, tienen una cosa en común - Webkit.
El aspecto de su plantilla de correo electrónico en Outlook no se parece en nada a cómo se verá en su Blackberry, o cuando esté viendo su correo web en Firefox.
Si tiene la bendición de trabajar siempre en una Mac, revisar su correo electrónico en su iPhone y pasar el tiempo navegando en su iPad, entonces tiene una vista bastante consistente de la web. Desafortunadamente, el resto de nosotros tiene que ver con diversos grados de compatibilidad con CSS en varias plataformas de proveedores. El aspecto de su plantilla de correo electrónico en Outlook no se parece en nada a cómo se verá en su Blackberry, o cuando esté viendo su correo web en Firefox.
Probablemente no sea una sorpresa para usted que los dispositivos Apple utilicen el mismo motor de representación (el software que decide cómo mostrar el código HTML y CSS) en sus aplicaciones de correo electrónico y en el navegador Safari. Para los diseñadores, es probable que sea menos sorprendente que este motor sea Webkit y su compatibilidad con CSS3 sea comparativamente muy buena..
Dicho esto, los clientes de correo electrónico de Webkit (Apple Mail, iPhone y iPad Mail) representan aproximadamente el 20% de los clientes de correo electrónico utilizados en general. Sin embargo, lo que realmente cuenta son los clientes de correo electrónico que utilizan sus suscriptores. Por ejemplo, un desarrollador de software para Mac puede tener cerca del 100% de sus clientes viendo su boletín en dispositivos Apple.
Con esto en mente, echemos un vistazo a algunas de las propiedades de CSS3 que ahora se están introduciendo en su bandeja de entrada.
Bienvenido al último número de chismes de widgets mensuales de Widgets Inc.
Añadiendo caída y sombras interiores con sombra de texto Es una forma no destructiva de decorar tu texto. No solo puede evitar que se cree el mismo efecto utilizando una imagen, sino que también se ve bien en los clientes donde sombra de texto no es compatible.
Verlo en un navegador web..
El uso de esquinas redondeadas en su diseño, por lo demás cuadrado, o los botones cuadrados ya es una técnica de uso común en la web. También puede dar a sus plantillas de correo electrónico una apariencia más suave y moderna en los clientes de correo electrónico anteriores, además de volver a las esquinas cuadradas cuando no es compatible.
Con el anuncio de que radio del borde será implementado formalmente en IE9, podemos esperar ver más de su uso.
Algunos de los usos más extremos de CSS3 en las plantillas de correo electrónico se pueden encontrar en situaciones en las que los destinatarios utilizan un conjunto muy limitado de clientes de correo electrónico. Un gran ejemplo de esto es el desarrollador de Mac mencionado anteriormente. Panic, los proveedores de "software sorprendentemente bueno para Mac", envía facturas increíbles después de comprar uno de sus títulos, que incluyen: ¡jadeo! - Botones animados y brillantes.
Aquí está el código que utilizaron para lograr este efecto:
-webkit-nombre-animación: 'resplandor'; -webkit-animation-duration: .7s; -webkit-animation-iteration-count: infinito; -webkit-animation-direction: alternativo; -webkit-animation-timing-function: facilidad de entrada;
Por supuesto, esto no se vería tan bien en un cliente de correo electrónico que no sea Apple Mail, pero ciertamente es un buen concepto.!
¿Cuánto CSS3 puedes ver en este otro diseño de correo electrónico de Panic? Haga clic a través de una versión más grande:
Tome nota de cómo el diseño cambia de tamaño con elegancia en el navegador. ¿Y esas franjas de correo aéreo? Son barras diagonales hacia adelante (/). ¡Genio! Para averiguar qué entró en esta plantilla, echa un vistazo a este artículo.
/ / / / / / / / /
Eche un vistazo a los informes de uso del cliente de correo electrónico de CampaignMonitor, y vaya a la guía definitiva de CSS en correo electrónico para tener una idea de qué propiedades de CSS3 están disponibles en los principales clientes de correo electrónico. Y por supuesto, prueba, prueba, prueba. Con un poco de CSS3, un poco de experimentación y una pequeña cantidad de precaución, puede hacer que su plantilla de correo electrónico se destaque entre la multitud.
Si tiene la capacidad y desea vender sus diseños de correo electrónico, ahora es el momento de revisar la categoría Plantillas de correo electrónico en ThemeForest!
Accentsconagua