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.

¬Ņ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 footer amazon

 

‚ě°ÔłŹ Ejemplo de Footer de Benayas Asesores

footer Benayas Asesores

 

‚ě°ÔłŹ Ejemplo de Footer de Elegantthemes

footer Elegant Themes

 

‚ě°ÔłŹ Ejemplo de Footer de Marketeros de Hoy

footer Marketeros de Hoy

 

‚ě°ÔłŹ Ejemplo de Footer de Metricool

footer Metricool

 

‚ě°ÔłŹ Ejemplo de Footer de Netflix

footer Netflix

 

‚ě°ÔłŹ Ejemplo de Footer de Stradivarius

footer Stradivarius

 

¬ŅQu√© opinas? ¬ŅPara qu√© sueles utilizar t√ļ el footer de tu p√°gina web? ¬°Cu√©ntamelo en los comentarios!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si contin√ļa navegando est√° dando su consentimiento para la aceptaci√≥n de las mencionadas cookies y la aceptaci√≥n de nuestra pol√≠tica de cookies, pinche el enlace para mayor informaci√≥n.

ACEPTAR
Aviso de cookies