Puede resultar complicado conseguir que los vínculos de nuestras campañas se mantengan del color que deseamos. A menudo, los propios clientes de correo, aplicando estilos propios (azul o lila con subrayado) a los links. Para más información sobre las mejores prácticas para generar tus vínculos visita este artículo centrado en comprobar la eficacia de tus vínculos en tus campañas de email marketing.
Soluciones:
<span>
El tag <span> es utilizado para agrupar elementos en línea de un documento. En sí no produce ningún cambio visual pero es una forma de añadir o diferenciar una parte de texto “especial” – distinto color, tipografía, etc. – dentro de un párrafo.
Este lo colocaremos dentro del tag del link <a href=””> y le daremos los mismos estilos.
También es útil utilizar este tag porqué a veces, cuando estamos editando la plantilla con el editor WYSIWYG, puede darse el caso, que borrando el texto de un link, borremos el link en sí (tag <a> incluido) y por lo tanto, sus estilos.
Crear una clase para los links en el <head>
Si bien hemos dicho que algunos clientes de correo no leen los estilos del head, esto nos asegurará que al menos aquellos que sí lo hacen, mantengan siempre el mismo formato. Para añadir una clase en un link es tan sencillo como añadir la palabra class=”elnombredeclase” y luego definirlo en el head. Veamos un ejemplo:
Poner en el head:
<head>
<style>
a {
color:#aaaaaa;
text-decoration: underline;
}
</style>
</head>
En cuanto a las imágenes hay que tener en cuenta algunos preceptos básicos como son:
- Definir siempre el alto y ancho (width y height) de las imágenes en los estilos en línea o como atributos.
- Pensad siempre en el diseño de vuestro newsletter sin imágenes. Si no tiene sentido, cambiadlo, ya que no estaremos como favoritos en las listas de todos nuestros contactos y estos van a ver las imágenes bloqueadas.
- En consecuencia, es muy importante poner el alt=”texto alternativo” en todas las imágenes, ya que este las sustituirá. Si no ponemos nada, el cliente de correo en cuestión añadirá un texto por defecto.
- Definir el borde:0 y style=”display:block” si no queremos que se generen márgenes raros en el espacio donde queramos insertar nuestra imagen.
- Los formatos óptimos para las imágenes son el GIF i el JPG. Intentemos evitar formatos como TIFF, incluso PNG (versiones viejas de Explorer parecen tener algunos problemas renderizando las transparencias…)
Si queréis más información sobre la forma correcta de utilizar imágenes en vuestras campañas y algunos consejos en el caso de que tengáis la necesidad de utilizar una imagen para vuestras comunicaciones de email, visitad el siguiente artículo de nuestro blog:
Si queréis ampliar vuestros conocimientos en la maquetación de vuestras campañas de email marketing, boletines informativos y/o newsletters, aquí tenéis otros artículos que os pueden ser de ayuda:
1. Utilizar las herramientas adecuadas
2. Maquetar con tablas anidadas
3. CSS en línea y atributos de tablas
4. Formato de links y optimización de imágenes
