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.
Índice de contenidos
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:
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] · [Tu titulación]</b></p>
<p style="line-height:19px;">[Teléfono] · [email] · [Web]<br>
[Localidad] · [Provincia] · [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.
Otra opción para crear tu firma de correo HTML: NewOldStamp
Si todo lo que te he explicado anteriormente te suena a chino mandarín y te da pavor implementar una sola línea de código, no te preocupes: tengo otra solución para ti.
Se trata de la herramienta NewOldStamp, la cual te permite crear una firma de correo HTML de una manera bastante sencilla mediante un panel de edición visual.
Lo único que tendrías que hacer es elegir el plan que más te convenga (para una firma o para varias) haciendo click en el botón del menú llamado «Precio» de esta web.
A raíz de ahí, podrás acceder sin restricción alguna a la zona de login. Una vez te hayas registrado, aparecerá ante ti un panel similar al de la imagen.
Cuando estés en él, pulsa sobre el botón Crear una firma y aparecerá ante ti un editor visual de firmas HTML bastante intuitivo en el que podrás crear tu firma de correo de manera sencilla simplemente rellenando los campos que te interesen (nombre, dirección, redes sociales, elegir una fotografía, etc.).
También puedes elegir alguna de las plantillas predeterminadas como base para que el trabajo te sea mucho más sencillo de implementar aún.
¡Más fácil imposible, ¿no crees?!
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.
30 comentarios en «Aprender a hacer una firma de correo electrónico en HTML»
saludos
una pregunta como se hace esa carpeta de alojamiento web ? y donde
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!
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.
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.
Hola José Antonio, necesito subir una imagen a mi ftp para enlazarla a mi firma de correo como hasta ahora lo había hecho.
(La tenía en mi Dropbox pero ahora la compañía ha decidido que esta carpeta ya no es pública).
Entonces me conecto mediante FileZilla y en la raíz «web» tengo en una carpeta llamada «Firma html» subida la imagen pero no sé cómo copiar la url para insertarla en mi código html de la firma. (Si le digo copiar url al portapapeles no me funciona)
Lo siento pero de programación estoy nulo…
Muchas gracias
Hola Miguel,
La URL donde se encuentre la imagen dependerá de donde tengas la carpeta «Firma HTML».
Por ejemplo, si la tienes en la carpeta raíz de tu alojamiento web, la dirección donde se encuentre tu imagen tiene que ser algo del tipo «www.tudominio.com/firma-html/tuimagen.jpg»
Recuerda que el nombre de la carpeta «Firma HTML» no debe contener espacios. Si quieres separar palabras, lo mejor es que uses un guión como en la URL de ejemplo que te he puesto en la línea anterior.
Espero haber resuelto tu duda. ¡Saludos!
La imagen la tengo en la carpeta Web/Firma-html
Y el enlace que me deja es:
ftp://Miweb@laipdemiservidorweb/web/Firma-html/Nuevo-avatar-M_animacion.gif
Pero esto no ha funcionado
🙁
Estás poniendo la dirección del FTP y esto no es correcto.
Prueba de este otro modo:
http://www.midominio.com (o la extensión que sea tu dominio)/firma-html/nuevo-avatar-m_animacion.gif
o http://www.midominio.com/Web/firma-html/nuevo-avatar-m_animacion.gif
Saludos!
Nada, así tampoco, (eso ya lo había probado antes)
Me sabe mal, no hace falta que sigas. Te estoy haciendo perder el tiempo y no quiero eso.
Te agradezco mucho tu interés.
Si consigo hacerlo te lo digo por si a otra persona le ocurre.
Un abrazo a todos/as
Miguel A.
Seguro que tiene que ser algún problema de la ruta, Miguel A. Por eso no te coge la imagen. Comprueba nombres, mayúsculas, minúsculas… Seguramente sea alguna tontería, pero cuando no se ve da mucha rabia. Con las indicaciones que me has dado… tampoco se me ocurre mucho más que hacer ni puedo ayudarte mucho más. Lo siento.
Abrazo para ti también Miguel!
Hola José Antonio,
La verdad que me estoy en el proceso de aplicar todo lo que aqui expones y compartes, que por cierto me parece genial!!!
Espero poder tener éxito en la aplicación de todo el código.
Sino lo más probable es que te pida ayuda en el caos que pueda causar al intentar darmelas de programador HTML jajajaja.
Un saludo y nuevamente muchas gracias por el post.
Hola Daniel,
Si tienes problemas o no terminas de atreverte, ya sabes que a todos estos temas de diseño me dedico. Así que si lo ves «chungo», no dudes en contactar conmigo o con otro profesional para que te realice esta tarea. 🙂
¡Saludos y gracias a ti!
que hago luego? como lo monto a mi correo google?
Hola Daniel,
Lo único que debes hacer es copiar ese código que has generado en el apartado correspondiente a la firma de tu cliente de correo (Outlook, Thunderbird, etc.) o en las propias opciones de firma de tu cuenta. 🙂
¡Saludos!
Hola Daniel,
querría saber si es posible una cosa. Queremos establecer una imagen a la izquierda, y a la derecha de la imagen queremos poner los datos separados de la imagen con una línea vertical. Hasta ahí todo ok. El problema viene cuando queremos que los bordes superiores del texto, de la línea, y de la imagen coincidan en altura para que la apariencia de la firma sea de una «pastilla». Es posible ajustarlo perfectamente? Gracias!
Hola! muchas gracias por tu post. Sin embargo, creo que tienes errores de puntuación y puede que por ello algunas personas no les salga bien el código. Te recomiendo una revisada por si se te fue el dedo.
Gracias maestro.
Saludos
Hola Mag,
Pues gracias por avisar de esos errores! Lo revisaré por si acaso. 🙂
Un saludo!
Hola José. Qué gusto encontrarme con tu blog. Mi nombre es Federico Carreño! Aunque veo que ya tiene algunos años la publicación, pienso que sigue muy vigente. Tengo un par de preguntas para hacerte, que tal vez le sirva a otros usuarios:
Desde que arranqué a renovar las firmas de la fundación donde trabajo, supe que debía ser HTML. No tenía dudas de ello. Sin embargo si tengo las siguientes dudas:
– En una de las pruebas directamente redacté el código html comenzando por la tabla. No incluí nada mas previo como las etiquetas
, etcc… y funcionaba. ¿Cuál sería la ventaja de incluirlos?
– También probé usando float, en vez de una tabla, pero ahí si tuve algunos errores cuando uno reenviaba los correos, es como que se iba solapando. ¿Tenés experiencia hoy en día con float para firmas? ¿Será mejor seguir usando tablas para las firmas? Una ventaja usando float, es que se adaptaba excelente a los celulares móviles.
Muchas gracias!
Hola Federico,
Las tablas se siguen utilizando en las firmas HTML porque así te aseguras que se ven bien en todos los clientes de correo, ya que hay algunos que el CSS no lo tienen en cuenta o se lo saltan según mi experiencia personal. Así que, en cuestión de firmas HTML, mejor seguir haciéndolas con tablas. Te dará menos quebraderos de cabeza.
Saludos!
Hola,
He probado a insertar imágenes que cambian al pasar el ratón por encima, y no me ha funcionado. En el navegador funcionan correctamente pero en thunderbird solo funcionan los links de debajo de las imágenes, no el cambio de imagen
Saludos
Hola, quiero hacer una firma con una fuente de letra especial pero me dicen q es css, es posible hacer eso en una firma para outlook 365?
Hola Jack,
Efectivamente, si quieres implementar cualquier otro tipo de tipografía que no sean las estándares, tienes que utilizar CSS. Con todo y con eso, en el caso de las firmas HTML no siempre se mostrará este tipo de letra. Todo depende de las restricciones de cada cliente de correo electrónico que usen las personas con las que intercambias emails.
Saludos!
Hola, hago el archivo .html, y para que se vea en Hotmail, cómo lo debo de usar?
Saludos
Hola Sara,
Simplemente debes cargar tu firma HTML bien como fichero o bien copiando el código de la misma en el apartado «Firma» de Hotmail. 🙂
Saludos!
Muy útil este manual, cómo puedo hacer responsive la firma electrónica?
Hola,
Estupendo artículo, me ha sido muy útil.
¿Hay alguna manera de programar la firma HTML para que se vea igual en todos los clientes de correo electrónico?
He probado a hacerla, pero se ve diferente en Gmail que en Mail de Mac. Y también en los teléfonos Mac o Android.
¿Se puede añadir algo al código para que todos los clientes/navegadores lo muestren igual?
Muchas gracias.
Hola buen día, para poder usar esta firma electrónica necesariamente tengo que tener un alojamiento web? O en caso de tener mi única opción es poniendo una imagen?