El footer es uno de los elementos de un sitio web que más pasa desapercibido. Pero es una sección a la que se le puede sacar mucho provecho y utilidad.
En este post voy a hablarte del footer o pie de página, en concreto veremos qué es, cómo lo podemos utilizar, qué elementos debemos incluir y algunos ejemplos de diseños de footer que me han parecido interesantes.
En este artículo te mostramos:
¿Qué es el footer?
El footer o pie de página es, como puedes imaginar, la parte inferior de un sitio web. Hoy día, la mayoría de páginas web son de navegación vertical, es decir, que hay que hacer scroll para poder ver todo el contenido de cada página del sitio. Pues el footer es el fin de cada página.
Dentro de la estructura de HTML del sitio web se encuentra diferenciado por las etiquetas <footer> y </footer>. Aunque se encuentra al final del sitio web, está dentro del body de la web.
Un ejemplo de la estructura sería el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Título de la página</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Título</h1>
</header>
<section>
<p>Esto es un texto descriptivo…</p>
</section>
<footer>
<p>Copyright 2019</p>
<p><a href=”#”>Ley de Cookies</a></p>
<p>Esta es nuestra dirección de contacto</p>
<p>Síguenos en <a href=”#”>Facebook</a></p>
</footer>
</body>
</html>
Esta sección habitualmente es común en todas las páginas del sitio web, es decir, este pie de página no varía en función de cada página de tu sitio, se trata de un elemento permanente. Es importante mantener esta correlación del diseño para mantener una buena usabilidad y no confundir al usuario.
La utilidad principal del pie de página es informativa. Aquí encontraremos información que no se haya desarrollado al completo en el resto de la web, o haya pasado desapercibida. Los elementos que se encuentran en el pie de página son aquellos que comúnmente están en el footer de una web y el usuario va a buscarlos de manera inconsciente ahí.
Por ejemplo, información sobre el creador del sitio web, información legal, un sitemap, las redes sociales, etc. Pero más adelante veremos en concreto qué elementos se suelen y se deben incluir en el pie de página de tu sitio web.
¿Para qué sirve el footer? Ventajas principales
Principalmente, la principal razón de utilizar un footer en tu página web es mejorar la usabilidad del sitio. El usuario asocia, cada vez más, el pie de una página web a la sección donde encontrará sobre todo los textos legales, la información de contacto, las redes sociales, etc.
Por tanto, si nuestro objetivo en el diseño de una página web es ponerle las cosas lo más fácil posible al usuario, utiliza el pie de página con los elementos que más adelante te aconsejamos.
Con la creación de un footer también mejoraremos la navegación de nuestro sitio web, ya que incluiremos diferentes enlaces y menús. Y con ello, a su vez, también mejoramos nuestro posicionamiento SEO.
Otro de los beneficios más importantes de crear un footer en tu web es el de mejorar la confianza del usuario, ya que otros elementos que podemos incluir son sellos de confianza o certificados de calidad, premios obtenidos (como en el caso de restaurantes, el sello de TripAdvisor), logos de las distintas pasarelas de pago en el caso de tiendas online, los propios textos legales, etc.
Son elementos que nos hacen como usuarios ver que esta empresa y esta web es segura y nos da tranquilidad y confianza.
Qué información incluir en el footer : Elementos
Aunque, como te he comentado antes, son muchos los elementos e informaciones que podemos incluir en el footer de una web, no debemos saturar esa sección de nuestra web. Y más aún, actualmente, que el estilo que predomina en una web es el del minimalismo, textos grandes y gran espaciado.
En concreto, ¿qué elementos podemos incluir?
- Un formulario de contacto
- Un formulario de suscripción
- Información sobre el Copyright de la web
- Información sobre el diseñador o desarrollador de la web
- Enlaces de interés
- Enlaces a páginas secundarias o colaboradores
- Información legal: Política de Privacidad, Ley de Cookies, Condiciones de uso, Aviso legal, etc.
- Redes sociales de la empresa
- Información sobre la empresa
- Logotipos de colaboradores o sellos y certificados de calidad
- Dirección de la empresa
- Cómo contactar con la empresa: teléfono, email, etc.
- Mapa del sitio web
- En un e-commerce, las diferentes pasarelas de pago con las que se trabaja
El footer de la web debe tener un diseño similar al de tu página web, nunca debe desentonar ni destacar en exceso sobre el diseño de la web en general. Pero eso sí, debe diferenciarse claramente del resto de la web. Suelen utilizarse tonos negros u oscuros, no debe ser demasiado grande y, como ya te comentaba, sin estar repleto de elementos.
Que sea usable no tiene por qué estar reñido con el diseño, puedes colocar un parallax y conseguir un efecto muy chulo al hacer scroll, o utilizar diferentes efectos o diseños.
Ejemplos de diseños de footer
A continuación te dejo algunas capturas de pantalla de ejemplos de footer de páginas web (algunas conocidas por todos, pero que igual no te habías fijado en su footer) que me han parecido interesantes, tanto por su diseño como por su usabilidad:
➡️ Ejemplo de Footer de Amazon
➡️ Ejemplo de Footer de Benayas Asesores
➡️ Ejemplo de Footer de Elegantthemes
➡️ Ejemplo de Footer de Marketeros de Hoy
➡️ Ejemplo de Footer de Metricool
➡️ Ejemplo de Footer de Netflix
➡️ Ejemplo de Footer de Stradivarius
¿Qué opinas? ¿Para qué sueles utilizar tú el footer de tu página web? ¡Cuéntamelo en los comentarios!
Diseñadora web y experta en Marketing Digital y Social Media. Amante de la música, la informática y las nuevas tecnologías. Actualmente haciéndome un huequito en el mundo online con mi blog leonorcanuelo.com
