El footer que trabaja: qué poner al pie de una web y por qué importa

Cuando revisamos las grabaciones de sesiones de una web, hay un gesto que se repite: alguien entra, hace scroll rápido hasta abajo del todo, mira unos segundos y vuelve a subir o hace clic en algo del pie. Está buscando el teléfono, la dirección, si la empresa es de verdad, cómo se llama la persona que la dirige. El footer es, para mucha gente, el atajo hacia la información que de verdad necesita.

Y sin embargo es la parte de la web que menos atención recibe en los proyectos. Se resuelve al final, con prisas, copiando el menú principal, añadiendo cuatro iconos de redes y una línea de copyright. Funciona, pero desaprovecha uno de los espacios más visitados de cualquier página.

En esta guía repasamos qué poner en un footer según el tipo de negocio, cómo ordenarlo, qué exige la normativa española y cómo diseñarlo para que sea cómodo de usar, sobre todo en el móvil.

01Para qué sirve un footer: los tres tipos de visitante que llegan hasta abajo

Un pie de página atiende a tres situaciones muy distintas, y diseñarlo bien empieza por tenerlas presentes.

• →Quien ha leído toda la página y está convencido. Busca el siguiente paso: contactar, reservar, ver precios. El footer tiene que dárselo sin hacerle subir.
• →Quien no encuentra algo en el menú principal. Baja al pie porque sabe, por costumbre, que ahí suele estar «todo». El footer actúa como un mapa del sitio resumido.
• →Quien quiere comprobar que eres de fiar. Mira la dirección, el NIF, los avisos legales, si hay un sello de calidad o una asociación profesional. Son señales que dan tranquilidad, y lo explicamos con más detalle en señales de confianza digital.

Nielsen Norman Group lleva años documentando este comportamiento en sus estudios: los usuarios recurren al pie de página como red de seguridad cuando la navegación principal no les responde. Que el footer esté bien organizado no compensa un menú confuso, pero sí rescata a mucha gente.

02Qué poner en el footer: los bloques esenciales

No todos los footers necesitan lo mismo, pero casi todos se construyen con estos bloques.

Contacto: la información más buscada

Para un negocio con atención presencial, el bloque de contacto es el corazón del footer. Funciona mejor si:

• →El teléfono es un enlace tel: que se pulsa en el móvil y abre la llamada.
• →El correo es un enlace mailto: o, mejor aún, va acompañado de un enlace a la página de contacto, que puedes diseñar siguiendo la guía de la página de contacto perfecta.
• →La dirección está escrita completa, con código postal, y enlaza a la ubicación en un mapa.
• →El horario indica claramente los días festivos o la temporada, si cambia.

Navegación secundaria: el mapa resumido

Aquí van los enlaces que no caben o no merecen estar en el menú principal, pero que alguien puede buscar: servicios concretos, trabajos, la página del equipo, preguntas frecuentes, empleo, prensa. Agrúpalos en columnas con un título breve («Servicios», «Estudio», «Ayuda») y limita cada columna a unos cinco o siete enlaces. El orden y las etiquetas siguen la misma lógica que el menú principal, algo que tratamos en la guía del menú de navegación.

Redes y newsletter: solo lo que está vivo

Los iconos de redes sociales son casi un reflejo automático en cualquier footer. Lo que funciona es enlazar solo los perfiles que se actualizan con regularidad: un Instagram con la última publicación de hace dos años transmite justo lo contrario de lo que se busca. Mejor dos redes activas que seis abandonadas. Y si las redes son importantes para tu negocio, considera mostrar algo más que el icono, como una línea que invite («Mira nuestros platos del día en Instagram»).

La newsletter tiene en el footer uno de sus mejores sitios, porque quien llega al final de la página suele estar interesado. Un formulario de una sola línea, con el campo de correo y un botón, funciona bien si va acompañado de una promesa concreta: qué va a recibir la persona y cada cuánto. «Una carta al mes con nuestras novedades y un plato de temporada» convence más que «Suscríbete a nuestra newsletter». Junto al botón, un enlace breve a la política de privacidad.

Señales de confianza

Sellos de calidad, asociaciones profesionales, certificaciones, premios o métodos de pago seguro encajan muy bien en el pie, sobre todo en sectores donde la confianza decide la compra. Pocos y reales: tres logos reconocibles dicen más que una fila de doce insignias que nadie identifica.

03Los legales: lo que pide la normativa en España

En España hay varios textos legales que deben estar accesibles desde cualquier página de una web comercial. El footer es el lugar donde todo el mundo los busca, así que es donde deben estar.

1. 01Aviso legal. La LSSI-CE (Ley 34/2002 de servicios de la sociedad de la información) obliga a identificar al titular de la web: nombre o razón social, NIF, domicilio, correo electrónico y, si aplica, datos de inscripción registral o colegio profesional.
2. 02Política de privacidad. El RGPD y la LOPDGDD exigen informar de qué datos se recogen, con qué fin, durante cuánto tiempo y cómo ejercer los derechos.
3. 03Política de cookies y configuración. Además de la política, la guía de cookies de la AEPD indica que retirar el consentimiento debe ser tan fácil como darlo. Un enlace permanente «Configurar cookies» en el footer resuelve ese requisito con elegancia.
4. 04Condiciones de venta o contratación, en tiendas online o servicios que se contratan en la web.
5. 05Declaración de accesibilidad, obligatoria para el sector público y cada vez más habitual en el privado, sobre todo desde que la Ley 11/2023, que traspone la Directiva Europea de Accesibilidad, se aplica a determinados productos y servicios digitales desde junio de 2025.

