Branding HTML Marketing Programación Tips

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:

[subraya_rosa]C:\Users\»tu-usuario»\AppData\Roaming\Microsoft\Signatures[/subraya_rosa] O si tienes el Sistema Operativo en español:

[subraya_rosa]C:\Users\»tu-usuario»\AppData\Roaming\Microsoft\Firmas[/subraya_rosa]

 

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!

 

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

4 Comentarios

Haz clic aquí para dejar tu comentario

  • Hola!

    muchas gracias por el aporte, tengo una duda al enviar el correo con la firma, a los remitentes no le cargan las imagenes. como puedo solucionar esto?

    gracias quedo atento

    • Hola Fabian,

      según mi experiencia eso depende del cliente de correo que estén usando los destinatarios ya que algunos por temas de seguridad bloquean las descargas de imágenes automáticamente. En Outlook hay una opción que lo permite o bloquea, y en Gmail sale un mensaje para mostrarlas