Vamos a hacer algo sencillo y rápido para tener finalmente nuestra firma de correo electrónico. En este tutorial se asumirá que hay cierto conocimiento de html y css por parte del lector…
Para empezar es importante tener en cuenta que a pesar de estar en un navegador el cliente de correo no significa que puedas hacer todos los trucos que conozcas de css, por el contrario, por cuestiones de seguridad, del servidor de correos, puedes hacer realmente poco.
Pero al final tendremos una firma de correo electrónico bonita y funcional, que es lo que importa.
HTML y CSS para mi firma de correo electrónico
Para este tutorial usaremos html, las etiquetas table, tbody, tr, td, span e img, de css usaremos margin, font-family, font-size, font-weight, color y line-height.
Antes de empezar siempre hay que tener claro el camino y este es el resultado que queremos… Lo óptimo es tener el diseño ya planeado para ejecutar.
HTML
Básicamente lo que buscaremos hacer es una tabla de una fila con dos columnas (2×1).
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
La etiqueta table marca el inicio y el fin de la tabla y la etiqueta tbody marca el inicio y final del cuerpo de la tabla, tr significa “fila de la tabla” (table row) y como solo hay una eso quiere decir que sólo tendremos una fila de columnas y las etiquetas td que estan dentro de la fila son las columnas.
Td significa “datos de la tabla” (table data) y como dije antes son las columnas o celdas de la tabla, dentro de ellas va la información que queremos entregar al usuario.
En la primera celda va una imagen que es el isométrico de Gárgola y lo vamos a poner con la etiqueta img.
<table>
<tbody>
<tr>
<td><img src="" width="120"></td>
<td></td>
</tr>
</tbody>
</table>
Para cuestiones ilustrativas lo dejaré con la fuente (source) vacía de la primera columna de la firma de correo electrónico, por eso no hay nada entre las comillas pero ahí le pondré la url de una imagen que ya tengo en mi sitio (https://xaeoc.com/wp-content/uploads/2022/03/ka.de_.xaeoc_.GEOMETRIZADO-optimized.png) el ancho (width) está establecido a 120 pixeles, recordemos que la medida por defecto en html es px.
Ahora toca poner los textos que van a ir en la columna del lado…
<table>
<tbody>
<tr>
<td><img src="" width="120"></td>
<td>
<span>Gárgola</span><br>
<span>Soluciones Web</span><br>
<p>[email protected] • 55 3893 1575</p>
</td>
</tr>
</tbody>
</table>
Entidades
Las entidades son grupos caracteres reservados para mostrar en html un caracter o símbolo la nomenclatura empieza con & y termina en ; se pueden encontrar listas de estos en una búsqueda rápida en internet pero les dejo acá un enlace de una página que es la que me gusta a mi: https://dev.w3.org/html5/html-author/charref.
En el texto para la firma de correo electrónico estoy utilizando dos entidades á que es la á y estoy usando • que es una viñeta (bullet).
Utilizamos estas entidades para que los navegadores o clientes de correo en todos idiomas interpreten de manera adecuada los acentos de nuestra firma de correo electrónico y para llamar símbolos, como en el caso de la viñeta para separar con un valor estético mayor la información.
Enlaces
La firma de correo electrónico puede ser una sola imagen pero eso nos limita con la cantidad de enlaces que podemos poner, en mi caso quiero que tengan acceso a mi número de teléfono y a mi email.
<table>
<tbody>
<tr>
<td><img src="https://xaeoc.com/wp-content/uploads/2022/03/ka.de_.xaeoc_.GEOMETRIZADO-optimized.png" width="120"></td>
<td>
<span>G&aacute;rgola</span><br>
<span>Soluciones Web</span><br>
<p><a href="mailto:[email protected]">[email protected]</a> &bull; <a href="tel:+(52)5538931575">55 3893 1575</a></p>
</td>
</tr>
</tbody>
</table>
La información que queremos transformar en un enlace le ponemos la etiqueta a al inicio y al final, como podemos ver en el caso del correo, pero en este caso le ponemos en el href no un url si no el “mailto” con el correo que queremos que el usuario pueda escribirnos con sólo darle click…
Con el número de teléfono es parecido sólo que en vez de usar el mailto, usamos el tel para que el cliente de correos haga automáticamente una llamada cuando le den click a esa parte de nuestra firma de correo electrónico.
Ahora si, empecemos a estilizar…
Tipografía
Para escoger la tipografía que vamos a utilizar tenemos que tener cuidado de no caer en el error de pensar que si los navegadores pueden leer las tipografías de servidor, los clientes de correo lo van a hacer.
No se pueden usar tipografías de servidor como “Google Fonts” o ninguna tipografía que tengamos en el servidor nuestro.
Para hacer la selección vamos a usar las tipografías seguras para web:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Claro podemos hacer búsquedas de “web safe fonts” y vamos a tener miles de resultados que hablan de mil y un tipografías diferentes de las que están en la lista de arriba pero la verdad es que si quieren ir sobre seguro, sólo son esas.
Ahora vamos a enfocarnos en el segundo td.
<table>
<tbody>
<tr>
<td><img src="https://xaeoc.com/wp-content/uploads/2022/03/ka.de_.xaeoc_.GEOMETRIZADO-optimized.png" width="120"></td>
<td style="font-family: Verdana, Helvetica, Arial, sans-serif;">
<span>G&aacute;rgola</span><br>
<span>Soluciones Web</span><br>
<p><a href="mailto:[email protected]">[email protected]</a> &bull; <a href="tel:+(52)5538931575">55 3893 1575</a></p>
</td>
</tr>
</tbody>
</table>
Como pueden ver ahí tengo un font-family con un “paquete” (stack) de tipografías, esto es para asegurarme que si el cliente de correo no reconoce Verdana entonces use Helventica, tampoco reconoce Helvetica pues que busque Arial y si no reconoce ninguna pues que saque la sans-serif que sea que tenga. Mi marca tiene como tipografía oficial Ubuntu pero la puedo poner la tipografía Verdana en mi firma de correo electrónico y el cliente por lo general no va a notar esa diferencia.
Estilo del texto
Luego en cada span vamos a poner las mismas características line-height para adecuar el alto del renglón, font-size para modificar el tamaño de la letra, font-weight para cambiarle el calibre a bold, color para que quede el color oficial de la marca.
<table style="margin: 0 auto;">
<tbody>
<tr>
<td><img src="https://xaeoc.com/wp-content/uploads/2022/03/ka.de_.xaeoc_.GEOMETRIZADO-optimized.png" width="120"></td>
<td style="font-family: Verdana, Helvetica, Arial, sans-serif;">
<span style="line-height: 1em; font-size: 46px; font-weight: 700; color:#00aeef;">G&aacute;rgola</span><br>
<span style="line-height: 1em; font-size: 23px; font-weight: 700; color:#00aeef;">Soluciones Web</span><br>
<p><a href="mailto:[email protected]">[email protected]</a> &bull; <a href="tel:+(52)5538931575">55 3893 1575</a></p>
</td>
</tr>
</tbody>
</table>
Si se fijan bien lo único que se sale de la constante es el tamaño de la letra que para que uno quepa debajo del otro es diferente… Por lo demás se repite.
Ahora modificamos el párrafo y los enlaces…
<table style="margin: 0 auto;">
<tbody>
<tr>
<td><img src="https://xaeoc.com/wp-content/uploads/2022/03/ka.de_.xaeoc_.GEOMETRIZADO-optimized.png" width="120"></td>
<td style="font-family: Verdana, Helvetica, Arial, sans-serif;">
<span style="line-height: 1em; font-size: 46px; font-weight: 700; color:#00aeef;">G&aacute;rgola</span><br>
<span style="line-height: 1em; font-size: 23px; font-weight: 700; color:#00aeef;">Soluciones Web</span><br>
<p style="font-size: 12px; margin:0;">
<a href="mailto:[email protected]" style="color:#00aeef;">[email protected]</a> <span style="color:#00aeef;">&bull;</span> <a href="tel:+(52)5538931575" style="color:#00aeef;">55 3893 1575</a>
</p>
</td>
</tr>
</tbody>
</table>
Ponemos en el párrafo el margen en 0 para que no separe de más la información del subtítulo y le ponemos el tamaño de letra que necesitamos. A los enlaces y al span de la viñeta solamente le ponemos el color que queremos usar para ellos. Yo en lo personal preferí dejarles el mismo color y usar el text-decoration que trae por defecto el enlace (subrayado) para llamar la atención…
Roundcube
En el artículo anterior hice unas instrucciones que hablan de Roundcube pero acá revisitaremos algo de eso para poder poner la firma de correo electrónico dentro de mi cliente de correo web…
Una vez adentro de Roundcube iremos a “Configuración > Identidades” y ahí encontraremos el correo al que queremos hacerle la firma.
Rellenamos la información que necesitamos poner y lo establecemos con predeterminado en caso de que no sea así por defecto.
En donde dice “Firma” veremos debajo un pequeño icono en la esquina superior izquierda del área de texto donde podemos escribir… Cuando le damos click a dicho icono cambiará el espacio de la firma de correo electrónico a esto:
En la barra que aparece en la parte superior buscaremos el icono “<>” que está entre la imagen y la letra A… Cuando damos click en ese ícono aparece una ventana nueva y ahí pegamos nuestro código:
Cuando le demos ok ya veremos nuestra firma como la creamos…
Conclusión
Para muchos es frustrante que no se pueda ver la marca exactamente a como la planteó el diseñador gráfico y si el que tiene la decisión final es un diseñador gráfico va a sacrificar todo porque se vea perfecto el diseño, pero vale la pena que expliquemos por qué es mejor hacerlo con texto.
La firma en texto es importante para que si el cliente no acepta que el cliente de correo muestre las imágenes siempre se muestre los enlaces y el nombre completo de la empresa, cosa que no pasaría si tenemos tres imágenes que muestren la tipografía que no quise sacrificar.
Espero les haya gustado… Deja abajo tus comentarios.
