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/
Via: KikePuelles
