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.
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”
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.
<p style="font-size: 13px; color= #333; ">texto aquí</p>
• Crear estilos CSS para cada objeto
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>
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>
• Utilizar tipografías estándar
• Evitar el uso de headers <h1>, <h2>, etc., sin estilos.
<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.
• 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>
<td align="center" width="200" > <p style=”text-align: right;”>contenido<p> </td>
<td align="center" width="200" >
<p align=”right” style=”text-align: right;”>contenido<p>
</td>
• Utilizar códigos de color en Hexadecimal (6 caracteres)
• Utilizar la etiqueta <span>
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.