27May
Desarrollo frontend

Código para el diseño de e-mails y newsletters

Días atrás me toco diseñar unas plantillas para los e-mails y newsletters de un proyecto. Voy a compartir algunos consejos y sobre todo una conclusión:

Si eres un obsesionado de los estándares web, empieza por poner algo de música relajante, hacerte un lavado de cerebro y retroceder unos cuantos años.

La cuestión es que webmails y gestores locales no suelen seguir estándares, por lo que al final cada uno hace lo que le da gana. Lo que buscamos es que el diseño del e-mail sea compatible con: Gmail, Yahoo! Mail, Hotmail, AOL, Thunderbird, Outlook, Outlook Express, Windows Live Mail, Apple Mail.
Para lograr cierta compatibilidad entre esta amalgama podemos seguir algunos consejos.

Por cierto, Gmail y Hotmail han dado peores resultados en test Acid, en cambio Thunderbird y Yahoo! Mail han dado mejor nota.

Meta-información

  • Sin Doctype DTD
  • Pero si poner un meta meta http-equiv="Content-Type" content="text/html; charset=utf-8"
  • Añadir un tittle
  • Podemos usar target="_blank" en los enlaces. De esta forma no se abrirá en la misma ventana si usamos un webmail.

Layout

  • Es recomendable usar una anchura fija de 600px.
  • Layout con tablas. Si si, es totalmente necesario!.
  • Mejor si especificamos <table width="100%" ....
  • No se pueden anidar tablas. La estructura debe realizarse completamente con filas y columnas.
  • En las tablas podemos usar parámetros como colspan="2", border="0", align="left".
  • Internet Explorer tiene problemas con los TD vacios <td></td> para solucionarlo podemos incrustar una imgen de un pix transparente: <td><img src="blank.png" alt="" width="10" height="1" /></td>.

Contenido

  • Lógicamente siempre debemos usar rutas absolutas.
  • Evitar el uso de videos, flash (object), en lugar de ello usemos imágenes y enlaces al recurso a href="recurso".
  • JavaScript no permitido.
  • Las imágenes deben siempre ir acompañadas del atributo alt="texto alternativo". Sin embargo no deben llevar los atributos width, height.
  • No hace falta que usemos etiquetas como font
  • Los caracteres especiales deben presentarse con entidades HTML.
  • Alternativamente podemos incluir un enlace a una versión web.

Estilo

  • En el head añadir el CSS necesario.
  • Independientemente de este CSS añadirlo inline a cada tag que lo requiera (aunque sea redundante).
  • Olvidemonos de usar formas abreviadas en el CSS.
  • Si no queremos bordes en las imágenes con enlace podemos añadir border="0" (además de tenerlo en cuenta por CSS).
  • Si necesitamos poner imágenes de fondo debemos usar el atributo bgcolor de una etiqueta td y nunca el background-image
  • Aunque sea redundante es necesario especificar en cada etiqueta (párrafo, enlace, etc) el estilo en linea si se desea personalizar.

Y un consejo último: Menos es más. En el caso de los e-mails cobra una especial importancia este principio. Por tanto en cuestión de diseño y contenidos quedémonos con lo imprescindible.

Compartir:

