aprender a hacer firma correo electronico en html

Aprender a hacer una firma de correo electrónico en HTML

Recientemente un cliente me solicitó ayuda sobre algo que visualmente es algo aparentemente sencillo pero que a la hora de realizarlo no lo es tanto.

Quería tener una firma de correo personalizada con el logo de su empresa, sus datos y algunos enlaces hacia su página web y sus perfiles a redes sociales. Decía que seguro que era una chorrada lo que me estaba pidiendo, pero que él no había sido capaz de hacerlo.

En realidad, lo que quería y él no sabía era aprender a hacer una firma de correo electrónico en HTML.

Sí, sí. Has leído bien. Una firma de correo hecha exactamente con el mismo tipo de código con el que se realizan las páginas web.

Cuando le expliqué que ese tipo de firmas se realizaban con código al igual que las páginas web desistió de inmediato y prefirió que yo mismo se la hiciese a partir de un diseño que él mismo me envió.

Pero… ¿realmente tan complicado es realizar una simple firma de correo de este tipo?

Pues no, no lo es.

Eso si, te hace falta tener unos conocimientos básicos de HTML que tienes que estar dispuesto a aprender.

De lo contrario, te pasará como a mi cliente: te entrarán sudores fríos con sólo pensar en aprender algo nuevo y acabarás delegando en otro esta tarea.

Lo cual no es una mala opción, menos aún tratándose de un profesional como es nuestro caso. Pero claro, te costará pagar el tiempo que ese profesional tarde en realizar la firma de correo HTML que tú tanto anhelas.

Si tu estás dispuesto a pagar para que un profesional te haga un diseño de firma para correo en HTML sólo tienes que solicitarlo aquí y no te hará falta seguir leyendo nada más.

Si prefieres aprender a hacer una firma de correo electrónico en HTML por ti mismo, este artículo ha sido pensado exclusivamente para ti.

Sigue leyendo. Te lo voy a poner fácil.

Por qué es mejor tener una firma de correo en HTML

Antes de ponernos manos a la obra, te daré algunas razones por las que es preferible tener una firma en HTML para tus correos electrónicos antes que una imagen fija:

– Facilita al usuario que recibe tus correos hacer click directamente en tu dirección web o tus perfiles de redes sociales, sin tener que andar copiando y pegando desde el correo al navegador.

– Al permitir hacer click, también es más fácil que las personas que reciben tus correos acaben en tus perfiles de redes sociales o en tu web convirtiéndose en suscriptores o seguidores de tus contenidos.

– Asegura que el receptor del correo electrónico podrá leer al menos el texto con nuestros datos personales  o de empresa, así como nuestros enlaces. Algo que no ocurre si todo es una imagen, ya que existen servidores de correo que no permite la carga de las mismas.

– Permite copiar y pegar tus datos como si de un texto normal se tratara por si tu destinatario fuese un cliente que los necesitara, de modo que le facilita esta tarea en vez de tener que estar tecleándolos a mano.

Quiero aprender a hacer una firma de correo en HTML

Bien, si has llegado hasta aquí es porque no tienes miedo de aprender algo nuevo y quieres que tu próximo correo electrónico a enviar lleve debajo una bonita firma en HTML.

Para ello, voy a realizar a modo de ejemplo una firma muy sencilla que va a constar únicamente de un logo y algunos datos de la empresa ó persona en modo texto y unos iconos con enlaces a diferentes perfiles de Facebook, Twitter y Google+ exactamente como en la imagen:

aprender a hacer firma correo en html

A continuación, explicaré paso por paso

1# Hacer que nuestra firma sea HTML

Lo primero que debemos hacer es establecer nuestro documento como un documento HTML.

Para ello simplemente abriremos un editor de textos normal ó un editor de código como puede ser Notepad u otro similar.  Escribimos el siguiente código:

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi firma HTML</title>
</head>

 

2# Establecer el ancho de la firma mediante unas viejas amigas…

El siguiente paso es definir la estructura de nuestra firma.

Para ello, vamos a echar mano de unas viejas conocidas del HTML: las tablas.

En nuestro caso, será una tabla muy simple, con una única fila y dos columnas. Tú puedes hacer esta estructura todo lo compleja que quieras en función del diseño que tengas en mente o del boceto qué hayas preparado previamente en papel o  con cualquier programa de diseño como Illustrator ó Gimp, por ejemplo.

