Newsletters Vs CSS y HTML. Cómo maquetar para todos los servicios de email?

Publicado: 27 septiembre, 2010 en Desarrollo Web y Móvil
Etiquetas:, , , ,

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

  1. 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)
  2. No usar javascript en nuestra newsletter. Nunca! No hay mejor manera de que marquen nuestra newsletter como spam, además de no funcionar.
  3. 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

  1. 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.
  2. Usar estilos CSS en código, sobretodo centra tus desarrollos en los <td>.
  3. 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.
  4. 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

  1. 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.
  2. 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.
  3. 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.
  4. Declarar ambos parámetros de altura y anchura para las imágenes, no dejes al azar la redimensión de las mismas.
  5. 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!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

<style> in <head> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
<style> in <body> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
Link Element Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

<link> in <head> Yes Yes Yes Yes Yes Yes Yes No Yes Yes Yes
<link> in <body> Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
Selectors Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

e Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
* Yes Yes Yes No No Yes Yes No No Yes Yes
e.className Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
e#id Yes No Yes Yes Yes Yes Yes No No Yes Yes
e:link Yes Yes Yes Yes Yes Yes Yes No No Yes Yes
e:active, e:hover Yes Yes Yes Yes No Yes Yes No No Yes Yes
e:first-line Yes No No Yes No Yes Yes No No Yes Yes
e:first-letter Yes No No Yes No Yes Yes No No Yes Yes
e > f No No Yes Yes No Yes No No No No No
e:focus No No Yes Yes No Yes Yes No No No No
e+f No No No No No Yes Yes No No No No
e[foo] No No Yes Yes No Yes Yes No No No No
Text & Fonts Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

direction Yes Yes Yes Yes No Yes Yes No No Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
text-overflow CSS3 Partial or buggy support Partial or buggy support No No No Partial or buggy support Partial or buggy support Partial or buggy support No Partial or buggy support Partial or buggy support
text-shadow CSS3 No Partial or buggy support Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support No No No
text-transform Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
white-space No Yes Yes Yes Yes Yes Yes Yes No No No
word-spacing Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
word-wrap CSS3 Partial or buggy support No Yes Yes No Yes Partial or buggy support No No Partial or buggy support Partial or buggy support
vertical-align Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
Color & Background Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
background Yes No Yes Yes Partial or buggy support Yes Yes Partial or buggy support No No Yes
-moz-background CSS3 No No No No No No No No No No No
-webkit-background CSS3 No No No No No Yes Yes No No No No
background-color Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
background-image Yes No Yes Yes No Yes Yes No No No Yes
background-position Yes No Yes Yes No Yes Yes No No No Yes
background-repeat Yes No Yes Yes No Yes Yes No No No Yes
-khtml-background-size CSS3 No No No No No Yes Yes No No No No
-moz-background-size CSS3 No No No No No No No No No No No
-o-background-size CSS3 No No No No No No No No No No No
-webkit-background-size CSS3 No No No No No Yes Yes No No No No
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
HSLA Colors CSS3 No No No No No Yes Yes No No No No
Opacity CSS3 No No No No No Yes Yes No No No No
RGBA Colors CSS3 No No No No No Yes Yes No No No No
Box Model Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

border Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
-moz-border-color CSS3 No No No No No No No No No No No
-moz-border-image CSS3 No No No No No No No No No No No
-moz-border-radius CSS3 No No No No No No No No No No No
-webkit-border-radius CSS3 No No No No No Yes Yes No No No No
-moz-box-shadow CSS3 No No No No No No No No No No No
-moz-box-sizing CSS3 No No Yes No No No No No No Yes Yes
height Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
margin Yes No Yes Yes Yes Yes Yes Yes No Yes Yes
padding Yes Yes Yes Yes Partial or buggy support Yes Yes Yes No Yes Yes
width Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
Positioning & Display Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

bottom Yes No No No No Yes Yes No No Yes Yes
clear Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
clip Yes No No No No Yes Yes No No No Yes
cursor Yes Yes Yes Yes No Yes No No No Yes Yes
display Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes
float Yes Yes Yes Yes No Yes Yes Yes No Yes Yes
left Yes No No No No Yes Yes No No Yes Yes
opacity No No No No No Yes Yes No No No Yes
outline CSS3 No No Partial or buggy support Partial or buggy support No Yes Yes Partial or buggy support No No No
overflow Yes Yes Yes Yes No Yes No Yes No No Yes
position Yes No No No No Yes Yes No No Yes Yes
resize CSS3 No Yes Yes Yes No Yes No No No Yes Yes
right Yes No No No No Yes Yes No No Yes Yes
top Yes No No No No Yes Yes No No Yes Yes
visibility Yes Yes Yes Yes No Yes Yes No No No Yes
z-index Yes No No No Yes Yes Yes No No Yes Yes
Lists Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

list-style-image Yes No Yes Yes No Yes Yes No No No Yes
list-style-position Yes Yes Yes Yes No Yes Yes Yes No No Yes
list-style-type Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes
Tables Outlook

2000/03

Live

Hotmail

Yahoo!

Mail

Yahoo!

Classic

Outlook

2007/10

Apple

Mail

Apple

iPhone

Google

Gmail

Lotus

Notes 6/7

Lotus

Notes 8.5

AOL

Desk 10

border-collapse Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes
border-spacing No No Yes Yes No Yes Yes Yes No No No
caption-side No Yes No No No No No Yes No No No
empty-cells No Yes Yes Yes No Yes Yes Yes No No No
table-layout Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes
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!

comentarios
  1. Pablo Olmeda dice:

    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.

  2. Jaime Masdelomismo dice:

    Gracias! Qué bueno, y cuantas dudas has resuelto. Cuántos problemas me podía haber evitado habiendo sabido esto… Gracias.

  3. Álvaro dice:

    Hola!

    Al enviar mi newsletter, compruebo que Gmail no respeta el fontfamily, ni fontcolor.

    Que puedo hacer para que lo haga?

    Muchas gracias!!

    • Kike Puelles dice:

      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:

      Este Texto es Azul y de 12px Este Texto es Gris y de 10px

      Código anterior
      Si quieres pásame el cód. html, lo reviso y te cuento si veo algún fallo.
      Espero haberte ayudado! ;)

  4. Marcel dice:

    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.

  5. Laroca dice:

    Artículo genial … voy a linkarlo a mi web!

  6. Tepo dice:

    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.

  7. OsakaFont dice:

    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?

    • Kike Puelles dice:

      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!

    • gema dice:

      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.

      • Kike Puelles dice:

        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 :)

  8. Melissa dice:

    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

  9. M. J. Ramos dice:

    ¡Qué post más útil! Voy a estar consultándolo unos días. ¡Enhorabuena! y gracias por compartir esta información.

  10. Gastón dice:

    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

  11. juernes dice:

    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.

    • Kike Puelles dice:

      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 :)

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s