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 atributoswidth,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
headañ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
bgcolorde una etiquetatdy nunca elbackground-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.
27 Mayo 2009 - 13:16
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
27 Mayo 2009 - 13:31
Sobre esos temas tengo muy mala experiencia… y tu controlas mucho más
javiaurea
27 Mayo 2009 - 13:36
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
lloku
27 Mayo 2009 - 13:37
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,
.
Javi
27 Mayo 2009 - 14:02
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
lloku
5 Junio 2009 - 13:30
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…
Rodrigo
5 Junio 2009 - 13:57
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.
javiaurea
5 Junio 2009 - 14:14
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.
Rodrigo
5 Junio 2009 - 14:36
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.
javiaurea
8 Junio 2009 - 10:11
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.
lloku
18 Junio 2009 - 20:17
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!
Marcos
18 Junio 2009 - 23:36
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.
javiaurea
19 Junio 2009 - 1:56
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
Marcos
20 Junio 2009 - 12:02
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
javiaurea
19 Junio 2009 - 10:24
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.
lloku
19 Junio 2009 - 13:49
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
Marcos
19 Junio 2009 - 14:00
Ojala saliesen más posts así de enriquecedores.
Gracias chicos!
javiaurea
2 Agosto 2010 - 22:00
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á.
alberto