A diferencia de lo ocurrido con los más populares navegadores, que en los últimos años han avanzado hacia una mayor compatibilidad con los estándares de codificación HTML/CSS permitiendo a los diseñadores web crear páginas bellas, accesibles y fácilmente actualizables, las cosas son muy diferentes con los cientos de aplicaciones, servicios de webmail y dispositivos móviles que se utilizan para visualizar el correo electrónico.
Cinco consideraciones sobre el correo electrónico en HTML
El soporte de CSS en muchos de los sistemas de e-mail es muy pobre. Por ejemplo el Outlook 2007 (que utiliza el motor de Word y no HTML para mostrar los e-mails) no reconoce los atributos CSS de posición.
Los servicios de webmail más populares (Hotmail, Yahoo, Gmail) eliminarán el contenido completo del (head) y los atributos incluidos en el tag (body) de nuestro código. Todo lo que incluyamos dentro de esas etiquetas desaparecerá (por ejemplo las hojas de estilo, y el color de fondo).
Los servicios de webmail muestran parte de los emails con sus propias hojas de estilo e ignoran buena parte del formato que se le haya dado con CSS.
Si las imágenes fueran embebidas en el e-mail, tal como hacen algunos programas de correo, muchos usuarios las recibirían como datos adjuntos. Conclusión: las imágenes deben estar disponibles para ser descargadas desde un servidor. Sin embargo desde hace unos años, la mayoría de los clientes de email y servicios de webmail bloquean la descarga de imágenes desde un servidor externo y se requiere que el usuario autorice esa descarga.
El ancho en px del área en la que se muestran los e-mails es muy variable, más allá de la resolución de pantalla. Los paneles de vista previa, el acceso mediante dispositivos móviles y el tamaño del área de visualización de los webmail lo hacen cambiante e imprevisible.
Para crear un buen Newsletter en HTML y lograr la mayor compatibilidad posible la solución es retroceder en el tiempo y volver a recomendar algunas técnicas ya casi en desuso y seguramente vistas como no muy “cool” por las nuevas camadas de diseñadores web.
Doce recomendaciones para diseñar y codificar un newsletter HTML
Mantener el diseño lo más simple posible
Utilizar tablas (sí, tablas) y no divs para posicionar los elementos de nuestro newsletter. Preferentemente usar tablas diferentes para cada parte del contenido y evitar en lo posible, las tablas anidadas y la combinación de columnas (colspan)
Si queremos incluir un color para el fondo de nuestro newsletter deberemos crear una tabla de 100 % de ancho con ese color de fondo.
No usemos hojas de estilo externas. Podemos utilizar CSS aplicando los estilos “in-line”, es decir repitiendo cada estilo dentro de cada etiqueta HTML mediante la propiedad style. Puede resultar tedioso, pero es la única forma totalmente segura de aplicar formato mediante CSS a un newsletter. Usando con inteligencia las funciones de buscar y reemplazar de cualquier editor podremos cambiar estilos sin tanto trabajo. Un ejemplo aplicado a un párrafo (el código y el resultado):
(p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color:#F8F8E4; padding:4px;") Este texto debería verse dentro de un bloque con un fondo claro(/p)
Este texto debería verse dentro de un bloque con un fondo claro
Si no tenemos tiempo o ganas de hacer esta tarea, podemos probar incluyendo las hojas de estilo dentro de los tags (body) y (/body). Esto funcionaba bastante bien hasta hace poco, pero no está aún testeado en las nuevas versiones de Yahoo y Hotmail. Otra opción es rescatar a nuestra vieja y ya obsoleta etiqueta (font), para dar un formato sencillo al texto.
Utilizar un ancho fijo de menos de 600 px, para asegurarnos de que la mayoría de los dispositivos puedan mostrar decentemente nuestro diseño.
Subir las imágenes a un servicio de hosting (o hostearlas en el propio servicio web de envío) e incluir como ruta de todas las imágenes, la url absoluta de cada archivo de imagen. Por ejemplo: si tenemos una carpeta llamada "newsletter" en nuestro sitio, y usamos un editor como Dreamweaver, probablemente nos quede algo así en el código:
(img src="logo.jpg")Para que los usuarios que reciben el email puedan ver esa imagen deberemos reemplazar ese código por:
(img src=http://www.ejemplo.com/newsletter/logo.jpg)
Cinco consideraciones sobre el correo electrónico en HTML
El soporte de CSS en muchos de los sistemas de e-mail es muy pobre. Por ejemplo el Outlook 2007 (que utiliza el motor de Word y no HTML para mostrar los e-mails) no reconoce los atributos CSS de posición.
Los servicios de webmail más populares (Hotmail, Yahoo, Gmail) eliminarán el contenido completo del (head) y los atributos incluidos en el tag (body) de nuestro código. Todo lo que incluyamos dentro de esas etiquetas desaparecerá (por ejemplo las hojas de estilo, y el color de fondo).
Los servicios de webmail muestran parte de los emails con sus propias hojas de estilo e ignoran buena parte del formato que se le haya dado con CSS.
Si las imágenes fueran embebidas en el e-mail, tal como hacen algunos programas de correo, muchos usuarios las recibirían como datos adjuntos. Conclusión: las imágenes deben estar disponibles para ser descargadas desde un servidor. Sin embargo desde hace unos años, la mayoría de los clientes de email y servicios de webmail bloquean la descarga de imágenes desde un servidor externo y se requiere que el usuario autorice esa descarga.
El ancho en px del área en la que se muestran los e-mails es muy variable, más allá de la resolución de pantalla. Los paneles de vista previa, el acceso mediante dispositivos móviles y el tamaño del área de visualización de los webmail lo hacen cambiante e imprevisible.
Para crear un buen Newsletter en HTML y lograr la mayor compatibilidad posible la solución es retroceder en el tiempo y volver a recomendar algunas técnicas ya casi en desuso y seguramente vistas como no muy “cool” por las nuevas camadas de diseñadores web.
Doce recomendaciones para diseñar y codificar un newsletter HTML
Mantener el diseño lo más simple posible
Utilizar tablas (sí, tablas) y no divs para posicionar los elementos de nuestro newsletter. Preferentemente usar tablas diferentes para cada parte del contenido y evitar en lo posible, las tablas anidadas y la combinación de columnas (colspan)
Si queremos incluir un color para el fondo de nuestro newsletter deberemos crear una tabla de 100 % de ancho con ese color de fondo.
No usemos hojas de estilo externas. Podemos utilizar CSS aplicando los estilos “in-line”, es decir repitiendo cada estilo dentro de cada etiqueta HTML mediante la propiedad style. Puede resultar tedioso, pero es la única forma totalmente segura de aplicar formato mediante CSS a un newsletter. Usando con inteligencia las funciones de buscar y reemplazar de cualquier editor podremos cambiar estilos sin tanto trabajo. Un ejemplo aplicado a un párrafo (el código y el resultado):
(p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color:#F8F8E4; padding:4px;") Este texto debería verse dentro de un bloque con un fondo claro(/p)
Este texto debería verse dentro de un bloque con un fondo claro
Si no tenemos tiempo o ganas de hacer esta tarea, podemos probar incluyendo las hojas de estilo dentro de los tags (body) y (/body). Esto funcionaba bastante bien hasta hace poco, pero no está aún testeado en las nuevas versiones de Yahoo y Hotmail. Otra opción es rescatar a nuestra vieja y ya obsoleta etiqueta (font), para dar un formato sencillo al texto.
Utilizar un ancho fijo de menos de 600 px, para asegurarnos de que la mayoría de los dispositivos puedan mostrar decentemente nuestro diseño.
Subir las imágenes a un servicio de hosting (o hostearlas en el propio servicio web de envío) e incluir como ruta de todas las imágenes, la url absoluta de cada archivo de imagen. Por ejemplo: si tenemos una carpeta llamada "newsletter" en nuestro sitio, y usamos un editor como Dreamweaver, probablemente nos quede algo así en el código:
(img src="logo.jpg")Para que los usuarios que reciben el email puedan ver esa imagen deberemos reemplazar ese código por:
(img src=http://www.ejemplo.com/newsletter/logo.jpg)
Los vínculos deben también contener la ruta absoluta al archivo vinculado:
(a href=http://www.ejemplo.com/pagina-de-ejemplo.htm)
(a href=http://www.ejemplo.com/pagina-de-ejemplo.htm)
Diseñar el newsletter teniendo en cuenta que muchos suscriptores le darán una leída “por arriba” para ver si les interesa antes de decidirse a activar la descarga de las imágenes. Es importante que se vea medianamente bien y que pueda saberse de que se trata aún en esas condiciones. Una sugerencia: indicar siempre el alto y ancho de cada imagen para que el placeholder tenga el mismo tamaño que la imagen original y no se desarme el diseño.
Si queremos que más gente lea y haga click en los links de nuestro Newsletter, nunca usemos imágenes para esos links ni para los títulos o contenidos relevantes.
Podemos usar el Dreamweaver u otra herramienta WYSIWYG pero, en última instancia, siempre tendremos que codificar “a mano” parte de nuestro newsletter. Si no estamos dispuestos a ensuciarnos las manos con el código, es mejor que le pasemos la tarea a alguien que pueda hacerlo.
Hagamos decenas de pruebas antes de enviar un newsletter. Recomendamos tener al menos un equipo con los principales programas de correo instalados y tener varias cuentas POP3 y de webmail que usemos para testear los resultados en cada sistema.
Si queremos que más gente lea y haga click en los links de nuestro Newsletter, nunca usemos imágenes para esos links ni para los títulos o contenidos relevantes.
Podemos usar el Dreamweaver u otra herramienta WYSIWYG pero, en última instancia, siempre tendremos que codificar “a mano” parte de nuestro newsletter. Si no estamos dispuestos a ensuciarnos las manos con el código, es mejor que le pasemos la tarea a alguien que pueda hacerlo.
Hagamos decenas de pruebas antes de enviar un newsletter. Recomendamos tener al menos un equipo con los principales programas de correo instalados y tener varias cuentas POP3 y de webmail que usemos para testear los resultados en cada sistema.
Autor:
Eduardo LoveraFundador de SimultaNews.com
Eduardo LoveraFundador de SimultaNews.com
