CSS y HTML en newsletters
Consejos para añadir HTML y css en los emails
Enviar un email con HTML puede parecer simple, pero es una tarea que requiere cierto trabajo, puesto que el soporte de CSS y en HTML en los clientes de email es bastante inferior de lo que lo es para los navegadores.
En este artículo veremos qué hay que tener en cuenta para diseñar una newsletter y que sea visible en la mayoría de clientes de correo electrónico (Gmail, Hotmail, Outlook, etc).
El principal problema radica en que estas aplicaciones carecen de un buen soporte para CSS, haciendo que toda la flexibilidad y modernidad alcanzada con el diseño de páginas web en los navegadores de hoy en día se vaya literalmente al traste.
Consejos
Utilizar estilos inline. Los clientes de email tratan de limitar la carga de archivos externos, y por ende, no permiten los archivos de estilos css. Es por eso que todos los estilos deberán escribirse dentro del mismo código HTML.
Utilizar tablas. Utilizar contenedores DIV en HTML para newsletters es una mala idea. Hay que utilizar tablas para asegurarnos de que todos los programas lo renderizan correctamente. En la maquetación web de hoy en día el uso de tablas ha quedado desfasada debido a la gran cantidad de código HTML que se genera, pero, sin embargo, se recupera para la maquetación de emails. No olvides tampoco definir para las celdas y tablas un cellspacing y cellpadding
Probar multiples clientes. Que se vea la newsletter bien en un cliente no implica que en los demás lo haga, por lo que se recomienda probarlo con más de uno. También se recomienda añadir un enlace en la misma newsletter para permitir al usuario verla en el navegador en caso de que tenga problemas para renderizarla.
Escribir los atributos de altura y anchura (width & height) como tags HTML en vez de en los estilos.
Escribir texto alternativo para imágenes. En ocasiones algunos clientes, como Gmail, no muestran las imágenes por defecto hasta que no pulsas un link para permitirlo. Esta bien en esos casos que el usuario pueda ver un texto alternativo usando el tag alt de HTML para que sepa que hay una imagen.
Utiliza rutas absolutas para que los contenidos descargables como imágenes se vean. Es común olvidarse de ponerlos y como en nuestro entorno los vemos, luego al enviar la newsletter aparece sin imágenes.
Cosas a evitar
No utilizes archivos css externos, o css entro de los tags style en los encabezamientos head HTML. La gran mayoría de clientes omitiran el contenido y mostrarán sólo el cuerpo (body).
No utilizar javascript. Javascript podría contener código malicioso, por lo que los clientes lo ignoran. Incluso pueden marcarlo como SPAM.