Footer

González Berrones Uri Akbar

El Footer es la parte inferior de una estructura web en la que generalmente se incluyen links de
navegación, enlaces de interés, copyright o botones a las redes sociales del site.El footer suele
estar claramente diferenciada de alguna forma del resto de la página web.
Para desarrollar un sitio web de excelente calidad es imprescindible considerar una serie de
cuidados como:

 planificar una estrategia

 conocer el público objetivo
 ofrecer contenidos interesantes
El footer está reservado para destacar todo aquello que en la página web haya podido pasar
desapercibido como por ejemplo las redes sociales, el contacto o un formulario de contacto o
suscripción. También se suele utilizar para colocar el copyright o la política de privacidad.
 Diseño del footer: Puntos que debemos tener en
cuenta

 Cuenta con enlaces similares a una pequeña barra de navegación, localizada al final de la página web y con letras
muy pequeñas.
 Parte permanente del sitio, es decir, todas las páginas presentan el mismo footer. Respetar la convención de diseño
es imprescindible para asegurar una buena usabilidad.
 Muy bien diferenciado del resto de la página mediante diferentes recursos como tipografía, elementos de división
y color de fondo.
 En la estructura HTML 5, se lo define con la etiqueta de apertura <footer> y de cierre </footer>.
 Bajo el sistema de “scroll infinito”, podemos añadir un footer flotante.
 En aplicaciones móviles, la información del footer se mantiene oculta.
 Cuenta con enlaces secundarios relacionados con la marca como los perfiles y páginas en redes sociales o los
avisos legales.
 ¿Qué se pone en el Footer?

Por lo general, contiene un aviso de derechos de autor, un enlace a la política de privacidad, un

mapa del sitio, un logotipo, información de contacto, iconos de redes sociales y un formulario de
registro por correo electrónico.
 Características

 El footer está claramente identificado y diferenciado del resto de la página web, ya sea a través de la tipografía, el
color de fondo o la presencia de elementos de división. Debe quedar muy claro dónde empieza y acaba con un
solo golpe de vista. Eso sí, siempre hay que tener en cuenta que su diseño debe ser coherente con la imagen de
marca, los colores corporativos y la estética del resto del sitio.
 El footer o pie de página, como su propio nombre indica, se ubica en la parte inferior de la página web y ahí es
donde los usuarios irán a buscarlo. Sin embargo, existen algunas excepciones a este principio. En las webs con
"scroll infinito", como la página de inicio de algunos blogs, se puede colocar un footer flotante. En otros casos,
como las aplicaciones para móviles, la información del footer se muestra oculta detrás de un botón, a la espera de
que el usuario realice una acción para mostrarla.
 El footer contiene una serie de elementos informativos fundamentales, como la información de contacto y
copyright, y enlaces a páginas secundarias relacionadas con el sitio, como los canales de redes sociales o los
avisos legales. En el siguiente apartado veremos cuáles son los elementos que podemos incluir en el footer.
 El footer es un elemento claramente diferenciado dentro de la estructura HTML de la página. En HTML 5 se
define a través de la etiqueta de apertura <footer> y la de cierre </footer>. Anteriormente, solía definirse el área
de footer con un div y el identificador correspondiente: <div id=”footer”></div>.
 El footer es un elemento permanente del sitio, esto es, que es igual en todas las páginas del mismo (y como es
lógico, debe estar presente en todas ellas). Es muy importante respetar esta convención de diseño, ya que no
hacerlo podría afectar negativamente a la usabilidad y provocar confusión en los usuarios.
 Tipos de footer

En cuanto a su función en la página, podemos clasificarlo en dos tipos:

 Informativo: Utilizado en blogs, incluye suscripción por RSS permitiendo así, que el usuario lea en contenido
desde el sitio y vea las páginas adjuntas. Asimismo, cuenta con un formulario de registro al newsletter y otros
aspectos relevantes para el lector.
 Corporativo: Puede presentar un formulario con 3 o 4 campos para rellenar, así como enlaces a páginas
vinculadas que sean útiles tanto para la empresa como para su público.
En lo concerniente a su disposición, los clasificamos en:

 Footer fijo: Se refiere al componente que siempre aparece en la porción inferior de las páginas de un sitio.
Consiste en un footer permanentemente visible.
 Footer flotante: Muy usado en las páginas infinite scroll, reúne la información imprescindible para los usuarios
evitando así, que tarden mucho tiempo hasta llegar al final de la página.
 Footer oculto: Componente recomendado para páginas que usan como referencia al alto de viewpoint como su
altura máxima, se utiliza con frecuencia en aplicaciones móviles, webs y SaaS.
 Elementos

 "Acerca de". Información básica sobre la marca que ha creado el sitio web o sobre el autor de un blog. Generalmente, esta información se
presenta en forma de enlace a una página donde compartimos los detalles. En el caso de las empresas, es bastante habitual incluir fotografías y
breves biografías de los miembros del equipo.
 Información de contacto. En mi opinión, este es uno de los elementos más imprescindibles, ya que los usuarios están acostumbrados a hacer
scroll para buscar esta información. Es fundamental incluir al menos un email de contacto, pero también es habitual que en el footer aparezcan
el teléfono, la ubicación física de las oficinas o incluso un pequeño mapa. Algunas webs incluso ubican el formulario de contacto en el footer.
 Información legal. Aquí tienen cabida el copyright, la política de cookies, los avisos legales de la web o incluso las condiciones de compra y
devolución en el caso de las tiendas online. Es importante asegurarnos de que toda esta información está siempre a disposición de los usuarios,
evitando los enlaces rotos.
 Mapa del sitio web. En algunos casos se incluye el mapa completo, aunque en el caso de sitios web complejos puede llegar a ocupar demasiado
espacio. Como mínimo, es recomendable incorporar enlaces a las secciones principales de la web, sobre todo si hay mucha distancia entre el
menú de la parte superior de la web y el footer.
 Formularios de inscripción a la newsletter. Aunque el footer puede servir como recordatorio, si estamos buscando
de forma activa incrementar nuestra base de datos también deberíamos incluir alguna invitación a suscribirse
"above the fold".
 Botones de enlace a los canales de redes sociales de la marca. Algunas webs también incluyen un pequeño feed
de novedades, por ejemplo, con los últimos tuits o fotografías de Instagram publicados.
 Enlaces a páginas "secundarias" de la web pero que son de gran importancia para la experiencia de los usuarios,
como la sección de preguntas frecuentes o la página de asistencia.
 Elementos de confianza, como los sellos y certificaciones oficiales o enlaces a sitios de opiniones y
recomendaciones.