¿Cuál es el tamaño adecuado de la cabecera web (header)?

Encabezado de web


Índice

Introducción

Factores clave del encabezado de web

1. Logotipo
2. Tamaño
3. Contenido

Tamaño de las cabeceras web en WordPress

Cómo encontrar cualquier tamaño de imagen para el banner de un header

No todas las imágenes de la cabecera web de un banner tienen el mismo tamaño

¿Cuál es el mejor tamaño de encabezado de web para tu página web?

Conclusión

Introducción

Dicen que las primeras impresiones son muy importantes; y es totalmente cierto. Tu encabezado de web o header es lo primero que ven las internautas cuando llegan a tu sitio. Diferentes estudios basados en el seguimiento ocular han demostrado que las personas comienzan a revisar las pantallas de los ordenadores y teléfonos móviles comenzando en la parte superior y bajando en zig-zag hacia abajo. La función principal de las cabeceras web es facilitar la navegación. Pero también tienen un papel fundamental a la hora de transmitir el estilo y la apariencia de tu sitio. En esta guía te vamos a mostrar todo lo que necesitas saber sobre las cabeceras web (header) para que sepas cuál es el tamaño ideal del encabezado de web de un sitio.

Factores clave del encabezado de web


1. Logotipo

Comienza creando una imagen, gráfico u otro concepto visual que muestre la esencia de tu producto o servicio. El gráfico debe mostrar la marca de tu empresa y contar con un logotipo. Un encabezado artístico debe tener unos colores y estilo que se adapte a tu página web para inspirar a tus visitantes.

Grande, atrevido, poco convencional: Atlassian

El header de Atlassian es grande y atrevido. Posiblemente sea un guiño a Atlas, el titánico dios griego que “sostuvo el mundo sobre sus hombros”. El azul de Atlassian aparece en los hipervínculos, los botones de llamada a la acción (CTA) y las imágenes.

Atlassian

Minimalista, silencioso: Apple

Pocas compañías pueden alcanzar la sensación minimalista que tiene Apple. Para una organización que opera en tantos sectores y con más de 130,000 empleados en todo el mundo, destaca en simplificar y comunicar todo lo relacionado con su marca de una manera muy visual y precisa.

Apple

Fomentando la acción: Oxfam

La ONG Oxfam utiliza un encabezado de web que fomenta la acción más importante: las donaciones. La ubicación, el tamaño, el color y el relieve de la “barra de acción”, no solo sirve como herramienta de navegación, sino que también es una manera de comunicar su propósito. Pero lo más importante, incita a la acción.

Oxfam

Buscar al frente y al centro: Shutterstock

En el sitio de imágenes Shutterstock, todo gira alrededor de las imágenes. La barra de búsqueda es relevante y combina perfectamente con la fuente, el color y la iconografía de la compañía.

Shutterstock


2. Tamaño

En las tiendas online que venden productos, las cabeceras web o header son una herramienta muy útil para mostrar los productos y las promociones más populares. Los carruseles o controles deslizantes se utilizan frecuentemente para rotar los productos o secciones destacadas que sirven como punto de partida hacia las secciones más importantes de la página web.

El encabezado web de Zara sirve casi como un obstáculo, destacando un carrusel de colecciones. Los indicadores del carrusel (puntos) se muestran de manera vertical en la parte inferior derecha, mientras que el header llena el 100% de la pantalla con la navegación superpuesta en la parte superior. Una imagen muy impactante.

Zara

Internet.org es otro ejemplo de un encabezado de web de fotograma completo con navegación superior silenciada. Pero en lugar de un carrusel, usa el lado izquierdo del encabezado como un área de navegación y contenido dual. Cuando el usuario hace una selección, la página se desliza hacia la izquierda, moviendo la imagen principal hacia el lado izquierdo y mostrando el contenido del cuerpo en el lado derecho.

Internet.org

En esta variación de ancho completo de Virgin Galactic, el header parece un heroico elemento de navegación con un vídeo de fondo que incluye imágenes impresionantes.

Virgin Galactic


3. Contenido

Todos los elementos de tu encabezado web deben funcionar en conjunto. La ubicación y el tamaño de cada objeto en el header, ofrece a los usuarios pistas visuales sobre cómo navegar y usar tu página web nada más acceder a ella. El color de un botón, el espaciado, el relleno alrededor de los elementos o el tamaño de fuente de un título, pueden marcar la diferencia entre que el usuario realice la acción deseada o no.

Carrusel de imágenes

Usualmente el carrusel de imágenes se usa en los encabezados de páginas web porque son capaces de:

  • Comunicar una a una cada pieza de contenido para evitar cualquier confusión.
  • Mejorar en gran medida la comunicación visual. La cual es mejor porque generalmente las personas simplemente ‘escanean’ el contenido, en vez de leerlo completamente.
  • Ofrecer relevancia al contenido más importante.
  • Actuar como navegación previa. Lo que permite al internauta explorar diferentes contenidos sin salir de la página principal.
  • Hacer que la página web resulte familiar para que los usuarios sepan cómo usarla e interactuar con ella. Por ejemplo, deslizando o presionando los puntos para que las diapositivas vayan avanzando.

El header de HTC tiene tres diapositivas que destacan cinco tecnologías nuevas:

HTC

Llamada a la acción – Call to Action (CTA)

A veces solo quieres que el usuario realice una acción. En este caso, el objetivo del sitio The Information es obtener la dirección de correo electrónico del visitante. Al eliminar todos los demás elementos y centrarse al 100% en la llamada a la acción, The Information se ha optimizado para la acción deseada:

