Estructura Web #1: Header

estructura-web-cabecera-1.jpg

Comenzamos el minicurso de Estructura Web con la primera lección, en la que nos centraremos en aprender que es el Header, o cabecera de una página web (aunque mas que lecciones es una recopilación de pequeños tips y consejos que os ayudarán con el diseño y la usabilidad de vuestras webs). El Header (cabecera o encabezado) es la parte superior de la página web. Y salvo pequeñas variaciones debería cargarse y aparecer igual en todas y cada una de las páginas de nuestra web.

HEADER El primer consejo que os vamos a dar es que el Header debe ser lo más pequeño posible (siempre teniendo en cuenta el contenido que debe ir dentro de él).

Debemos tener siempre presente el término "Above the Fold", o lo que es lo mismo evitar que el usuario tenga que hacer demasiado scroll para llegar al contenido relevante.

Por eso, cuanto menor sea el tamaño del header mas espacio quedará libre para el contenido importante de la web.

Así que resumimos que el Header debería tener un máximo aproximado de 150 px, todo lo que sea mayor será contraproducente para el contenido de nuestra web.

Ahora que tenemos claro el tamaño del Header vamos a ver qué elementos debemos colocar dentro de él y donde los situaremos, y eso es muy fácil;

El logo a la izquierda y el menú a la derecha.

Es tan sencillo como eso.

No pongas el logo en el centro y el menú abajo (que es una práctica muy de moda últimamente), porque de esa forma estarás haciendo que la cabecera tenga un nivel más de lo necesario y de nuevo estarás quitando espacio al contenido, y como todos sabemos “el contenido es el rey”.

¿Y porqué no el menú a la izquierda y el logo a la derecha?

Bien pues ese es un tema de neuromarketing, el usuario está inconscientemente acostumbrado a esa distribución. Es como cuando preguntas en un bar donde está el baño… “al fondo a la derecha”.

No le compliques las cosas al usuario.

Continuemos, ahora vamos con el Título, Logo o Eslogan de nuestra web.

Ya tenemos claro donde vamos a situarlo (a la izquierda del header), pero ¿Que formato deberia tener?

Nuestra recomendación es que siempre que podamos sea texto, se que muchas veces queda mas bonito el uso de una imagen, incluso en ocasiones será imprescindible usar una, pero si usamos texto siempre sera mejor, ya que Google lo reconoce y lo indexa mejor y si además usamos correctamente las etiquetas Title y H1 conseguiremos un mejor resultado que con un logotipo en imagen.

En el caso de vernos obligados a usar una imagen, deberemos prestar mucha atención a sus atributos, que el tamaño no sea demasiado grande, que no pese demasiado y ralentice la carga de la web (recordad que el header se carga en todas y cada una de nuestras páginas) y revisar siempre que tenga el formato correcto (png, gif, jpeg…)

También existe la posibilidad de hacer que el header sea fijo.

Esta es una opción interesante ya que conseguiremos que la cabecera esté siempre visible y nos acompañe aun cuando hagamos scroll, dejando así siempre en pantalla nuestro logotipo y el menú de navegación.

Pero hay que tener en cuenta que para plantearnos usar esta opción debemos tener un Header muy pequeño, ya que al ser fijo nos está quitando espacio del contenido en todo momento.

Y hasta aquí los tips o consejos de hoy sobre el Header de tu página web.

En la siguiente ocasión hablaremos del Menú de Navegación.

Recuerda que si tienes alguna duda, pregunta o sugerencia puedes ponerte en contacto con nosotros desde aquí.

CUBODEKUBRICK