25 Comments

  • lloku

    El maldito mailing XD. Si señor un orror el maquetar e-mails, es algo extraño que los gestores no hayan avanzado en estos ambitos, y que los que han avanzado sean a veces menos usados por eso mismo (En mi empresa está betado el uso de thunderbird por que para el envío genera código decente y no es compatible por ejemplo con outlook), así que cuando diseñas mailings debes hacerlo pensando en lo mas básico y rudimentario.
    A ver si un día te animas y haces otro posts sobre las aventuras y desventuras para salvar los antispam, configuraciones del servidor de correo, registro SPF, enbeber imágenes, palabras prohibidas en el Asunto, las «guerras con hotmail»… 😉

  • lloku

    Si si…. jajaja, he controlado que para algunos proveedores ese tema es incontrolable, y que lo mejor para controlarlo es el dinero, aunque siendo un poco pesado también se consiguen cosas XD

    • Javi

      Y el problema se complica ya que, de querer hacerlo hiperbien, deberías probar que tu e-mail se va bien en GMail bajo FF, GMail bajo Chrome, GMail bajo IE6, … Hotmail bajo FF, Hotmail bajo IE6 y la historia nunca acabaría, :-).

      • lloku

        Hombre la verdad que con la forma de maquetar que Javi comenta, no debería haber muchos problemas, es todo tan arcaico que prácticamente todos los navegadores y gestores lo muestran «mas o menos bien», lo mas importante que hay, como bien comenta al final, es que el diseño debe ser muy simple

        • Rodrigo

          No estoy de acuerdo en cuanto a que haya que maquetar con tablas. ¿Por qué? Lo que yo sí he detectado es que algunos lectores de correo no interpretan los estilos a no ser que vayan dentro del propio html, por lo demás…

          • javiaurea

            Hola Rodrigo, nadie desea maquetar con tablas 🙁 pero no queda otra si el diseño del e-mail lo requiere.

            Es la única forma puesto que los gestores de correo mencionados en el post no soportan propiedades tan simples como un background-image, float, etc. Y además el soporte es diferente en algunos casos.

            Gracias por seguir el blog y un saludo.

          • Rodrigo

            Pues yo me reitero.

            Hace unos meses un cliente nos pidió hacer un «mailing». Como vosotros, soy un amante de los estándares (y además, más papista que el Papa jeje), así que no descansamos hasta hacerlo BIEN.

            La experiencia nos enseñó:
            – Que algunos lectores no cargan las imágenes al inicio, sobre todo las imágenes en el css, como tú comentas; hay que pusar un botón «cargar imágenes» para que éstas se muestren.
            – Que algunos lectores no interpretan los estilos a no ser que vengan en una etiqueta «stlyle» dentro del documento. Más que no cargar los estilos, no cargan ningún fichero externo que no sean imágenes (de scripts en js ya ni hablamos).

            Por lo demás: todo bien, «floats» incluidos.

          • javiaurea

            El background-image no es soportado por outlook versión 2007, notes 6, live mail.
            El float no es soportado por outlook versión 2007 y old gmail.
            Es la vieja lucha compatibilidad vs avance. Quizás dentro de un año ni me plante el diseño con tablas, pero a día de hoy prefiero seguir apostando por una mejor compatibilidad.

          • lloku

            Muchas veces no es solo el que interprete algo, sino como lo interpreta, ya no es cuestión ni tan siquiera de probar, hay decenas de miles de artículos referidos a la recomendación de maquetación en e-mails y todos ellos hablan de lo mismo, Tablas.
            Lo cierto es que el e-mail no se creo para lo que lo estamos usando, se creo para enviar y recibir texto, nada mas, otra cosa es el giro que ha dado y la interpretación de html por parte de los gestores, pero no podemos pensar en xhtml cuando hablamos de mails, los standars no son extraporables, simplemente por que si hubiera un standard para los e-mails sería tan simple como: «Solo texto plano».
            En cuanto a las imágenes Rodrigo… es una medida antispam lógica, de todas maneras lo único recomendable respecto a esto es embeber las imágenes, el que de primeras no carguen las imágenes no tiene solución, pero los usuarios ya están acostumbrados.

  • Marcos

    Por si sirve de complemento y a este infierno algún cliente os pide que las imágenes se vean en el outlook sin que tengan que dar a «permitir imágenes» (y esto es extensible a hotmail), os dejo este enlace tras arduas tareas de investigación:

    http://www.q-interactiva.com/blog/2009/03/evitar-el-bloqueo-de-imagenes-en-outlook/

    En cuanto a las observaciones de javi totalmente de acuerdo. Si el que el texto no sea seleccionaable es algo que puede ser viable, una manera muy buena de hacer algo rápido es montar el diseño en fireworks y exportar como imágenes y tablas una vez «troceado a nuestro gusto». Suele encajar como norma general muy bien en el HTML resultante que se plantea en el post, y siempre podemos eliminar algunas partes de dicho HTML y ahi colocar ya dentro nuestro contenido. A nostoros nos ahorra mucho trabajo.

    Saludos!

    • javiaurea

      Ese Marcos 😉

      La opción de Fireworks la conocia hace años pero mira nunca se ma había ocurrido usarla para esto. Muy inteligente!

      Lo del tema de las imágenes, sin palabras :O

      Gracias por la aportación Marcos.

  • Marcos

    Personalmente mi proceso es. Maqueta en Fireworks como bien dices pensando que es un mailing, que tengo que tratar de simplificar aunque sin dejar de lado la estética, pero si siguiendo determinados patrones al saber que por debajo va a ir una tabla. En ese diseño corto las zonas pensando ya en dicha tabla, dejando una zona normalmente más amplia donde insertaré contenidos textuales.

    Exporto HTML con tablas. Voy a dreamweaver y abro el html, selecciono la imagen que representa la celda donde quiero meter mis contenidos y la borro. Como Fireworks las tablas las hace con imagenes transparentes (creo que te deja elegir, en este caso conviene decir que si), te va a repsetar ese espacio.

    Adapto a partir de ahi.

    Lo que no había visto ni imaginado es si hay algun beneficio en poner los estilos tanto en el head como en linea. Yo siempre los ponía en linea solamente. Has detectado casos donde el tenerlo en los dos lados ayuda? Lo digo porque veo que te has mamao pruebas en diferentes gestores a saco 😉

    Gracias a ti por este blog, está lleno de buena información 🙂

    • javiaurea

      Marcos, como prioridad los estilos inline.
      Pero existen casos como a:hover que es necesario ponerlos en head.

      Despues de navegar y leer mucho he llegado a la conclusión de que inline es prioridad, pero si repites estilos en head tienes otro respaldo.

      Siento no haber respondido antes, se me había pasado 🙂

  • lloku

    No conocía el bloqueo de imágenes de outlook, pero lo de lograr saltarse el bloqueo de hotmail… creo que estas equivocado Marcos. Lo que se hace con lo que comentáis en ese posts es simplemente embeber las imágenes, es la técnica correcta de cualquiera de las maneras, yo siempre la he usado y muchas veces con la clase phpmailer, aún así, por experiencia propia… hotmail puede seguir bloqueandolas (casi siempre o siempre), otra cosa es lo que haga outlook (Que desconocía que bloquease imágenes, supongo que las que bloqueará será las externas – mas les vale -).
    Saludos.

  • Marcos

    Hola lloku, en las pruebas que yo he realizado, leyendo dichos correos con mi cuenta de hotmail, me mostraba directamente las imágenes, cosa que no ocurría si no empleaba esta técnica pero como te digo con ella hotmail no me las bloqueaba. Las pruebas las realicé hace aproximadamente 2-3 meses, no se si habrá cambiado.

    Saludos 🙂

  • Fireworks CS4, exportando con CSS | 2flash2furious :: diseño gráfico, web & multimedia :: por [Q] interactiva

    […] Layout cortado con la herramienta slice como una tabla con imágenes. Tal y como comento en éste interesantísimo post de Javi de aurea, esto es una herramienta muy útil para tirar del viejo HTML compatible con casi todo lo […]

  • alberto

    Es completamente imposible lo qu edice Rodrigo.
    Su newsletter sólo se vería bien en algún caso de algún gestor de correo, nuestra experiencia, y son unos cuantos cientos de mailings ya, corrobora lo que dice Javier.
    Hacer una newsletter bien, es hacer que se vea al menos decente en Outlook, gmail, hotmail, thunderbird, y mail de mac, y para eso el código es una caca no-estandar 100% fea y llena de tablas, nada de div y floats.
    Ojalá.

  • dudasc

    !Reavivo el tema!

    Hola buenas, comentas que hay que escribir el css dentro de la tiqueta ..

    ¿Esto es correcto? ya que he leido en varios lugares cosas como: No usemos hojas de estilo externas ni embebidas en el head.

    Ya que muchos gestores de correos cortan del body hacia arriba ( supongo que es por ello por lo que indicas que se reescriba el css de manera inline ).

    Un saludo y gracias por las aportaciones.

  • Angel

    Muy interesante el tema. A mi me tocó hace poco descubrir la pesadilla de las newsletter.

    Hay una cosa que no comentáis y es como lo hacéis para crear el mensaje de correo y enviar el diseño.

    Yo hago el diseño en Fireworks que con slices y la exportación hace buena parte del trabajo. Curiosamente nunca he exportado así porque el código que generaba era un engendro. Pero resulta que en este caso es una ventaja.

    Luego termino en Dreamweaver añadiendo el texto y ajustando el HTML, estilos, etc.

    Para enviar el mensaje se me ocurrió abrir el diseño en Chrome. Selecciono todo y copio. Creo un mensaje nuevo en Outlook y pego todo dentro. Sorprendentemente parece que funciona y envío el mensaje.

    ¿Sabéis si hay alguna forma mejor para crear el mensaje?

    Saludos

    • Angel

      ¿Te refieres a programar alguna función en PHP para procesar el HTML y las imagenes? ¿No llevaría incluso más tiempo que crear la propia newsletter? La verdad es que no tengo conocimientos muy avanzados de PHP, aunque me defiendo, pero lo veo un poco complejo.

      No conocía MailChimp, parece interesante. Gracias por la sugerencia.

  • IsuskoGoldar

    Muy buenas, muy interesante artículo y comentarios. Muchas cosas ya sabía que se tienen que hacer y que no hacer, pero la verdad que siempre quedan dudas del tipo; «y porque!?». Jeje supongo que nos pasa a todos.
    Respecto a lo de los Spams no se mucho y sería muy interesante conocer mas.
    Yo solo puedo aportar un dato que me parece una pasada.
    Hace unos años teniendo instalado un servidor web y FTP doméstico con host de DYNDNS.ORG me pasó algo para alucinar. Como soy muy curioso y quería promocionar dicho host, encontré mediante el buscador de Google un enlace muuuuuyyy raro donde figuraba mi host entre muchos.
    Cuando entré es cuando aluciné, el documento presentaba una de las numerosas LISTAS NEGRAS DE DOMINIOS(existe y asusta) donde me habían metido con mi host. Recomiendo leer esto por Internet ya que la conclusión a la que llegué yo fue que, el motivo de tal atropello se debió a mails maliciosos que me llegaron dicha temporada y que se dedicaron a reenviar spams a mis contactos.
    Recomiendo informarse sobre LISTAS NEGRAS DE DOMINIOS EN INTERNET

Comments are closed for this post