Por medio de los CSS podemos lograr que nuestros comunicados tengan un diseño y estilos definidos de acuerdo a la imagen que queremos transmitir. Sin embargo, trabajar con estilos css en nuestros newsletters requiere una programación distinta a la de un sitio web.

Los clientes de correo, por seguridad interpretan los estilos de maneras distintas, o en algunas ocasiones, pueden llegar a omitirlo, dependiendo donde estén declarados nuestros estilos, como aprendimos en el Capítulo I de nuestra guía.
A continuación algunas recomendaciones para que enlistemos de manera correcta los estilos necesarios para que nuestro newsletter se visualice de manera adecuada con el diseño que hayamos creado para él, sin que le afecten las restricciones de los servidores de correo.

Al finalizar ésta guía podrás declarar de manera correcta los códigos de CSS para obtener un newsletter con estilos y diseños atractivos y que se muestren de manera correcta en cualquiera de los servidores de correo. Esta guía es para usuarios de nivel: básico e intermedio

• Usar CSS “inline”

Como lo vimos anteriormente, es muy importante no crear clases o insertar hojas de estilo creando links a las mismas.
Lo que se debe de hacer es utilizar el atributo “style” y enlistar dentro los estilos para dar formato a tu texto u objeto, debido a que los clientes de correo (sobretodo los principales, como Hotmail, Gmail y Yahoo) eliminan todo lo que exista entre la etiqueta <head> de html, de hecho Gmail elimina completamente los códigos entre etiquetas <style> de css que no sea inline, independientemente de donde se encuentre.
Si ya haz creado tu newsletter con los códigos definidos como clases, puedes utilizar una herramienta que te ayudará a “traducirlos” a código CSS inline: Inline Styler de Torchbox Apps.
Ejemplo CSS inline:

<p style="font-size: 13px; color= #333; ">texto aquí</p>

• Crear estilos CSS para cada objeto

Es importante que cada etiqueta u objeto tenga su propio CSS y evitar poner etiquetas encimadas o repetitivas, ya que algunos clientes de correo tomarán la primera etiqueta y otros la última.
Un buena práctica para programar más rápido sin tener que insertar CSS inline etiqueta por etiqueta es crear clases en el HEAD, estas servirán para previsualizar nuestro diseño, una vez que estemos seguros podemos usar herramientas para traducir esas clases en código inline para nuestra versión final, una de estas es inliner.cm.

Incorrecto:

<span style=”color: #333333;”>Texto general que va en gris</span> <span style=”color: #ff6600;”>contenido en naranja</span><span style=”color: #333333;”>continuación del texto en gris</span> Incorrecto

Correcto:

<span style=”color: #333333;”>Texto general que va en gris<span style=”color: #ff6600;”>contenido en naranja</span> continuación del texto en gris</span> Correcto

• Utilizar tipografías estándar

Tipografías Estándar

Las únicas tipografías que se verán correctamente en cualquier navegador o cliente de correo son las denominadas estándar.
Si se utiliza alguna otra, (por ejemplo, copiando desde Word un texto con formato o utilizando el @fontface de css) corremos el riesgo de que se nuestro newsletter se distorcione cuando se reciba en otra computadora donde no se tenga instalada esa tipografía, ya que el servidor de correo la reemplazará por defecto, por cualquier otra parecida, pero dentro de las estándar.

• Evitar el uso de headers <h1>, <h2>, etc., sin estilos.

A pesar de que los headers nos sirven para dar mayor o menor importancia, Gmail elimina los tamaños que tienen por defecto, por eso es importante que a pesar de utilizar un header le creemos sus propios estilos dentro del atributo “style”, sobre todo en cuanto al tamaño de texto, por ejemplo:

<h2 style=”font-size: 18px; color: #ff0000;”>Header rojo de 18 pixeles</h2>

Los sitios donde tus usuarios revisan su correo electrónico seguramente deberá tener hojas de estilo definidas, por ejemplo Hotmail, Yahoo o Gmail, y generalmente establecen estilos para las etiquetas headers.
Por ejemplo si utilizas textos en <h1>, lo más probable es que Hotmail los muestre de color azul, porque su hoja de estilo así lo tiene establecido.

Así, forzaremos en Gmail a que el header sea de tamaño 18.

• Alineación de las celdas y textos

Si una celda tiene como alineación “center” y el texto del contenido no tiene el atributo “align” ni la propiedad de alineación en el atributo “style”, se centrará completamente:

<td align="center" width="200" >
 <p>contenido<p>
 </td>
Si el texto tiene la alineación con la propiedad de alineación dentro del atributo “style”, por ejemplo, a la derecha, la primera línea estará alineada al centro pero lo demás, a la derecha:
<td align="center" width="200" >
 <p style=”text-align: right;”>contenido<p>
 </td>
Para que el texto esté a la derecha completamente, sin importar la alineación que tenga la celda, es necesario que se utilicen ambos, en algunos servidores con que se utilice el atributo “align” (verde) es suficiente, pero para prevenir, también se recomienda que se utilice la propiedad “text-align” (naranja) de css inline:
<td align="center" width="200" >
   <p align=”right” style=”text-align: right;”>contenido<p>
 </td>

• Utilizar códigos de color en Hexadecimal (6 caracteres)

Algunas veces funciona poner “color: #333” para obtener, en este caso, el color #333333 (en hexadecimal), pero para los newsletters es mejor prevenir y colocar el código de color completo, por que si no es así algunos servidores de correo pueden interpretar el campo como vacío o inexistente y poner algún otro color por default.

• Utilizar la etiqueta <span>

Para insertar un párrafo de texto dentro de tu comunicado, es preferible utilizar la etiqueta <span> definiéndole sus estilos, que la etiqueta <p> ya que ésta última tiene márgenes establecidos por defecto, y puede crearnos espacios arriba o abajo del texto que no son necesarios.
Sin embargo la etiqueta <span> nos servirá para darle estilos a nuestro texto y definir márgenes únicamente cuando sea necesario, también ambas etiquetas se pueden combinar, por ejemplo:

<p style=”color: #333333;”>Éste es un párrafo de texto donde resaltaremos <span style=”color: #ff6600;”>algunas palabras en color naranja</span> y mantendremos márgenes con los siguientes o anteriores párrafos</p>

TIP

Gracias a ciertas herramientas, como caniuse.com, podrás saber qué propiedades del CSS son funcionales en diferentes versiones de navegador. En este sentido, también puedes utilizar Litmus para poder previsualizar tus piezas de Email en diferentes clientes de correo.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.
A continuación algunos links que seguramente te servirán para mejorar el uso de los estilos CSS de tus newsletters: