Qué es un footer, cómo crearlo en HTML y ejemplos

¿Alguna vez has buscado algo en la página principal de un sitio web sin poder encontrarlo? ¿En alguna ocasión consideraste adquirir un producto en un e-commerce, pero no encontraste las políticas de devolución? La frustración que provoca no encontrar «algo» hace que algunos usuarios abandonen el sitio y busquen otro más transparente o intuitivo.

Esta es la razón por la que tu sitio necesita un pie de página o footer. Dicho elemento es parte de la estructura de la página, o al menos, debería serlo si tu intención es mejorar la retención de clientes, ya que el footer contiene información básica sobre tu empresa.

Un footer funciona como una red de seguridad para los usuarios que no han podido encontrar la información que necesitan en otras secciones de tu página web. Por ejemplo, al proporcionar un enlace a tu política de devoluciones o un formulario de contacto, puedes evitar que algunos visitantes abandonen tu ecommerce y nunca regresen.

En esta publicación, explicaremos qué es un footer y por qué es importante para la experiencia del usuario. Luego repasaremos qué elementos poner en un footer y concluiremos con algunos de los ejemplos más creativos para inspirarte.

Tal vez pienses que no tiene sentido dedicar mucho tiempo y esfuerzo al footer, porque la gente no presta atención al contenido ubicado hasta el final. En cierta medida, esta creencia está avalada por varias investigaciones de comportamiento de desplazamiento o scrolling en internet, que así lo afirman. 

Jakob Nielsen asegura que el 57 % del tiempo de visualización de una página web ocurre en la mitad superior de la página. Sin embargo, el tiempo invertido en la mitad superior de la página se reduce a medida que las páginas son más largas, o cuando los diseñadores favorecen el minimalismo y el desplazamiento se normaliza en general. En resumen: un usuario llegará hasta el final de un sitio web si hay una razón para hacerlo.

Con eso en mente y debido a que un footer ofrece información y opciones de navegación para tu audiencia, tiene sentido optimizar este espacio especialmente para esos dos propósitos. En la gráfica siguiente notarás lo que Neilsen Norman Group descubrió: el tiempo dedicado a la visualización disminuye a medida que el usuario recorre la página, pero hay un aumento al final.

Imagen de Nielsen Norman Group

Este es un indicador de que los usuarios saben que el footer contiene información valiosa y acuden a él, especialmente cuando buscan algo específico.

¿Para qué sirve un footer?

En general, estos elementos sirven para brindar información adicional sobre la oferta de la empresa, sus servicios y la manera de contactarlos. De un tiempo a la fecha, el footer se ha convertido en un elemento tan importante como el menú de navegación o el encabezado de la página, a pesar de encontrarse al final.

Es importante comprender que el requisito indispensable para diseñar un footer es saber qué buscan los visitantes y por qué llegaron hasta ahí. Aunque no existe una receta precisa, hay algunos ingredientes estándar que puedes agregar, pero el contenido que pongas, la cantidad y el orden dependen de ti y de las necesidades de tu empresa.

Aquí te presentamos los elementos comunes de un footer. Algunos pueden ser introducidos en HTML y otros más requerirán CSS o JavaScript.

1. Aviso de copyright

Aunque este elemento no sea precisamente algo que los usuarios buscan, cualquier página web declara siempre quién es su autor. Por lo tanto, podría decirse que el elemento más importante del footer es el aviso de derechos de autor o copyright. Esta es la indicación visible y escrita sobre la propiedad de un trabajo, en este caso del sitio web y de sus contenidos, los cuales están protegidos por las leyes derechos de autor (internacionales y nacionales). El propósito es simple: disuadir a cualquiera de copiar o una imagen, animación o texto; o robar contenido de tu sitio web.

Todo lo que se necesita es colocar el símbolo de derechos de autor © (o la palabra «Copyright»), el año de publicación del sitio web o su actualización sustancial más reciente y el nombre del propietario de los derechos de autor. El aviso de derechos de autor debe exhibirse siempre en la página de inicio de tu sitio web. Se puede colocar en cualquier lugar, pero comúnmente se localiza en el footer.

Como ejemplo te mostramos la página de inicio del blog de HubSpot.

2. Enlace a la política de privacidad

Si recopilas datos personales de los usuarios, como sus direcciones de correo electrónico o información de pago, los acuerdos de política de privacidad son obligatorios por ley. Por esta razón, es esencial redactar una política de privacidad que cumpla con la normatividad de tu país y asegurarte de que sea fácil de localizar y acceder en tu sitio web.

Una buena práctica (y frecuente) es poner un enlace a tu política de privacidad en el footer. Esto cubrirá el requisito legal y también las expectativas de la mayoría de los consumidores que esperan encontrar esta información. Aquí tienes un ejemplo del sitio web del periódico español El País.

Imagen de El País

3. Mapa de sitio

Otro elemento que debes agregar al elaborar un footer es un mapa de sitio. Puedes proporcionar varios enlaces a secciones de tu sitio web o dar un único enlace a tu mapa de sitio XML.

El primer enfoque se conoce simplemente como «mapa de sitio», el cual es una guía de navegación que muestra dónde localizar diferentes secciones o elementos que no aparecen directamente en las barras de navegación o menús generales (especialmente en sitios complejos o con mucho contenido). El footer de El Corte Inglés, por ejemplo, incluye enlaces de navegación que los visitantes podrían no haber considerado cuando ingresaron por primera vez al sitio, pero que tal vez les gustaría explorar.

Imagen de El Corte Inglés

El segundo enfoque está diseñado teniendo en cuenta los robots de los motores de búsqueda. Una de las cosas más importantes que tratará de hallar un robot de motor de búsqueda es un enlace a tu mapa de sitio XML. Tu mapa de sitio es un archivo que contiene URL e información de las páginas y archivos multimedia que el robot considera más relevantes en tu sitio. De acuerdo con Google, los motores de búsqueda utilizan este archivo para rastrear mejor los sitios web, particularmente los sitios ricos en contenido. Por eso proporcionar un enlace a este archivo en tu footer se considera una buena práctica para SEO.

4. Logo

El footer es un buen lugar para reforzar la identidad de tu marca. Hay algunos enfoques que puedes considerar. Podrías incluir tu logotipo, pero presentarlo de una manera diferente a la del encabezado. Quizás añadir una imagen, agregar la misión y los valores de tu marca o tu eslogan debajo de él. Estas son solo algunas de las formas en que puedes recordarles a los visitantes lo que representa tu empresa y dar una última impresión memorable.

Puma, por ejemplo, agrega su logotipo en el footer y en el extremo derecho añade un link que dice: «Entrena con los más veloces». De esa manera, el usuario puede acceder a un sitio alternativo en el que Puma ofrece diversos entrenamientos y acompañamiento por medio de una app, lo cual complementa la experiencia del usuario y fideliza al cliente.

Imagen de Puma

5. Información de contacto

Crear un footer eficiente implica una intención. Si deseas que los leads se pongan en contacto contigo fácilmente, puedes usar el footer para mostrar detalles de contacto como un correo electrónico, un número de teléfono o una dirección postal. 

Sony utiliza el footer para poner a disposición de los consumidores la dirección y el teléfono de sus oficinas; e incluso el registro fiscal.

Imagen de Sony 

6. Iconos de redes sociales

Las redes sociales son otro medio para que los leads establezcan contacto contigo. La inclusión de enlaces de tus perfiles sociales se considera una buena práctica y es una razón incluirlas en un footer. También representa una manera fácil de aumentar el número de seguidores en todas tus plataformas.

En el footer de Garnier vemos un espacio especial destinado solo a las redes sociales:

Imagen de Garnier

GIF de Flatstudio

7. Formulario de registro por correo electrónico

Idealmente, debes presentar un formulario de registro por correo electrónico a un visitante que comprende el valor de tu contenido y quiere más. Un visitante que se ha desplazado hasta la parte inferior de tu página web es un candidato probable. Por esa razón muchos sitios web usan el footer como una oportunidad para aumentar suscriptores.

Por ejemplo, Axe incluye un enlace a un formulario de registro. La leyenda: «¿Te gustaría recibir consejos para tus citas, trucos, ideas/instrucciones y avisos sobre productos? Solo envíanos tus datos» ayuda al usuario a establecer las expectativas de la información que recibirá al inscribirse.

Imagen de Axe

A continuación, hablaremos de cómo hacer un footer en HTML. No obstante, si aún no te has familiarizado con este lenguaje para programar el contenido de tu sitio web, te recomendamos que consultes nuestro artículo sobre HTML, que consiste en una guía muy precisa para principiantes.

En caso de que ya tengas nociones básica de HTML, tal vez quieras repasar la creación de formularios antes de comenzar con la creación de un footer. En todo caso, comencemos.

1. Revisa el código de tu página

Para hacer un footer en HTML necesitas conocer lo básico de HTML. Así sabrás qué representan las etiquetas HTML principales y cómo utilizarlas. La etiqueta «footer» indica el término del sitio web dentro de la estructura. Por lo tanto, necesitas revisar el código de tu página para agregar un footer. En general, tu sitio tendrá «header» o cabeza y «body» o cuerpo, así que «footer» representa el cierre.

2. Piensa qué contenido quieres incluir en tu footer

Necesitas pensar previamente qué información quieres dar en esa sección de tu sitio. Ten en cuenta los siete elementos que mencionamos anteriormente; no es necesario que incluyas todos, coloca solamente aquellos que consideres útiles para tus usuarios.

3. Agrega el código

En el código de tu sitio web, verifica dónde termina la sección «body» para que enseguida añadas la etiqueta:

<footer></footer>

4. Incluye la información dentro del código

La información que añadas irá entre el principio y final de la etiqueta, por ejemplo, si quieres agregar el Copyright 2022 deberás escribir el código así:

<footer><p>Copyright 2022©</p></footer>

Y así se vería al correrlo en la página:

En cambio, para otra información podrías agregar:

<footer><p>Contáctanos al 444-444-444 o envía un correo a ayuda@miempresa.com</p><p>Para ver el aviso de privacidad, accede a miempresa.com/aviso</p></footer>

Y este sería el resultado:

Si deseas añadir características CSS y JavaScript, revisa el tutorial de MagtimusPro:

9 ejemplos de footer o pie de página

Como se mencionó anteriormente, no existe una forma «correcta» de crear un footer en un sitio web. Mientras refleje tu identidad de marca y se adapte a tu audiencia será un buen footer. Veamos algunos ejemplos que logran exactamente eso.

1. Lorelei Londres Sorrento

Imagen de Lorelei Londres Sorrento

Lorelei Londres Sorrento es un hotel de lujo en Italia que se esfuerza por brindar hospitalidad y encanto. Su footer tiene éxito en ambos aspectos.

Anticipándose a cualquier pregunta, a la izquierda ofrece información de contacto, en el centro se ubican los enlaces de navegación y a la derecha se encuentra un formulario de suscripción al boletín. A continuación, hay otro enlace a la política de privacidad, la política de cookies y la agencia que creó el sitio web, así como el aviso de derechos de autor. Todo esto sobre una imagen de fondo que muestra a una persona en una piscina y un balcón con vistas a la playa. El resultado es un footer relajado, fresco y perfectamente alineado con la marca.

2. Superfluid 

Imagen de Superfluid

Superfluid es una marca de belleza vegana apta para cualquier persona. Su footer es básico, pero redefine muy bien el significado de la sencillez. Contiene la información que espera el usuario: un menú bien organizado de artículos de ayuda, aviso legal y cuentas de redes sociales, un formulario de registro de correo electrónico, logotipo y los derechos de autor, pero no de la forma convencional.

El logo es enorme, comparado con el resto del texto. Debajo de él, se ven los iconos que representan su misión y valores: «libre de crueldad animal, vegano, fácil de usar, sin aceites minerales». Después hay un aviso de derechos de autor, así como los métodos de pago aceptados. En resumen, este footer proporciona información importante para abordar de una manera audaz y clara cualquier pregunta que los leads tengan.

3. Spline Group

Imagen de Spline Group

Spline Group es una empresa de ingeniería mecánica y eléctrica que valora la comunicación eficaz y la simplicidad. Esto está claro en su footer con un diseño minimalista que presenta texto negro sobre un fondo blanco. Hay una dirección y enlaces a su página de Instagram, LinkedIn y Vacantes. Debajo hay texto mucho más grande que, a diferencia de Superfluid, no es el logotipo o el nombre de la marca: es un CTA simple, pero atractivo: «Hablemos».

