¡Holaaaaaaaaaaa corasón!

Hoy quiero hacer protagonista de esta historia a un gran olvidado en diseño web. Una parte importante de las páginas pero que muchas veces queda relegado a… “Bah, si eso no lo ve nadie. En dos minutitos lo tengo preparado”

¡EL FOOOOOOOOOOOTER!

Empezamos.

#1. ¿Qué es el footer?

Está bien empezar por el principio: la definición. El footer o pie de página es la parte inferior de una web y que, normalmente, encontrarás diferenciada del resto (cambios de color, de fuente, imágenes…).

En el footer se incluyen con frecuencia enlaces de interés, cajas de suscripción, mapas, enlaces a perfiles sociales… Suelen ser elementos importantes que queremos que cierren la web y refuercen ideas en el usuario. Veremos ahora con detalle qué elementos tiene sentido incluir en el pie, cuáles no y cómo sacar partido a esta sección de nuestra web.

Footer del blog de Ensalza

 

#2. ¿Cómo sacarle partido al pie de página?

Os decía que muchas veces el footer es el gran olvidado en una web porque hemos visto muchos pies de página feos, desmaquetados, sin cuidar… Pensamos que como está al final de todo son pocos los usuarios que harán scroll infinito para llegar hasta ahí. La verdad es que has visto muchos más footer de los que crees. ¿Cuántas veces has entrado a una web y has ido directamente al final a buscar enlaces a los perfiles sociales, por ejemplo?

Esta sección de tu web es un OPORTUNIDAD para ti, no la desaproveches. Incluye aquí solo los aspectos más importantes para ti o tu modelo de negocio.

¿Qué elementos puedes incluir en el footer para sacarle partido?:

#a. Botones a redes sociales (si tienes)

Tanto en el pie como en el menú superior (no el principal) son los dos sitios donde el usuario, sin pensar, buscará los enlaces a tus perfiles sociales. Pónselo fácil. He llegado a un montón de sitios web buscando sus cuentas en Twitter: he ido al pie y no estaban, he ido al menú superior y tampoco, me he ido a contacto…

Muchos clics + aumento de frustración = ¡abandono!

Si vuelves un poquito más arriba a la foto del footer de este blog (o bajas hasta el final) verás cómo están visibles y fácilmente reconocibles nuestros iconos a perfiles sociales.

#b. Suscripción a newsletter (si tienes)

Puedes aprovechar este espacio para incluir una caja de suscripción a tu blog y fomentar que se apunten. Nosotros, por ejemplo, tenemos newsletter y podríamos poner una caja al pie. Sin embargo, no es una de nuestras prioridades principales. Preferimos que te pases por nuestra web, nuestras redes o cotillees nuestras categorías.

Evalúa qué acción te interesa más que haga el usuario y colócala en el pie. Insisto: evalúa y ELIGE las que más te interesen. No puedes poner 40 acciones distintas si quieres sacarle partido al pie o el usuario se volverá loco con tanta opción.

#c. Datos para contactar

Otra gran opción. Si tienes una tienda física, puedes incluir un mapa y tu dirección para que te encuentren fácilmente. Si tienes una tienda online, añade el correo electrónico o teléfono para que contacten contigo.

#d. Menú de navegación

¿Para qué poner abajo lo que ya está arriba? Sencillamente para facilitarle la navegación al usuario, que no es poco. Pónselo fácil y añade los enlaces a las secciones más importantes de tu web en el pie. Puedes añadir también algún enlace secundario pero sin excederte.

#e. Logotipo

Una opción interesante para reforzar tu imagen de marca. Puedes acompañarlo de una pequeña biografía o de tu eslogan principal, una frase que te represente o que simbolice la filosofía de tu negocio.

 

#3. Elementos que evitar en el footer

Hemos visto cada footer… ¡Mamma! Cosas tremendas que nos han hecho sangrar los ojos.

No te voy a descubrir América diciendo cómo no debe ser un footer: solo hay que pensar un poquito con la cabeza. Lo sé, no todo el mundo tiene esa capacidad… ¡Jajaja! Veamos, por ejemplo:

  • No incluyas tus últimas entradas al blog si no lo actualizas desde 2015
  • Tampoco añadas enlace al blog si solo tienes 3 entradas de ‘¡Hola Mundo!’ con lorem ipsum
  • Si no tienes perfiles en 15 redes sociales distintas, ELIMINA los iconos de los que no tengas
  • Tener cuenta en Twitter con un tweet TAMPOCO es tener perfil en esa red. Quita el pajarito.
  • Si no tienes nada que destacar, ¡no pasa nada! Aviso legal y privacidad es más que suficiente. Mejor poco y bien que mucho y mal
  • Powered by noquierouneuropagarysenota
Si no tienes nada que destacar en el footer... ¡No pasa ná! Lecciones de #diseñoweb en @ensalzacom Clic para tuitear

 

#4. El diseño del footer en WordPress

Como habrás leído en el resto de mis artículos (y si no lo has hecho ya estás tardando) una parte importante de mi trabajo la hago con WordPress. Por eso en este apartado hablo del diseño del footer SOLO en WordPress, porque el resto no lo domino y tengo una interesante virtud… De lo que no sé no hablo.

Los pies de página con WordPress se pueden personalizar ¡hasta el infinito! Nosotros últimamente hemos utilizado mucho Divi y la verdad que las opciones que ofrece son fantásticas.

En primer lugar, puedes elegir en cuántas columnas quieres dividir el footer y tamaño de cada una. Estas son algunas de las opciones disponibles:

Como vemos, son varias las opciones que tenemos. Dos medios, tres tercios, medios y tercios combinados, tercios con cuartos, quintos con sextos… ¡Bla, bla blá!

Evalúa cuáles son los elementos que quieres destacar, el orden y demás y elige el que mejor encaje con tu proyecto. Si no lo tienes muy claro y te puedo ayudar, déjame un comentario con tus dudas y te echo una mano en lo que pueda.

Para que el pie tenga sentido y, nunca mejor dicho, cierre la web, debe ser visualmente distinto al resto de la web. Una de las prácticas más extendidas en diseño web es utilizar el mismo color para el header, pie y botones (por ejemplo) y el resto de la web en otro tono que contraste.

La idea es que cuando llegue el usuario abajo reconozca visualmente en un nanosegundo dónde acaba tu contenido y empieza el pie de la página.

footer-ejemplo

Ejemplo de pie con colores que contrastan fácilmente

 

Antes de pasar con ejemplos de footer (buenos, malos, regulares y una sorpresa), quería marcar la diferencia entre FOOTER y MENÚ INFERIOR porque, amigos, ¡no es lo mismo! Aunque este elemento (primera pista) no lo verás en todas las páginas web, quiero mencionarlo para que no confundas los términos y hables con propiedad, ¡leñe!

El menú inferior es un elemento DENTRO del footer. Igual que un mapa, los botones a redes o una caja de suscripción son elementos que se pueden añadir al pie de página, el menú inferior también lo es.

En Ensalza a veces lo utilizamos para incluir lo que llamamos ‘menú legal‘ con enlaces al aviso legal y la política de cookies. Visualmente, lo diferenciamos levemente del color del pie para marcar la diferencia pero sin que llame la atención o distraiga al usuario.

footer

Distinción entre footer y menú inferior

 

#5. Ejemplos de footer: bueno, malo y ¡SORPRESA!

 

Footer bueno

Por ejemplo, uno de los últimos footer que hemos desarrollado es el de la web de la Asociación Cultural y Deportiva del Liceo Francés de Madrid. ¡Nos gusta!

Footer malo

No he podido encontrar un ejemplo peor que este. Es que ni siquiera he podido hacer una captura del pie de una sola vez… ¡Scroll en el propio pie señores!

Parte 1

 

Parte 2

Footer... ¡SORPRESA!

Si eres muy muy fan de Ensalza sabrás que estamos cocinando nuestra nueva web y que queremos que salga a la luz más pronto que tarde… ¡Estamos trabajando en ello! De momento, por ponerte la miel en los labios, hacemos como el cuento y te enseñamos solo la patita: nuestro footer =)

 

pie de página

El footer de la nueva web de Ensalza

 

¿TE GUSTA? =)

 

¡Y esto es todo amigos! Podría liarme mucho más y poner muchos más ejemplos buenos, malos y regulares… Pero haciendo caso a David, hagamos artículos yendo al grano.

Si tienes alguna duda o puedo ayudarte a diseñar el pie de tu página déjame un comentario y lo vemos.

¡Hasta la próxima!

Soy la Community Manager de Ensalza, y responsable de redacción y contenidos en marketing.

Me encanta leer y viajar. Muy curiosa, amante de la (buena) música, de Madrid y del aperitivo a mediodía.

[Total:0    Promedio:0/5]
Share This