¿Qué es el header de una web y para qué sirve?

El header o cabecera web es lo primero que ve un usuario al entrar en una página web y normalmente, al igual que el footer, se repite en todas las diferentes páginas de una web para facilitar la navegación del usuario. El header, es una parte fundamental de una página y hay que adaptarla a cada proyecto, ya que influirá en gran medida al posicionamiento en buscadores.

Así que, no te pierdas este artículo si te interesa conocer al detalle que es un header y ver algunos ejemplos que te puedan servir de inspiración para tu proyecto.

¿Qué es un Header y para qué sirve?

La cabecera de una página web o header se utiliza para definir la primera información que recibirá un posible cliente de tu proyecto. Esto hace que el header tenga una gran relevancia dentro de la web, por lo que hay que tener en cuenta dos cosas. Primero, debe permitir que los usuarios naveguen fácilmente por él. Y, segundo, es muy importante ofrecer la información que más te interese destacar para que un posible cliente la encuentre rápidamente.

Un header debe estar totalmente personalizado a tu proyecto y sin ninguna duda un header mal estructurado puede provocarte indirectamente un mal posicionamiento en Google, por lo que si no sabes qué estructura debe tener no dudes en contactar conmigo para que te ayude. A grandes rasgos, los elementos que suele haber en la cabecera de una página web son:

  • Elementos de identidad de marca: Nombre de la empresa, logotipo, eslogan, etc.
  • Menú: El menú de navegación principal con los enlaces a las secciones de la web que más te interese destacar.
  • Información de contacto: Un teléfono o correo electrónico.
  • Enlaces a redes sociales: A veces se utilizan estos iconos para mostrar la relevancia de tu empresa dentro del sector, aunque en mi opinión, no es recomendable.
  • Información destacada: También es posible mostrar en el header, ofertas o promociones que tengas activas durante un periodo de tiempo determinado, como podría ser campañas de rebajas, nuevas colecciones, etc.
  • Un buscador: Utilizando el buscador el usuario podría utilizar una palabra clave para encontrar algo rápidamente en tu web. En otro artículo hablaré de la importancia de los buscadores y cómo puedes utilizarlos para mejorar tu negocio. Si te interesa o quieres hacerme alguna consulta ya lo sabes, contacta conmigo y analizaré tu caso.

Los puntos mencionados anteriormente no son obligatorios, tu proyecto puede o no tenerlos. También es posible encontrar algunos de estos elementos en el footer, esto se utiliza para poder ampliar la información listada en el header y hacer que esta cabecera de la web solo la información más relevante para el usuario.

Las funciones principales de un header ¿Para qué sirve?

El Header tiene un importante factor estético dentro de una web y se utiliza por un lado, con la finalidad de dejar claro al usuario cuál es el sitio web que está visitando y quién hay detrás de esa marca o proyecto. Y, por otro lado, facilita la navegación y ofrece al posible cliente los enlaces de otras partes de la web que son relevantes para obtener toda la información.

Por tanto, la cabecera de una web cobra especial interés a la hora de mejorar la experiencia de usuario y usabilidad de la web; sin olvidar su apariencia y el valor de diseño y por lo tanto la función estética que aporta como marca. Una vez más, vemos como adquiere relevancia un buen diseño tanto UX (User Experience) cómo UI (User Interface).

Ejemplos de un header según cada tipo de web

Como ya te he explicado anteriormente, para tener la mejor cabecera web posible cada proyecto deberá tener un header personalizado según la experiencia que el usuario debe tener dentro de la web. Pero, si quieres tener algunas ideas de lo que puede tener una cabecera según el tipo de proyecto que tengas entre manos.

Header de una web corporativa

En las webs corporativas el logotipo o la marca de la empresa suele tener un papel destacado, ya que una de las principales intenciones de este tipo de webs es asociar unos servicios y un tipo de contenido relevante a una empresa.

Algunas de los enlaces que pueden aparecer son:

  • Inicio.
  • Sobre nosotros.
  • Página de servicios.
  • Portfolio o proyectos en los que has trabajado.
  • El blog o sección de noticias.
  • Contacto.

