Bienvenid@s a mi blog personal y muy profesional sobre:Controlas de CSS y HTML y haces cosas maravillosas para web? Te han pedido maquetar una Newsletter estupenda? Genial…
Pues olvídate de todo lo aprendido. Resetea todo lo que sabes de CSS3, de DIVs con bordes redondeados… Hemos regresado al viejo mundo olvidado de:
Las tablas y CSS en código: <table style=”código”>
Flipante! Pero cierto. Por qué? Los gestores de email son duramente atacados, suelen ser la entrada localizada de virus que infectan nuestros ordenadores, de spam, de correos de sigue la cadena o morirás… Así que han tomado la decisión de ser muy estrictos con lo que permiten visualizar/ejecutar y lo que no, todo es por nuestra propia seguridad (Que majos!)
Vamos a intentar explicar lo que podemos o no utilizar con el fin de obtener Newsletters que se muestren ‘igual’ en los distintos gestores de email.
Las Newsletter son uno de los medios más populares para las comunicaciones en internet, además esta comprobado que el diseño de estas es fundamental para conseguir suscriptores.
Desafortunadamente, el email no es la web. Un bonito diseño puede verse bien en un gestor de email, pero no en otro.
A principios de 2007, Gmail se convirtió en el servicio más restrictivo, ya que ignora todas las hojas de estilos externos e internos y solo permite los estilos en línea. Así que:
Si se ve bien en Gmail, es más que probable, que se vea bien en los otros gestores de correo.
Pero no todo son buenas noticias, incluso con los estilos en código, hay algunas restricciones.
Así que sentemos las bases para la creación de Newsletters exitosas que se ve bien incluso en el peor de los gestores de correo electrónico.
Cosas a Evitar maquetando nuestra Newsletter
- La referencia externa de CSS ( <link ref.=”style.css” type=”text/css”) o incrustada de hojas de estilo. Muchos servicios de correo electrónico cortan todo el código por de la etiqueta <body> con lo que desactiva las hojas de estilo externas.
Pero atento, revisa tu lista de emails de destinatarios. Si en ella no tienes ningún correo de Gmail puedes incluir la etiqueta <style> dentro/después de <body> y funcionará! Incluso en Hotmail (Testado y aprobado para Outlook 2003 también) - No usar javascript en nuestra newsletter. Nunca! No hay mejor manera de que marquen nuestra newsletter como spam, además de no funcionar.
- No utilizar CSS en código con la etiqueta <body> (tales como el ancho o color de fondo). La mayoría de servicios de correo electrónico ignoran la etiqueta. Trata de poner toda la newsletter dentro de un <table> o <div> y aplicar CSS a la misma.
Cosas que Si hacer al maquetar una newsletter
- Utilizar tablas para maquetar. El diseño no variará. Con las etiquetas <div> el posicionamiento puede variar según el gestor de correo, no es 100% seguro que se vea correctamente.
- Usar estilos CSS en código, sobretodo centra tus desarrollos en los <td>.
- Declarar ancho, cellpadding, cellspacing y para todas las tablas y celdas de la tabla. Así, tendremos un ancho fijo de la plantilla, es mejor que dejar anchos al azar. Como sugerencia, haz un diseño pequeño, ya que la mayoría de la gente va a ver la newsletter en un panel de vista previa.
- Prueba el envío. Obtén una lista de los distintos gestores de correo a los que va dirigido tu newletter y prueba el envío para detectar cualquier problema antes de que tu lista de suscriptores lo haga.
Imágenes en newsletter
- No utilizar imágenes de fondo. Gmail, entre otros, ignora cualquier declaración url () en un atributo de CCS. Eso si, puedes utilizar colores de fondo con el atributo de etiqueta bgcolor o color de fondo.
- No utilizar imágenes para contenido importante como las llamadas a la acción, los titulares y enlaces a su sitio web. Outlook, Gmail (entre otros) no descargan las imágenes hasta que lo permite el usuario. Si tu newsletter esta llena de gráficos, los destinatarios solo verán un montón de imágenes rotas, lo que conlleva a la desconfianza.
- Proporcionar texto alternativo para todas las imágenes. De esta forma el lector podrá ver algún contenido en lugar de las imágenes sin descargar. Esto funciona especialmente bien para los logotipos.
- Declarar ambos parámetros de altura y anchura para las imágenes, no dejes al azar la redimensión de las mismas.
- Usar hspace y vspace para agregar márgenes alrededor de la imagen.
Listado de las etiquetas y estilos CSS y su comportamiento en los distintos gestores de email
Actualizado en abril de 2010
| Style Element | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| <style> in <head> |  |
|
|
|
|
|
|
 |
