En este artículo hablaremos del header o cabecera de una página web: qué es, para qué sirve, qué se suele/debe incluir en el header, algunos ejemplos, un truqui que te va a venir muy bien… ¡vamos, que después de leerte este artículo te doy el diploma oficial de experto en headers!
Como recordarás, porque sé que eres fan incondicional de Marketeros de Hoy, hace poquito escribí un post sobre el footer de una página web. Pues bien, si aquel día hablamos del pie de página, hoy quiero hablarte en profundidad del header.
En este artículo te mostramos:
¿Qué es el header de una página web?
No hay que ser bilingüe para imaginar que header viene de head, que es cabeza en inglés, por lo que se puede deducir que la traducción es cabecera.
¿Y qué es la cabecera de una página web? Pues lo que está arriba, al inicio de un sitio web, antes de que empiece el meollo de la página web.
En html5, la cabecera de tu página web será todo aquello que coloques entre las etiquetas <header> y </header>.
¿Qué característica principal tiene para poderse diferenciar del resto del sitio? Principalmente que este header es el mismo para todo el sitio web, como pasaba con el footer. Evidentemente puede haber excepciones, ya que pueden existir páginas del sitio que no tengan cabecera, pero para mantener una buena usabilidad es conveniente que la cabecera sea la misma en todo el sitio web.
¿Por qué es importante para la usabilidad que el header sea el mismo en todo el sitio? Pues principalmente por el menú, uno de los elementos principales que se encuentran en el header.
¿Qué elementos debe tener un header?
Puede o debe porque habrá elementos opcionales y otros podríamos decir que casi obligatorios:
- El menú. Como antes te he comentado, el menú es uno de los elementos más importantes e imprescindibles del header de tu web. El usuario siempre buscará el menú de tu web para poder navegar por ella.
- Por supuesto, otro de los elementos más imprescindibles es el logotipo de tu empresa. Al colocarlo en la cabecera en todo momento en tu sitio web, mejorarás tu branding y será fácil para los usuarios reconocer siempre dónde están.
- Los iconos de redes sociales. Si tu empresa o blog tiene redes sociales, es conveniente que coloques los iconos de éstas en el header, ya que es uno de los sitios (junto al footer) donde el usuario más va a recurrir para buscarlas.
- El buscador. En algunos blogs o páginas web, suele haber en el header un icono de una lupa, para poder buscar por medio de palabras clave algún contenido.
- Información de contacto de tu empresa: teléfono, email, etc.
- Selector de idioma, si el sitio está traducido a varios idiomas. Si es así, el lugar más cómodo y intuitivo para que estén estas banderitas es en el header, aunque también pueden estar en otros lugares de la web.
- Otros enlaces importantes que quieras destacar. Puede ser un segundo menú, o simplemente varios enlaces adicionales a otras partes de tu web o a otros sitios web que quieras colocar de manera independiente en la cabecera.
- Llamada a la acción o botón. En él podemos destacar el objetivo de nuestra página web: “Hazte socio”, “Contrata ahora”, «Suscríbete«, etc.
Otros elementos imprescindibles en tiendas online
Estamos más que acostumbrados hoy en día a comprar por internet, pues bien, nunca debe faltar en la cabecera de tu e-commerce:
- El carrito o cesta de la compra
- El botón para acceder a tu cuenta (también muy importante e imprescindible en redes sociales o sitios web con área privada)
- Características destacables de la tienda: “Envíos gratis a partir de X euros”, “Aceptamos pagos con tarjeta”
- Icono de notificaciones (también importante en otros sitios web con área privada)
¿En qué situaciones no hay header en un sitio web?
Antes he mencionado que puede darse la situación de que haya páginas de tu sitio que no tengan header. ¿Cuál es el caso? Por ejemplo, en el caso de las páginas de aterrizaje o landing pages.
Estas páginas normalmente no tienen menú y por tanto, algunas tampoco tienen header.
Las páginas de aterrizaje o landing pages, son páginas a las que se enlazan desde un anuncio o desde un email, por alguna campaña concreta.
El objetivo de esa campaña puede ser rellenar un formulario, descargar un infoproducto, obtener información de un servicio. Por tanto, normalmente, para estas campañas suelen utilizarse páginas específicas (no el sitio web completo, donde está el menú) con esa información y nada más, para no desviar la atención del usuario ni mezclar objetivos.
De todas formas, estas landing pages pueden no tener menú, pero sí header con otros elementos: redes sociales, información de contacto, etc.
¡Ojo! No confundir <header> con <head>
Si sabes un poquito de html, seguro que sabes que las partes principales de una página web son <head> </head> y <body> </body>.
Pues bien, esta etiqueta <head> no es el header o cabecera de la que estamos hablando en este artículo, no debes confundir <head> con <header>.
Al igual que pasa con el footer de una web, el header está dentro del <body> de tu página web. Sin embargo, el <head> va antes del <body> (el cuerpo de la página), es la parte “no visible” de la página web. Aquí indicaremos etiquetas meta, el título de la página, el idioma, información relacionada con las hojas de estilo, etc.
¡Truco! ¿Cómo dejar fijo el header cuando se hace scroll?
Para finalizar, porque soy así de generosa, voy a compartir contigo cómo puedes fijar el header de tu página para que al hacer scroll continue siempre visible arriba.
Tan solo tendrás que tocar un poco el código css de tu sitio. Si utilizas WordPress puedes hacerlo directamente en la hoja de estilos o en el apartado de css personalizado que suelen tener algunas plantillas.
Vamos a editar el código del header y del body. Si quieres, puedes aplicarle una clase o un selector-id al header que quieres editar. En mi caso, por ejemplo, el selector que voy a utilizar es #cabedera-fija. Por tanto, el código sería el siguiente:
#cabecera-fija {
position: fixed;
}
Con solamente este código, conseguimos que la cabecera se quede fija, pero el contenido de la página queda por debajo. Así que, habría que editar el body:
body {
padding-top: 80px; ---> Altura del header
}
Para que no quede mal, debemos poner un padding-top del mismo tamaño que la altura que tiene la cabecera.
Si todo ha ido bien, ya tendrías tu header fijo y funcionando correctamente.
Ejemplos de Header
Para terminar, después de todo esta chapa que te he dado, voy a enseñarte varias capturas de pantalla de ejemplos de headers que considero interesantes, unos más repletos de elementos, otros más sencillos…
¿Qué te ha parecido?
¿Le sacas partido a tu header?
¿Conocías todas las opciones y funciones que puedes realizar?
¡Te leo en los comentarios!
Imagenes cedidas por Deposit photos.
Diseñadora web y experta en Marketing Digital y Social Media. Amante de la música, la informática y las nuevas tecnologías. Actualmente haciéndome un huequito en el mundo online con mi blog leonorcanuelo.com
Excelentes recomendaciones Leonor!
Si conocía a los elementos que mencionaste, creo que según el nicho del sitio web habrá unos elementos que si quedan y otros que no.
En lo personal, mi elemento favorito es la llamada a la acción, para ya irles dando una dirección desde el primer momento a los visitantes que comienzan a ver el header.
Gracias por compartir.