jueves, 9 de abril de 2015

Por qué web design y email design son tan diferentes?

Se podría asumir que dado que email y web se basan en los mismos lenguajes (HTML y CSS) se pueden construir de la misma forma... pero no. En email estamos atados a las limitaciones de cada cliente de correo y su forma de interpretar el código en particular, lo que hace que el email design tenga sus propios códigos de diseño y desarrollo. Esto puede ser confuso y frustrante si recién empezás en el mundo del email pero ¡no te preocupes!, en la nota de hoy diferenciamos web y email para que puedas sacarle el máximo provecho a tus campañas.

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:

Como siempre les digo, no se olviden nunca de testear sus emails antes de enviar y #HaceloResponsiveChe!


Te gusto esta nota? Compartila!

¡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