Quizás en algunas webs corporativas habrás visto que tienen un pequeño menú encima del header llamada header top, ya veis que es un nombre muy original, dónde se podrían colocar las principales llamadas a la acción cómo podrían ser:

  • El teléfono de la empresa, mucho mejor si es clicable, y horarios de atención al cliente.
  • El correo electrónico de contacto o un icono de mail (es mucho más práctico para el cliente si al hacer clic se abre el gestor de correos automáticamente)
  • En el caso que la empresa tuviera una sección para usuarios registrados o trabajadores podría aparecer también el acceso a la intranet.

Header de una tienda online

En las tiendas online además del logotipo o marca de la empresa uno de los elementos que debe destacar más son las categorías de productos por eso cada vez es más habitual que una tienda online disponga de un mega menú.

Pero para definir a grandes rasgos que enlaces debe tener una tienda online serían:

  • Inicio.
  • Categorías de productos.
  • Buscador.
  • Sobre nosotros.
  • Mi cuenta, para que el cliente pueda acceder a revisar sus pedidos y estado de los envíos.
  • Blog o una sección para creación de contenidos de interés.
  • Carrito.
  • Contacto.

Además, en las tiendas online, también puede aparecer un bloque header top que utilizaremos para promocionar campañas de ofertas y promociones o lanzamientos de nuevos productos, etc.

Tal y como has podido comprobar las tiendas online tienen cabeceras más interesantes y complejas ya que la experiencia de usuario será determinante a la hora de conseguir una transacción. Además, el footer también adquiere una gran importancia.

Cabecera de un blog

En la cabecera de un blog normalmente podemos encontrar los siguientes enlaces:

  • Categorías o secciones del blog.
  • Sobre mi o sobre nosotros.
  • Página de contacto.
  • Un Buscador, que se utilizará para encontrar artículos.

Si hay una marca personal detrás de un blog este también puede contener un menú y otras categorías interesantes como serían los servicios e incluso un portfolio o proyectos realizados.

Qué hay que tener en cuenta a la hora de diseñar una cabecera web

A la hora de crear una cabecera hay que tener en cuenta ciertos aspectos de diseño que pueden resultar claves para mejorar la experiencia de usuario.

Altura del header

En la parte superior de la web suele aparecer la información más relevante del proyecto. Por lo que solemos encontrar la propuesta de valor de la marca o la acción principal de la página visitada.

Precisamente por esto, si haces un header demasiado alto vas a perder espacio para que ,de buenas a primeras, los usuarios sepan de qué va la web o la acción que deben realizar.

La causa más habitual para hacer una cabecera demasiado alta suele ser el logotipo de la empresa. Este suele tener un espacio destacado para favorecer la imagen de marca, por lo que es importante que no coloques un logo demasiado grande o intentes en la medida de lo posible utilizar un logotipo horizontal para el header.

Dejar la cabecera web fija al hacer scroll

Para favorecer la navegación y la experiencia de usuario puede ser interesante que la cabecera de la web se quede fija en la parte superior de la página, por lo que cuando el usuario navegue (haga scroll) este menú y por lo tanto también el logotipo y la imagen de marca esté siempre presente.

Para hacer esto, solo tienes que hacer que hacer uso del: header fixed o sticky header.

Otro tema seria hacer que el menú principal o las llamadas a la acción más relevantes para el proyecto estuvieran fijadas en la parte inferior de la pantalla. Pero ya explicaré en otro post porque esto es interesante y que puede aportar en tu proyecto.

El header en dispositivos móviles

Si la cabecera en una pantalla de ordenador no tiene que ser demasiado alto en dispositivos móviles aún menos, por lo que puede que tengas que crear un logotipo diferente para adaptarlo a los móviles.

Otra de los elementos que caracterizan un menú en mobile es sin duda el menú. Para reducirlo de tamaño y adaptarlo al móvil, se convierte en un menú hamburguesa en la que al hacer click se abrirá y aparecerán los enlaces del menú.

Espero que después de este artículo te hayas podido hacer una idea de las diferentes características que debe tener un header, cuál es su función principal y las peculiaridades que tendrá en función de la tipología de la web o del dispositivo en el que se visualice la web.

Cómo has podido ver el menú de la web da mucho de si, y aún me han quedado pendientes unos cuantos temas a tratar relacionados y que suelen traer muchas preguntas.

Ya lo sabes, si tienes cualquier consulta o quieres que te ayude con tu página web no dudes en contactar conmigo.

Un saludo!

Consigue una web profesional