Los detalles del banner y del consentimiento los desarrollamos en la guía de RGPD y cookies en tu web.

04Cómo diseñarlo: jerarquía, ritmo y móvil

Un buen footer tiene su propia jerarquía visual, igual que cualquier otra sección. Algunos criterios que aplicamos:

• →Un cierre de página antes del footer. Muchas veces la última sección antes del pie es una llamada a la acción a todo el ancho («¿Hablamos de tu proyecto?»). Funciona como despedida y deja el footer libre para la información.
• →Contraste de fondo. Un color distinto al del contenido, a menudo el más oscuro de la paleta, marca claramente que la página ha terminado.
• →Columnas ordenadas por importancia. De izquierda a derecha en escritorio, de arriba abajo en móvil: identidad y contacto primero, navegación después, legales al final.
• →Tipografía legible. El texto del footer suele hacerse demasiado pequeño. En nuestros proyectos no bajamos de 14–15 píxeles, y los enlaces llevan espacio vertical suficiente para pulsarlos con el dedo.
• →Aire. Un footer apretado da sensación de trastero. El espacio entre grupos hace que se lea de un vistazo.

El footer en el móvil

En una pantalla estrecha, cuatro columnas se convierten en una lista muy larga. Hay dos soluciones habituales:

En ambos casos, el contacto y la acción principal deberían quedar visibles sin abrir nada. Y los objetivos táctiles necesitan al menos 24 × 24 píxeles, como fija WCAG 2.2, aunque en la práctica apuntamos a unos 44 píxeles de alto por enlace para que se pulse sin errores.

05Por dentro: semántica y SEO del pie de página

Un footer bien construido en HTML ayuda a los lectores de pantalla y a los buscadores a entender la página.

<footer>
  <div class="footer-marca">
    <a href="/" aria-label="Inicio">Logo</a>
    <p>Estudio de diseño en Estepona desde 1999.</p>
  </div>
  <address>
    Calle Ejemplo 12, 29680 Estepona (Málaga)<br>
    <a href="tel:+34952000000">+34 952 000 000</a>
  </address>
  <nav aria-label="Pie de página">
    <h2 class="visualmente-oculto">Enlaces del sitio</h2>
    <ul>
      <li><a href="/servicios">Servicios</a></li>
      <li><a href="/proyectos">Proyectos</a></li>
    </ul>
  </nav>
  <p><a href="/aviso-legal">Aviso legal</a> · <a href="/privacidad">Privacidad</a> · <button type="button">Configurar cookies</button></p>
</footer>

• →El elemento footer principal de la página actúa como región de «información de contenido», un punto de referencia al que los lectores de pantalla pueden saltar directamente.
• →El nav con aria-label distingue esta navegación de la principal.
• →El elemento address agrupa los datos de contacto del titular.

Si quieres profundizar en por qué esta estructura importa, lo tienes en la guía de HTML semántico.

En cuanto al SEO, el footer refuerza la estructura de enlaces internos y los datos de contacto locales. Lo que funciona es enlazar a las páginas que de verdad son importantes, con textos naturales. Las listas de veinte enlaces del tipo «diseño web Marbella, diseño web Estepona, diseño web Málaga…» pertenecen a otra época y hoy restan más de lo que suman.

06Ejemplos de footer según el tipo de negocio

Para un despacho profesional, el peso cambia hacia la confianza: colegio profesional y número de colegiado, áreas de práctica, sedes con su dirección y un enlace a «Primera consulta». En una tienda online, en cambio, el footer es casi un centro de ayuda: envíos, devoluciones, métodos de pago, seguimiento de pedidos, atención al cliente y sellos de pago seguro.

Un hotel suele combinar contacto, botón de reserva directa, ubicación, enlaces a habitaciones y experiencias, certificaciones de sostenibilidad y selector de idioma. Una web corporativa grande añade inversores, prensa, empleo y la lista de empresas del grupo.

Checklist rápida de footer

1. 01¿Está el teléfono, y se puede pulsar en el móvil?
2. 02¿Dirección y horario coinciden con la ficha de Google?
3. 03¿Hay una acción principal clara?
4. 04¿Los enlaces están agrupados con títulos y no superan siete por grupo?
5. 05¿Aviso legal, privacidad, cookies y configuración de cookies están presentes?
6. 06¿El texto mide al menos 14 píxeles y tiene contraste suficiente?
7. 07¿Los enlaces son cómodos de pulsar en el móvil?
8. 08¿Las redes enlazadas están activas?
9. 09¿El año, si aparece, es el actual?

07El último detalle, también cuidado

Un footer pensado con cariño dice mucho de una marca: que se ha ocupado de todo, hasta del final. En SIMA lo diseñamos como una sección más del proyecto, con su jerarquía, sus textos y su sitio dentro del sistema visual, dentro de nuestros trabajos de diseño web y experiencia digital. Si quieres que revisemos el pie de tu web, o la web entera, escríbenos y lo miramos juntos.