|
|
|
| <style> in <body> | |
|
|
|
|
|
|
|
|
|
|
| Link Element | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| <link> in <head> | |
|
|
|
|
|
|
|
|
|
|
| <link> in <body> | |
|
|
|
|
|
|
|
|
|
|
| Selectors | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| e | |
|
|
|
|
|
|
|
|
|
|
| * | |
|
|
|
|
|
|
|
|
|
|
| e.className | |
|
|
|
|
|
|
|
|
|
|
| e#id | |
|
|
|
|
|
|
|
|
|
|
| e:link | |
|
|
|
|
|
|
|
|
|
|
| e:active, e:hover | |
|
|
|
|
|
|
|
|
|
|
| e:first-line | |
|
|
|
|
|
|
|
|
|
|
| e:first-letter | |
|
|
|
|
|
|
|
|
|
|
| e > f | |
|
|
|
|
|
|
|
|
|
|
| e:focus | |
|
|
|
|
|
|
|
|
|
|
| e+f | |
|
|
|
|
|
|
|
|
|
|
| e[foo] | |
|
|
|
|
|
|
|
|
|
|
| Text & Fonts | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| direction | |
|
|
|
|
|
|
|
|
|
|
| font | |
|
|
|
|
|
|
|
|
|
|
| font-family | |
|
|
|
|
|
|
|
|
|
|
| font-style | |
|
|
|
|
|
|
|
|
|
|
| font-variant | |
|
|
|
|
|
|
|
|
|
|
| font-size | |
|
|
|
|
|
|
|
|
|
|
| font-weight | |
|
|
|
|
|
|
|
|
|
|
| letter-spacing | |
|
|
|
|
|
|
|
|
|
|
| line-height | |
|
|
|
|
|
|
|
|
|
|
| text-align | |
|
|
|
|
|
|
|
|
|
|
| text-decoration | |
|
|
|
|
|
|
|
|
|
|
| text-indent | |
|
|
|
|
|
|
|
|
|
|
| text-overflow CSS3 |  |
|
|
|
|
|
|
|
|
|
|
| text-shadow CSS3 | |
|
|
|
|
|
|
|
|
|
|
| text-transform | |
|
|
|
|
|
|
|
|
|
|
| white-space | |
|
|
|
|
|
|
|
|
|
|
| word-spacing | |
|
|
|
|
|
|
|
|
|
|
| word-wrap CSS3 | |
|
|
|
|
|
|
|
|
|
|
| vertical-align | |
|
|
|
|
|
|
|
|
|
|
| Color & Background | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| color | |
|
|
|
|
|
|
|
|
|
|
| background | |
|
|
|
|
|
|
|
|
|
|
| -moz-background CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -webkit-background CSS3 | |
|
|
|
|
|
|
|
|
|
|
| background-color | |
|
|
|
|
|
|
|
|
|
|
| background-image | |
|
|
|
|
|
|
|
|
|
|
| background-position | |
|
|
|
|
|
|
|
|
|
|
| background-repeat | |
|
|
|
|
|
|
|
|
|
|
| -khtml-background-size CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -moz-background-size CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -o-background-size CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -webkit-background-size CSS3 | |
|
|
|
|
|
|
|
|
|
|
| HSL Colors CSS3 | |
|
|
|
|
|
|
|
|
|
|
| HSLA Colors CSS3 | |
|
|
|
|
|
|
|
|
|
|
| Opacity CSS3 | |
|
|
|
|
|
|
|
|
|
|
| RGBA Colors CSS3 | |
|
|
|
|
|
|
|
|
|
|
| Box Model | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| border | |
|
|
|
|
|
|
|
|
|
|
| -moz-border-color CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -moz-border-image CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -moz-border-radius CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -webkit-border-radius CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -moz-box-shadow CSS3 | |
|
|
|
|
|
|
|
|
|
|
| -moz-box-sizing CSS3 | |
|
|
|
|
|
|
|
|
|
|
| height | |
|
|
|
|
|
|
|
|
|
|
| margin | |
|
|
|
|
|
|
|
|
|
|
| padding | |
|
|
|
|
|
|
|
|
|
|
| width | |
|
|
|
|
|
|
|
|
|
|
| Positioning & Display | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| bottom | |
|
|
|
|
|
|
|
|
|
|
| clear | |
|
|
|
|
|
|
|
|
|
|
| clip | |
|
|
|
|
|
|
|
|
|
|
| cursor | |
|
|
|
|
|
|
|
|
|
|
| display | |
|
|
|
|
|
|
|
|
|
|
| float | |
|
|
|
|
|
|
|
|
|
|
| left | |
|
|
|
|
|
|
|
|
|
|
| opacity | |
|
|
|
|
|
|
|
|
|
|
| outline CSS3 | |
|
|
|
|
|
|
|
|
|
|
| overflow | |
|
|
|
|
|
|
|
|
|
|
| position | |
|
|
|
|
|
|
|
|
|
|
| resize CSS3 | |
|
|
|
|
|
|
|
|
|
|
| right | |
|
|
|
|
|
|
|
|
|
|
| top | |
|
|
|
|
|
|
|
|
|
|
| visibility | |
|
|
|
|
|
|
|
|
|
|
| z-index | |
|
|
|
|
|
|
|
|
|
|
| Lists | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| list-style-image | |
|
|
|
|
|
|
|
|
|
|
| list-style-position | |
|
|
|
|
|
|
|
|
|
|
| list-style-type | |
|
|
|
|
|
|
|
|
|
|
| Tables | Outlook
2000/03 |
Live
Hotmail |
Yahoo!
|
Yahoo!
Classic |
Outlook
2007/10 |
Apple
|
Apple
iPhone |
Google
Gmail |
Lotus
Notes 6/7 |
Lotus
Notes 8.5 |
AOL
Desk 10 |
| border-collapse | |
|
|
|
|
|
|
|
|
|
|
| border-spacing | |
|
|
|
|
|
|
|
|
|
|
| caption-side | |
|
|
|
|
|
|
|
|
|
|
| empty-cells | |
|
|
|
|
|
|
|
|
|
|
| table-layout | |
|
|
|
|
|
|
|
|
|
|
| Total Market Share | 28% | 16% | 14% | 9% | 8% | 7% | 6% | 1% | 1% | ||
Fuente: www.campaignmonitor.com/css/
Herramientas curiosas:
Soldesign. Transforma tu html en una newsletter
Para vaguetes. Funciona si tu diseño es muy básico, realmente incluye automaticamente la etiqueta <style> en la de <body> y poco más.
Espero que os sirva!
Muy buenos tips a tener en cuenta para el envío de newsletters. También es aconsejable compensar el uso de textos e imágenes para evitar ser víctima de los sistemas antispam.
Gracias por tu comentario Pablo! Totalmente de acuerdo con lo que comentas en relación a las imagenes
Gracias! Qué bueno, y cuantas dudas has resuelto. Cuántos problemas me podía haber evitado habiendo sabido esto… Gracias.
Muchas gracias por el comentario Jaime. Si tienes algún consejo que añadir házmelo llegar!
Hola!
Al enviar mi newsletter, compruebo que Gmail no respeta el fontfamily, ni fontcolor.
Que puedo hacer para que lo haga?
Muchas gracias!!
Hola Alvaro,
Aparte de anidar todo tu diseño en una tabla le puedes aplicar etiquetas con un estilo particular donde lo necesites.
Por ejemplo:
Si quieres pásame el cód. html, lo reviso y te cuento si veo algún fallo.
Espero haberte ayudado!
Muchas gracias por los consejos, hace más de un año que publicastes el post, pero da gusto leer algo en castellano de vez en cuando.
Gracias a ti por visitarlo y comentar. Espero que haya solucionado al menos alguna de tus dudas.
Un abrazo Marcel!
Gracias…
De nada! Gracias a ti por la visita
Artículo genial … voy a linkarlo a mi web!
Claro! Muchas gracias
Muy buen material Kike, ahora mismo estoy peleando con los newsletter y me servio de mucho el post, ya que aprendi a maquetar con divs y css, nunca pense que tendria que maquetar con tablas, esta muy bueno, se agradece.
Se agradece el comentario! Me alegro de que te haya servido de ayuda
Mucha Suerte!
Kike! He llegado a tu blog luego de una intensa búsqueda. Llevo días intentando encontrar una respuesta al tema de la maquetación de emailing y que se pueda ver bien en todos los navegadores y clientes de correo.
He probado una manera, pero que curiosamente en un html se ve bien en los clientes tipo Gmail/Hotmail, pero que en Outlook2007 aún me termina dando “espacios” entre imágenes.
¿Cuál sería entonces el “truco”? Priorizaré enviar entonces con ese error de tablas a los que tienen G/H o me arriesgo a que “el cliente” que ama Outlook lo vea mal?
Seguro que no puedes hacer un “truco” para unir esas imagenes separadas en una y evitar el hueco al que te refieres? A lo mejor con un simple cambio en la estructura del diseño consigues la maquetación perfecta!
De todas formas, discrimina por receptores. En el caso de tener una mayoría de usuarios, por ejemplo, de gmail, optimiza tus comunicaciones para ellos.
Suerte y mucho ánimo!
Hola, yo también he llegado a este post buscando una solución a las imagenes que ligeramente se separan únicamente en outlook.
La solución sería que el ancho siempre fuera una imagen, lo malo es cuando tienes que incluir un link a diferentes partes de la imagen a lo ancho. Por ejemplo, si ponemos los iconos de segui r en redes sociales una después de otra.
No encuentro la solución pero me da la sensación que en outlook el ancho de la tabla no se respeta por lo que se hace más ancha y las imagenes se separan.
Gracias por comentar Gema!
No debería pasarte si tienes todos los anchos fijados y las imagenes se corresponden con esos mismos anchos. Pero igualmente, prueba a hacer un diseño en el que se funda tu imagen con el color de fondo de la celda donde se encuentre para evitar que se note algún espacio o pequeño desplazamiento.
Muchas Suerte con tu Newsletter
Chiquillo, justo lo que necesitaba!!
Hay que ver las casualidades de la vida. Google me trae aquí, y luego veo que es tu blog!
Espero que todo te vaya bien!
Un besazo,
Melissa
Me alegro de que te sirva!
Que sabio es Google que te trae a mi blog, jeje…
Gracias por el comentario, un bsazo Melissa.
¡Qué post más útil! Voy a estar consultándolo unos días. ¡Enhorabuena! y gracias por compartir esta información.
Gracias a ti por comentar!
Muy bueno el post; estuve dos días maquetando y remaquetando usando divs para poder posicionar imagenes una sobre otra usando márgenes negativos y nada, no conseguia solapar las cosas; depues noté que tampoco me andaban las imágenes que estaban de fondo, asi que despues de mucho pelear me di por vencido y dije “ser o no ser cabezadura… Googleo y luego existo” jejeje el primer resultado de mi busqueda fue tu blog y con todas las respuestas. Muchas gracias
Jeje! Que buenas noticias, porque te sirvió el post y porque salga en las primeras posiciones en los “Googleos”. Muchas gracias por comentar Gastón!
como envio un correo a un contacto en hotmail, utilizando hojas de estilo… donde tengo que colocar las etiquetas para crear el diseño,… Agradezco de antemano su colaboracion.
Hola Juernes! Pues el truco esta en usar estilos en código. Es decir algo así:
“<p style="color:#FFFFFF…"
De esta forma consigues el texto en blanco. Pero recuerda que no todos los estilos funcionan! (consulta la tabla del post, ok)
Espero haberte ayudado!
Gracias por comentar