The Information

El estilo Editorial

BMW ha reinventado su página web como si fuera una editorial y ofrece a sus usuarios historias y artículos, comenzando con el artículo principal en el encabezado sobre la historia del logotipo M y sus colores:

BMW

El estilo Catálogo

La página web de Target emula su catálogo físico con el encabezado que usa para mostrar las novedades para mujeres, seguido de los otros departamentos dentro de la tienda, que combinan colecciones, promociones, productos individuales e información.

Target

Tamaño de las cabeceras web en WordPress

El mejor lugar para comenzar, consiste en revisar la “Configuración de medios” en la pestaña “Apariencia” del Administrador de WordPress.

  • Saber el mejor ancho de imagen para una imagen en una publicación del blog (por ejemplo, 1024px para el tema Showcase Pro).
  • Conocer qué tamaño de imagen funcionará mejor en la barra lateral del tema (300).

Sin embargo, esta sección no te ofrecerá las mejores dimensiones de la imagen para tu página de inicio, imagen de encabezado web o banners de la página.

Wordpress settings

Dependiendo de tu tema, WordPress debe listar los tamaños de imagen óptimos para tu página de inicio/imagen de encabezado web en Apariencia –> Personalizar –> Imagen de encabezado de página principal. La mayoría de los tamaños que se muestran aquí tienen alrededor de 1600 px por 1050 px.

Cómo encontrar cualquier tamaño de imagen para el banner de un header

Introduce la URL de tu página web en el navegador Chrome y presiona Inspeccionar para obtener el tamaño exacto de la imagen siguiendo los pasos siguientes:

  1. Clic derecho + clic / Control + clic (Mac) en la página web.
  2. Clic Inspeccionar.
  3. Clic en el menú de 3 puntos para ver los Elementos en la parte inferior para que la vista de la página no responda.

Amazon

No todas las imágenes de la cabecera web de un banner tienen el mismo tamaño

Si el encabezado de Inicio (1600px x 1050px) no tiene el mismo tamaño que el encabezado del banner del Blog (1080px x 960px), usa imágenes que se vean bien en espacios largos y estrechos.

Tamaño de imagen de header recomendado para una página web

Aunque cada vez son más grandes las pantallas, el ancho de encabezado de 1024 px sigue siendo el tamaño más popular. Las páginas web están diseñadas para una resolución de 1024px por 768px.

Si quieres utilizar un encabezado de más de 1000 píxeles, utiliza uno de estos tamaños de encabezado:

  • 1280px
  • 1366px
  • 1440px
  • 1600px
  • 1920px

Son tamaños de resolución alta que se pueden ajustar sin ningún problema con resoluciones de más de 1920.

¿Cuál es el mejor tamaño de encabezado de web para tu página web?

Los tamaños de header de página web más populares:

TAMAÑO DE ENCABEZADO ANCHURA ALTURA RATIO
Tamaño de encabezado 1024 1024 256 4:1
Tamaño de encabezado 1024
Un tercio de la página (Altura extra)
1024 300 24:7
Tamaño de encabezado 1024
Media página
1024 384 8:3
Tamaño de encabezado 1024
Página completa (Hero Header)
1024 768 4:3
Tamaño de encabezado 1280
Un tercio de la página
1280 267 24:5
Tamaño de encabezado 1280
Un tercio de la página (Altura extra)
1280 375 24:7
Tamaño de encabezado 1280
Media página
1280 400 16:5
Tamaño de encabezado 1280
Página completa (Hero Header)
1280 800 8:5
Tamaño de encabezado 1366
Un tercio de la página
1366 256 16:3
Tamaño de encabezado 1366
Media página
1366 384 32:9
Tamaño de encabezado 1366
Página completa (Hero Header)
1366 768 16:9
Tamaño de encabezado 1440
Un tercio de la página
1440 300 24:7
Tamaño de encabezado 1400
Media página
1440 450 16:5
Tamaño de encabezado 1440
Página completa (Hero Header)
1440 900 8:5
Tamaño de encabezado 1600
Un tercio de la página
1600 300 16:3
Tamaño de encabezado 1600
Media página
1600 450 32:9
Tamaño de encabezado 1600
Página completa (Hero Header)
1600 900 16:9
Tamaño de encabezado 1920
Un tercio de la página
1920 360 16:3
Tamaño de encabezado 1920
Media página
1920 540 32:9
Tamaño de encabezado 1920
Página completa (Hero Header)
1920 1080 16:9

Conclusión

Lo primero que debes hacer es pensar qué quieres que hagan tus visitantes cuando lleguen a tu página web y optimizar tu header según tu objetivo. Asegúrate que las imágenes no superan los 72 ppp y que usan el formato de color RGB.

Cuantos menos elementos tenga tu encabezado de web, más enfocada estará la acción que se desea. Por el contrario, cuantos más elementos tengan las cabeceras web, se le pedirá más al usuario para que explore el contenido e interprete lo que le resulte más relevante.

No hay prácticas positivas o negativas, todo depende de tu audiencia y la acción que quieres que los usuarios lleven a cabo. Recuerda que cuanto más contenidos visuales tenga tu encabezado de web, mayor será el tiempo de carga y mayor será el tamaño de tu página web.

Siempre verifica la velocidad de carga de tu página web con SEOptimer para estar seguro de conseguir un buen balance entre una experiencia óptima de los usuarios y una velocidad de carga ideal.

No Comments

Post a Comment

Comment
Name
Email
Website

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.