Estableceremos el ancho total de nuestra firma en 600px, por lo que este será el ancho que estableceremos en nuestra tabla HTML  con el siguiente código:

 

<table width="600" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #df203b;">

Como ves, dentro de esta etiqueta también hemos establecido algo de estilo (para dar un toque de personalización a la firma) con el atributo style.

En nuestro ejemplo, hemos hecho que la firma tan sólo tenga bordes de un color determinado por arriba y por debajo de la misma.

3# Ahora el logo y los datos…

Dentro de nuestra tabla, crearemos una única fila con la etiqueta <tr> y, dentro de esta fila, dos columnas como previamente habíamos dicho.

La primera columna contendrá nuestro logo de 170px de ancho, el cual será también un enlace hacia nuestra página web.

La segunda columna será donde pongamos todos los datos personales referentes a nosotros, a nuestro cargo ó a nuestra empresa. Tendrá un ancho de 430 px para completar los 600px que abarcan el total de la firma.

Debajo de los datos, escribiremos otro párrafo más que contendrá los iconos a redes sociales que queremos enlazar en nuestra firma de correo HTML.

Para darle el estilo de colores, tipo de fuente, bordes, márgenes etc. que queramos a nuestro gusto utilizaremos una vez más, dentro de las etiquetas de columna <td>,  el atributo style.

Muy importante: las imágenes que utilices (tanto la del logo como la de los iconos de redes sociales) debes guardarla en una carpeta en tu alojamiento web para que sean visibles para el destinatario. De lo contrario, si sólo las tienes en tu ordenador, el receptor del mensaje no podrá verlas.

Por último, cerraremos las etiquetas de tabla y de html que habíamos abierto al principio.

En el código de ejemplo que pondremos a continuación, todos los parámetros que van entre corchetes [ ] son los que tu tendrás que poner con tus datos, las url’s de tus imagenes y tus enlaces a redes sociales.

Nuestro código, por tanto, quedará así:

 

<tr>
<td width="170" height="170" style="border:1px solid #df203b; border-right: none; border-left: none;" align="right" valign="top">
<a href="http://www.disenodistinto.com" target="_blank"><img src="[URL-imagen-de-tu-logo]" width="150" height="180"
style="padding-top:15px;"></a>
</td>
<td width="430" height="170" style="padding-left:25px; font-family: Helvetica, Arial, sans-serif; font-size:13px; border:1px solid #df203b; border-left: none; border-right: none; line-height:16px;" valign="bottom">
<p style="font-size:18px;"><b>[Tu nombre]</b></p>
<p style="font-size=15px;"><b>[Tu cargo] &middot; [Tu titulación]</b></p>
<p style="line-height:19px;">[Teléfono] &middot; [email] &middot; [Web]<br>
[Localidad]  &middot; [Provincia]  &middot; [País]</p>
<p><b>Síguenos en:</b></p>
<p><a href="[URL-enlace-pagina-facebook]" target="_blank"><img src="[URL-imagen-logo-facebook]" width="32" height="32"></a>
<a href="[URL-enlace-pagina-twitter]" target="_blank"><img src="[URL-imagen-logo-twitter]" width="32" height="32"></a>
<a href="[URL-enlace-pagina-google+]" target="_blank"><img src="[URL-imagen-logo-google+]" width="32" height="32"></a></p>
</td>
</tr>
</table>
</html>

 

¡Voilá! Ya tienes tu firma de correo en HTML

Si has llegado hasta aquí… ¡enhorabuena! Ya tienes tu firma HTML lista para ponerla en tu servidor ó en tu cliente de correo, ya sea Outlook, Thunderbird o cualquier otro.

¿A que no ha sido tan difícil?

Evidentemente, este es un diseño muy minimalista y sencillo. Pero para hacer algo más elaborado al final solamente se trata de retocar el diseño y la estructura de la firma, poner más o menos columna y tener más o menos imágenes o más o menos datos.

El límite para que tu firma HTML se vea más profesional o con un diseño más original es simplemente tu imaginación.

Para finalizar…

¿Te ha sido de utilidad este tutorial?

¿Has conseguido realizar tu firma HTML con éxito gracias a este artículo?