4. Art4web

Imagen de Art4web

Art4web es un estudio creativo digital y de branding, comprometido con la creación de sitios web, aplicaciones móviles y diseños de marca únicos. Su footer es un ejemplo elocuente de ello. En lugar de ofrecer una vía de contacto, Art4web da tres. Los leads pueden enviar un correo electrónico, completar un formulario o llamarlos para obtener una cotización para su proyecto. También pueden optar por conectarse a cualquiera de las plataformas de redes sociales representadas por los iconos.

5. gOOOders

Imagen de gOOOders

gOOOders es una boutique que vende productos éticos y sostenibles en su plataforma en línea. Su misión es ayudar a las personas a elegir mejor los productos que compran y la forma en que viajan.

Dado que gOOOders es una marca centrada en la acción, tiene sentido que su footer sea colorido y animado, que busca atraer. La parte principal del footer está dedicada al formulario de registro de correo electrónico. Muestra un cintillo blanco que contiene otras opciones (pero pocas): derechos de autor, un enlace de contacto, la política de cookies, los términos y condiciones e iconos de redes sociales. Este es un gran modelo para sitios web que desean optimizar su footer para las conversiones.

6. Ajeeb

Imagen de Ajeeb

Pranjal Kaila, también conocido como Ajeeb, es un diseñador interdisciplinario independiente. Según su biografía, una de sus especialidades es «crear experiencias interactivas espaciales y sensoriales». Esto está claro en cada parte de su sitio web, incluido su footer.

Este footer contiene información básica (enlaces a su book y trabajos, información de contacto, iconos de redes sociales, aviso de derechos de autor y enlace a su política de privacidad), pero su presentación es única. Sobre el fondo negro, la tipografía blanca parece imitar constelaciones. El cursor actúa como un haz de luz y, al pasarlo sobre cualquiera de los enlaces, la fuente se vuelve azul y amarilla.

7. Glossarie

Imagen de Glossarie

Glossarie es una agencia de contenidos, ubicada en Texas, cuya directora, Elizabeth Befus, exjefa editorial en Apple, cree en el poder de las palabras y en su belleza, sin importar que el contenido esté enfocado en temas de negocios, nichos de industria y marketing. 

Desde el encabezado hasta el pie de página, el sitio web de Glossarie goza de un estilo consistente, interactivo y muy creativo, tanto en la disposición del texto como en la selección del contenido y los colores. Por esta razón apenas se nota que hemos llegado al footer, después de haber transitado por las 5 secciones que forman el sitio web.

Es un ejemplo muy bien logrado de storytelling y diseño web, sin transiciones que interrumpan la experiencia. 

8. Debuut

Imagen de Debuut

Debuut es un estudio especializado en branding y diseño. Y esto es patente desde que ingresamos a su página web. El color, la disposición del texto, el uso del espacio y la manera en que se puede interactuar con el sitio, hasta llegar al footer, es tan interesante como eficiente.

En el footer de la página además de encontrar los datos de contacto puedes ingresar tu correo electrónico para recibir información y beneficios. 

9. Wild Souls

Imagen de Wild Souls

Este sitio web está pensado para provocar antojos. Desde la paleta de colores, la tipografía, el uso del espacio y las transiciones conforme uno desciende, todo provoca en el visitante un deseo de probar los productos.

El footer no es la excepción. Este incluye lo necesario para ser atractivo. Además, tiene un pequeño detalle multimedia, un cintillo que se mueve a lo largo de la página, lo cual agrega dinamismo incluso cuando uno ha llegado al fondo de esta experiencia digital.

Diseñar el footer de tu sitio web requiere una planificación cuidadosa. Es una sección donde los usuarios (y los robots de los motores de búsqueda) quieren encontrar información importante que no han hallado en otro lugar. Por eso debes asegurarte de proporcionarles el contenido y los elementos necesarios para que continúen explorando tu sitio, en lugar de irse desilusionados.

Aprende más sobre la estructura HTML de tus páginas y optimiza la experiencia de tus usuarios constantemente.