Por qué es tan distinta la maquetación de emails y websites

Por lo general cuando un diseñador web te pide que le enseñes el código de tus emails se suele quedar como… ¿¿Qué es eso??

Muchos te dicen aquello de “¿Por qué maquetas como si fuese 1999? ”  De hecho, la mayoría de profesionales que llegamos a la maquetación de emails lo hacemos desde el diseño web y nos toca “desaprender” muchas cosas al darnos de bruces con una realidad bastante complicada.  Las principales diferencias entre la construcción de webs y la de emails son estas:

– Tablas

Los divs no son seguros y la regla “float” no funciona en email, por lo que en su lugar utilizaremos tablas y jugaremos con su alineación para crear nuestros layouts. Tampoco es recomendable usar <p>, sino colocar el contenido directamente dentro de los <td>

Estilo CSS en línea

Aunque con el responsive design esto está cambiando sigue siendo necesario declarar el estilo en línea, dado que sigue habiendo clientes de email que no interpretan el contenido de la etiqueta style, ni hojas de estilo externas. Podemos declarar estilos dentro de la etiqueta style, siempre con !important para que sobrescriban lo declarado en línea, por ejemplo para aplicar estilos según la resolución del dispositivo(media queries) en aquellos clientes de email que nos lo permitan.

– No podemos usar Javascript ni PHP

Solo podemos utilizar HTML y CSS, ya que cualquier script JS o código PHP no funcionará en nuestro email.

– No podemos insertar vídeos

El soporte de vídeo es muy limitado (prácticamente solo funciona en dispositivos y clientes de Apple) y por ello recomendamos usar imágenes con enlaces a un reproductor, o GIFs para sustituir al vídeo y optimizar la experiencia en todos los clientes de email. Podemos utilizar el vídeo dentro del email siempre que tengamos un buen fallback para todos los servicios de email que no lo interpretarán.

La heterogeneidad con que los distintos clientes de email interpretan el código limita mucho la maquetación, pero tras algún tiempo de lidiar con los problemas habituales que se presentan llegamos a prácticas “email safe” que asimilamos y aplicamos a nuestros mensajes casi inconscientemente.

 

Share on FacebookTweet about this on TwitterShare on LinkedInGoogle+Email to someonePrint this page

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *