Contenidos
El diseño web clásico siempre permitía y estaba orientado a ofrecer menús de desplazamiento horizontal en la parte superior de las páginas, lo que permitía a los usuarios tener una buena experiencia de navegación. Al comprimir los elementos para un diseño responsivo, los criterios de referencia y visibilidad de los elementos de navegación quedan en entredicho, y no siempre es fácil encontrar la manera de mantenerlos utilizables.
La forma más sencilla e intuitiva, que no requiere hacer nada, es dejar que la etiqueta de estilo ‘relative’ funcione en los elementos del menú cuando se reduce la resolución, apretando en líneas sucesivas. No es muy complicado. Esta puede ser una buena solución cuando hay pocos elementos de menú, ya que si el número es muy elevado se puede perder visibilidad para otros contenidos y provocar una mala experiencia de usuario.
Sin embargo, suele presentar el inconveniente de que las opciones no se pueden personalizar con estilos CSS, por lo que la personalización se limita al soporte operativo del dispositivo, produciendo una experiencia de usuario menos completa, o incluso pobre.
Un menú de navegación que sea claro, conciso y fácil de navegar intuitivamente es esencial para una experiencia de usuario optimizada en el sitio web. La capacidad de respuesta del menú también es un factor clave. En el momento de escribir este artículo, más del 54% del tráfico web en todo el mundo se atribuye a los móviles. Con el diseño responsive mobile-first, los desarrolladores empiezan con el tamaño de pantalla más pequeño y luego lo van ampliando gradualmente, añadiendo más características y funcionalidades para tamaños de pantalla mayores. Las páginas web resultantes se ajustan automáticamente al tamaño de la ventana del navegador del usuario.
Este código añade un color de fondo negro y una sombra de caja gris a la cabecera. Para mantener la cabecera en la parte superior de la pantalla durante el desplazamiento, especificamos una posición fija y un desplazamiento cero desde la parte superior. También ajustamos la cabecera para que se extienda por todo el ancho del dispositivo.
En este código, especificamos propiedades de anchura y altura del 100 por ciento para el elemento nav con el fin de ajustar el contenido a la pantalla. A continuación, especificamos una posición fija para superponer el menú de navegación sobre el contenido principal de la aplicación. También seleccionamos un color de fondo negro para el elemento nav y especificamos que cualquier contenido de desbordamiento del elemento nav debe estar oculto.
El menú de navegación existe para ayudarnos a encontrar el contenido y debe ser sencillo e intuitivo.Cuando miramos un sitio web, nuestra expectativa es navegar con facilidad y tener una gran experiencia, pero desafortunadamente, no todos los sitios están diseñados tan bien como deberían. Parte de mi papel como diseñador web senior es garantizar que el usuario sepa dónde está, dónde ha estado y a dónde va. Diseñar un sistema de navegación sólido es, sin duda, uno de los aspectos más importantes del diseño de un sitio web. Esperemos que lo que sigue arroje algo de luz sobre los fundamentos de la navegación, los estilos populares y por qué es importante seguir las convenciones de la web.
En el caso del diseño web y, en particular, de los menús de navegación, el punto de partida es determinar qué tipo de funciones ofrece el sitio web y la jerarquía en la que debe mostrarse la información. El menú de un sitio web, en sus primeras fases, suele denominarse “mapa del sitio” y se suele elaborar en forma de diagrama u hoja de cálculo para mostrar los distintos niveles de información. No hay nada correcto o incorrecto a la hora de crear un mapa del sitio, de hecho animamos a nuestros clientes a que trabajen con cualquier formato con el que se sientan cómodos.
Una de las partes más difíciles de responder en un sitio web es “la navegación”, esta parte es realmente importante para la accesibilidad del sitio web, ya que es una de las formas en que los visitantes saltan sobre las páginas web.
Sin embargo, en lugar de aplicar una solución instantánea, en este post, vamos a caminar a través de cómo construir una navegación simple desde el suelo y el uso de las consultas de los medios de comunicación CSS3 y un poco de jQuery para mostrar en un tamaño de pantalla pequeño como los teléfonos inteligentes correctamente.
En esta sección, empezamos a dar estilo a la navegación. El estilo aquí es solo decorativo, puedes elegir los colores que desees. Pero en este caso, nosotros (yo personalmente) queremos que el cuerpo tenga un color suave y cremoso.
Si te fijas en el marcado HTML de arriba, ya hemos añadido clearfix en el atributo de clase tanto para el nav como para el ul para despejar las cosas cuando hagamos flotar los elementos dentro de él usando este hack CSS clearfix. Así que vamos a añadir las siguientes reglas de estilo en la hoja de estilo.
Los enlaces del menú estarán separados con un borde derecho de 1px, excepto el último. Recuerde nuestro post anterior sobre el modelo de caja, el ancho del menú se ampliará por 1px haciéndolo 101px como la adición de la frontera, por lo que aquí cambiamos el modelo de tamaño de la caja a border-box con el fin de mantener el menú sigue siendo 100px.
