Firmas HTML en Microsoft Outlook

¿Preparado para vestir tus emails de manera mucho más profesional? Firmas HTML

Si los programas de Microsoft tienen una peculiaridad (o muchas), es que durante casi toda su existencia han usado el intérprete HTML de Microsoft Word en lugar de el de Microsoft Internet Explorer.

No vamos a meternos en las razones que les hayan llevado a hacer algo así, pero tenemos que decir que eso nos ha traído de cabeza a desarrolladores y diseñadores. ¿Por qué? Nos ha obligado a tener que programar como en los años 90 para que todo lo creado se vea correctamente en estos programas.

¿Y qué tiene que ver eso con las firmas en Outlook? Que para crear una firma bonita tendremos que hacer uso de HTML, pero del antiguo. Así que prepárate para recuperar las [codigo]<table>[/codigo] y olvidarte de los [codigo]<divs>[/codigo] [codigo]floats[/codigo] [codigo]positions[/codigo] [codigo]margins[/codigo] [codigo]paddins[/codigo] etc

Firma tradicional, sin HTML

Para poner una firma en Microsoft Outlook, basta con pulsar en “Nuevo Mensaje de correo electrónico” y, en la ventana que se abre, clicar en “Firma –> Firmas…”

Tras ello pulsamos en “Nueva” y asignamos un nombre interno a nuestra firma, para diferenciarla si vamos a crear varias. Clic en “Aceptar”

Ahora, en el editor de texto de la parte inferior, creamos nuestra firma. Al tener un pequeño editor, podemos asignarle formato (negrita, colores, tamaños…), hipervínculos e incluso insertar imágenes.

Esto puede servir para la mayor parte de la gente, pero si queremos hacer algo más personalizado, habrá que recurrir al HTML, tal y como explicaremos en el siguiente paso.

Por último, un detalle importante: En la columna de la derecha, podemos escoger de forma predeterminada, qué email usará esa firma por defecto, y si la usará siempre en los mensajes nuevos y/o en las respuestas a otros emails.

Firma PRO, con HTML: Ejemplo Real

Ahora vamos a explicar cómo poder maquetarla con código HTML. Lo que permite una libertad de creatividad muy importante.

Para ello seguimos los pasos del apartado anterior, con la excepción de que no es necesario que escribamos nada en el campo donde crearíamos nuestra firma.

Tras ello nos vamos a un editor HTML y maquetamos nuestra firma como si de una página web se tratase.

A continuación os ponemos de ejemplo la nuestra:

Cuyo código es:

<table width="470">
	<tr width="470">
		<td width="115">
			<img src="https://www.loopeando.com/img/iconologo.jpg" width="109" height="84">
		</td>
		
		<td width="5">
		</td>
		
		<td width="10">
			<img src="https://www.loopeando.com/img/firma_barra.jpg" width="6" height="118">
		</td>
		
		<td width="10">
		</td>
		
		<td>
			<span style="color:#0277bd; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:14px; letter-spacing:0.5px;">Fulanito de Tal</span><br>
			<span style="color:#4c4c4c; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; letter-spacing:0.5px;"><b>LOOPEANDO</b></span> <span style="color:#4c4c4c; font-size:14px; color:#0277bd; letter-spacing:0.5px;"><b> · </b></span><span style="color:#4c4c4c; font-size:12px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; letter-spacing:0.5px;"><i>Cofundador y CEO</i></span><br>
			<span style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; letter-spacing:0.5px;">666.666.666 | Alicante, España</span><br>
			<span style="color:#0277bd; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; letter-spacing:0.5px;">e. </span><span style="color:#4c4c4c; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:12px; letter-spacing:0.5px;">info@loopeando.com</span><br>
			<span style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color:#0277bd; font-size:12px; letter-spacing:0.5px;">w. </span><span style="color:#4c4c4c; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-decoration:none; font-size:12px; letter-spacing:0.5px;"><b><a href="https://www.loopeando.com" style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color:#000000; text-decoration:none; font-size:12px; letter-spacing:0.5px;">¡Visita nuestra web!</a></b></span><br><br>
			<span><a href="https://www.facebook.com/loopeandocom/"><img src="https://www.loopeando.com/img/facebook.jpg" border="0"></a></span><span><a href="https://twitter.com/Loopeando_com"><img src="https://www.loopeando.com/img/twitter.jpg" border="0"></a></span><span><a href="#"><img src="https://www.loopeando.com/img/instagram.jpg" border="0"></a></span>
		</td>
	</tr>
</table>

Ahora ¡llega el momento de dar el cambiazo!
Copiamos nuestra firma HTML y vamos a la ruta donde Outlook guarda sus firmas:

Allí localizaremos una serie de archivos con el nombre de las firmas que hayamos ido creado. Buscamos el archivo [codigo].htm[/codigo] perteneciente a la firma que queramos cambiar, y lo editamos: Botón derecho –> Abrir Con –> Bloc de Notas

Borramos todo el contenido que haya en ese archivo, y pegamos nuestro código. ¡Guardamos y listo!

Finalmente, como hombre-mujer precavido vale por dos, os recomendamos realizar pruebas de envío para verificar que la firma se ve bien en los principales gestores de correo.

Recomendamos enviar pruebas al menos a:

• Hotmail – Ahora Outlook
• Gmail
• Mail de iOs

Inspírate con estas otras firmas de ejemplo

Y para finalizar… ¡¡Coge Ideas!!

Te listamos algunas firmas realmente interesantes que hemos encontrado en una web especializada:
Email Signature Rescue

De hecho, esta web comercializa plantillas de emails. Así que si no os apetece programar, ¡ya sabéis!