E-mails con HTML y CSS
Conocéis alguna instrucción sencilla para confeccionar emails y que se puedan ver en gran parte de los lectores de correo?
He probado a hacer un envío del boletín de Off Limits y no se ve bien en ningún lector. Tiene el CSS incluido en la página y las imágenes no se mandan (están en el servidor).
Un ejemplo:
http://www.offlimits.es/2008/10/03/programacion_octubre_head.html
Según parece la mayoría de la gente aún utiliza tablas para este tipo de trabajo, pero me da pena volver a diseñar con un sistema ya obsoleto.
Aquí hay una referencia de las cosas que se pueden utilizar según el lector de correo, pero no parecen ser ciertas:
http://www.campaignmonitor.com/css/
Muchas de las cosas siguen sin funcionar aunque se especifica lo contrario.
Y aquí un pryecto cuyo objetivo es la estandarización del e-mail:
http://www.email-standards.org/
¿Alguna idea? ¿Cómo resolvéis un trabajo así? ¿Qué filosofía, técnicas y tecnologías utilizáis?
gaspi
lo de las tablas creo que es insalvable...
te paso info que te puede servir...
http://www.sitepoint.com/article/code-html-email-newsletters/
piglesias Plus
Mis recomendaciones:
- Maquetar con tablas
- No anides más de 2 o 3 niveles de tablas, Lotus Notes se hace un lío.
- Ancho máximo: 500 o 600 px
- No metas el contenido del email en un mega-jpg con texto y todo.
- La css, mejor el línea. Orange me va a matar, pero aunque me duela casi que te recomiendo usar la etiqueta font para el texto.
- Olvídate de las imágenes de fondo, Outlook 2007 las ignora. Aún así, si las quieres usar, mejor mételas con el atributo "background" como fondo de una tabla o de una celda.
- Si vas a meter css en bloque, dentro del body y comentada.
- No te compliques, usa el principio KISS (Keep It Simple Stupid)
Y recuerda que aún así no se va a ver siempre exactamente igual en todos los clientes de correo y/o webmail, así que haz un diseño que no necesite ir ajustado al milímetro.
kemie
yo he hecho emails basados en los tempaltes de campaignmonitor, y se ven bien (tal vez no perfectos) en todos los programas/servicios que he probado
http://www.campaignmonitor.com/templates/
callaghan
Por mi experiencia (llevo un año diseñando y gestionando un servicio de newsletters on-line) Ya puedes recuperar las tablas y poner los estilos en cada uno de los objetos. Nada de estilos en el HEAD. Hotmail, Gmail, etc ignoran todo lo que pongas allí.
Las imágenes mejor con rutas absolutas (http://tustio.com/imagenes/foto01.jpg). Esto ya lo haces bien.
Con estas bases a mi me funciona perfecto. Outlook, Hotmail, Gmail, (distintos navegadores, etc)....
piglesias Plus
callaghan
Esto creo que es porque le arrrancan al html el head y la etiqueta body, de ahí que se ponga la css dentro del body comentada. Eso sí, yo prácticamente sólo lo uso para los enlaces y poco más, es decir, estilos que no son imprescindibles para que se pueda leer el email.
Aitor
Muchas gracias a todos. Es un placer tener a la comunidad de doméstika. Tengo que estudiarme las cosas que habéis mandado (por ejemplo, el artículo que referencia Gaspi es bastante largo) aunque las instrucciones rápidas que también habéis dado seguro que serán muy útiles. Gracias a todos.
psycho
kemie
Qué buen enlace, porqué no lo pones en recursos? :)
kemie
hecho!
elQueFaltaba
Más que los templates, que es dificil de convencer a los diseñadores para que hagan ese tipo de newsletters, yo igual creo que debería conocerse la Guía de CSS para Emailings, de la misma web http://www.campaignmonitor.com/css/ para ver qué lectores de correo y plataformas van a visualizar lo que tu estás implementando ..
Aitor
Hecho!