¿Te ha quedado alguna duda o crees que algo no ha quedado demasiado claro en mi explicación?

Como siempre, me gustaría que me dejases cualquier comentario ó duda que pueda aportar más valor a este contenido para cualquier usuario que visite el artículo.

También te pido que compartas este post en cualquiera de las redes sociales para que más gente se vea beneficiada de este tutorial para aprender a hacer una firma de correo en HTML, ya que no olvides que hago esto para ayudar a cualquier persona que tenga este tipo de dudas a resolverlas.

Un saludo.

Diseñador web especializado en WordPress y diseño gráfico de imagen corporativa. Desde 2014 trabajo como freelance realizando sitios web para clientes que desean hacer crecer su negocio a través de internet. También te ayudo a través de mi blog escribiendo artículos sobre diseño web, WordPress, diseño gráfico y marketing online.

7 comentarios en “Aprender a hacer una firma de correo electrónico en HTML

    • Hola Anabel,

      Para hacer la carpeta para subir las imagenes, necesitas primero entrar al servidor FTP que tu proovedor de hosting te haya facilitado al contratar tu servicio de alojamiento web.

      Normalmente, puedes acceder al servidor de dos maneras:

      1.- Mediante el panel de control web que te facilita la empresa donde tengas contratado el alojamiento

      2.- Con los datos de acceso al servidor FTP e instalando en tu PC algún programa de cliente FTP como Filezilla en los que introducir estos datos para realizar la conexión al servidor y poder crear la carpeta y subir tus archivos.

      Si usas la segunda opción, los datos que necesitas para acceder al servidor FTP suelen ser: nombre del servidor (algo del tipo ftp . miservidor .com), usuario, contraseña y número de puerto.

      Estos datos también te los facilita tu proveedor de hosting con el que tengas contratado tu servicio.

      Una vez dentro, sólo tienes que crear la carpeta en la raíz de tu sitio web con algún nombre del tipo “firma-HTML” (o como tu quieras llamarla) e introducir ahí las imágenes para tu firma.

      ¡Un saludo!

  1. Hola José Antonio,

    Este post me ha venido muy bien porque justo ahora estoy trabajando en mis firmas de correo, pero me ha planteado una duda respecto a las fuentes, como podemos incorporar nuestras fuentes o al menos las Google fonts, para salir un poco de las fuentes por defecto del navegador? Más que nada es para poder usar unas que se acerquen más a mi identidad corporativa…

    • Hola Aina,

      Sinceramente, nunca he probado a cambiar la tipografía de la firma HTML.

      Pero imagino que añadiendo en las etiquetas referentes a la fuente la tipografía deseada con font-face debería funcionar igual que lo hace en un sitio web.

      Si no sabes cómo implementar esta propiedad font-face, busca en Google y te aparecerán chorrocientos sitios en los que te enseñan cómo hacerlo.

      Pruébalo y nos cuentas cómo te ha ido.

      Un saludo.

      • Hola José Antonio,

        Gracias por tu consejo, finalmente he optado por convertir en imagen, la parte que tenia que ir con tipografía especial, que básicamente era el nombre y el cargo. El resto de información, dirección, teléfono, etc lo he dejado con una fuente por defecto.

        Pero espero conseguirlo la próxima vez! 😉

        Un saludo,

        • Hola de nuevo Aina,

          Pues sí, la verdad es que tu solución es también perfectamente válida (y más sencilla para una persona que no quiere meter mano al código).

          Mi “deformación profesional” me hace pensar siempre como diseñador/desarrollador web… jejeje!

          Un saludo.

  2. Hola José, me parece excelente tu aporte, muchas gracias por compartirlo con nosotros.
    Yo soy diseñador gráfico, actualmente estoy trabajando para una empresa acá en Colombia, y me han pedido una firma de correo profesional. El diseño que he estado haciendo lo he trabajado en Illustrator y obvio con dreamweaver, Ya el diseño lo tengo full, pero cuando lo monto al gmail, no me aparece tal y como quiero, he echo variaciones de todas las clases y no se que hago mal. Estoy por pensar que no puedo poner textos encima de imágenes. Si quieres y tienes tiempo sera que te podrias comunicar conmigo al correo diseno.grafico@repares.com te estaría muy agradecido se me ayudaras a saber que hago mal o que no puedo hacer.

Deja un comentario