Foros Programación Cliente

E-mails con HTML y CSS

10 10 Respuestas Jueves 9 de octubre, 2008
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?
Registrado desde 03/07/03
Número de posts: 71
  • Avatar de gaspi gaspi Registrado desde 09/07/04 / Número de posts: 200
    lo de las tablas creo que es insalvable...

    te paso info que te puede servir...

    http://www.sitepoint.com/article/code-html-email-newsletters/
    _______________________
    ¿kién vigila a los vigilantes?

    proyecto personal nokeo.net
    asociación cultural migacultura.es
    netlabel miga-label.org
    webzine animatek.net
    work item-media.com
    Publicado hace 4 años
  • Avatar de Public Public Registrado desde 15/06/03 / Número de posts: 855
    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.
    ------------------------------------------------------------------------------------
    > Pablo Iglesias,
    > www.TheEmailingExperience.com
    > @piglesias en twitter
    Publicado hace 4 años
  • Avatar de kemie kemie Registrado desde 06/04/04 / Número de posts: 695
    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/
    monolinea | pixilate
    Publicado hace 4 años
  • Avatar de callaghan callaghan Registrado desde 18/06/07 / Número de posts: 16
    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)....
    UX designer @ Softonic
    Publicado hace 4 años
  • Avatar de Public Public Registrado desde 15/06/03 / Número de posts: 855

    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í.


    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.
    ------------------------------------------------------------------------------------
    > Pablo Iglesias,
    > www.TheEmailingExperience.com
    > @piglesias en twitter
    Publicado hace 4 años
  • Avatar de Aitor Aitor Registrado desde 03/07/03 / Número de posts: 71
    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.
    Publicado hace 4 años
  • Avatar de psycho psycho Registrado desde 20/05/04 / Número de posts: 298

    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/


    Qué buen enlace, porqué no lo pones en recursos? :)
    //////////////////////
    ///////////// blog
    /////////// twitter
    /////////// GitHub
    Publicado hace 4 años
  • Avatar de kemie kemie Registrado desde 06/04/04 / Número de posts: 695
    hecho!
    monolinea | pixilate
    Publicado hace 4 años
  • Avatar de elQueFaltaba elQueFaltaba Registrado desde 13/04/07 / Número de posts: 13
    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 ..
    -- Volvemos tras la publicidad --
    Publicado hace 4 años
  • Avatar de Aitor Aitor Registrado desde 03/07/03 / Número de posts: 71
    Hecho!
    Publicado hace 4 años