Si venís del mundo de web, seguramente estés acostumbrado a usar las estructuras estándar de web:
- etiquetas semánticas
- CSS externo
- javascript para incluir interacciones y elementos dinámicos.
Para crear una página web se usa HTML y CSS apropiadamente. Con las etiquetas semánticas (headings, p, header, etc) damos significado al contenido de la página y con el CSS externo, damos estilo y estructura a ese contenido.
Esta separación es lo que permite que haya tantos sitios webs lindos que dan una gran experiencia al usuario. Y quienes hacen posible que estas webs funcionen son nada más ni nada menos que los navegadores. En general los navegadores web se apegan a los estándares y no presentan inconsistencias, sacando algunos pocos como internet explorer.Ahora... comparemos los navegadores web con todos los clientes de email que existen.
A diferencia de la web dónde solo un par de navegadores concentran el tráfico, los emails se leen en un abanico de aplicaciones y clientes enorme. El problema con esto es que cada cliente tiene su propio soporte para HTML y CSS y las diferencias entre el soporte en cada uno de ellos pueden ser enormes. Los clientes de email utilizan distintos motores de render para procesar los emails, y tanto los navegadores, aplicaciones y mobile renderizan diferente.
La gente de Campaign Monitor tiene una tabla dónde podemos ver las compatibilidades de los estilos y atributos en cada cliente. Vemos que es bastante despareja el soporte entre cada cliente y sobre todo, el que menos soporte tiene es Microsoft Outlook en todas sus versiones (acá te cuento más sobre Microsoft Outlook).
Entonces, qué hacemos? Bueno, básicamente retroceder un par de décadas y maquetar en tablas.
Las tablas son lo único que podemos decir que es universalmente soportado por todos los clientes, lo que nos permite determinar una estructura en nuestros emails.
Muchos diseñadores web probablemente aprendieron divs y nunca tocaron las tablas (a mi me pasó!) pero no se asusten! Siguiendo estas premisas, van a empezar bien:
Si usas... | Reemplazá con |
<div> | <table>, <tr>, <td> |
<p> | <td> |
<h1>, <h2>, <h3>... | <td> |
<link type="text/css"> | <td style=""> |
margin | <td style="padding:;"> |
float | <td> y align |
En estas notas del blog podés ver ejemplos de como funcionan estos reemplazos:
De todas formas, que estas limitaciones no te tiren para atrás porque se pueden hacer cosas increíbles, sino me crees podés ver estos ejemplos:
- #emailweekly de ActionRocket (achicar la pantalla para ver la versión responsive)
- "Reader Mode" de Justin Khoo (ganador de contest de Litmus)
- "Gooey Navigation" de Remi Parmentier
Como siempre les digo, no se olviden nunca de testear sus emails antes de enviar y #HaceloResponsiveChe!
¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.
También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen
No hay comentarios:
Publicar un comentario