Cambiar la navegación del sitio para que se adapte a diferentes dispositivos con media query

En un artículo anterior comenzamos a analizar los usos de media query para poder crear una estructura adaptable a todos los tamaños de pantalla. Con el uso de media query podemos manipular el CSS y activar o desactivar propiedades para que el sitio web se torne responsive.

Media query CSS3 para hacer un sitio web responsive que se adapte al tamaño de pantalla

Ir al artículo

 

Un elemento muy importante es la navegación, es la conexión entre diferentes partes del sitio y siempre debería estar visible y ser fácil de usar. No todos los usuarios piensan del mismo modo y hay ciertos esquemas de menú que son más familiares que otros.

EJEMPLOS DE ESQUEMAS DE NAVEGACIÓN

El menú se transforma en desplegable, haciendo click en un link “Menú”

Otro menú que se convierte en desplegable, pero el contenido del menú para pantallas más pequeñas contiene más elementos

La navegación cambia de lugar y tamaño pero no de elementos

Dos cambios: navegación general se convierte en desplegable, así mismo los botones de las redes sociales

Menú que mantiene el mismo contenido pero cambia su tamaño

Los menús desplegables son los más vistos, ya que ocupan menos espacio cuando no están siendo utilizados. Otro enfoque similar es colocar un select box a modo de menú.

Quienes cuentan con el espacio o una navegación pequeña eligen conservar sus elementos originales y realizar cambios en el tamaño de la fuente, el padding, y la alineación.

Estructura del menú

En este caso trabajaremos con un menú sencillo horizontal y lo modificaremos para que se convierta en un menú vertical en las resoluciones más pequeñas.

Consiste de un elemento nav, que contiene una lista desordenada — ul — con tantos elementos li como sean necesarios. Cuatro vínculos formarán parte de la navegación de este ejemplo.

Dentro de cada elemento li colocaremos un enlace, y dentro del elemento a añadiremos el ícono y el nombre del vínculo.

El menú tiene la misma estructura para cada resolución de pantalla, lo que cambiaremos con media queryserá su disposición, tamaño y estilo.

Navegación responsive

El menú para los tamaños de pantalla mayores es un listado horizontal, que consiste en un ícono y la descripción del enlace. Para los dispositivos móviles el menú se torna vertical, con el tamaño de ícono y texto más grande para ayudar a que el usuario haga click en cada ítem sin ningún esfuerzo.

Para poder lograr este cambio nos valemos de media features donde especificaremos los estilos que deben ser aplicados sobre el menú en cada caso.

No trabajaremos con medidas de ancho, utilizaremos tamaño de letra y padding en unidad relativa — em — para poder redimensionar los elementos de la navegación.

Nuestro tamaño de fuente base es de 16 pixeles, entonces en nuestro diseño 1 em es equivalente a 16 pixeles.

ÍCONOS CON SVG

La tecnología SVG es independiente de la resolución de la pantalla. A continuación vemos una sección del menú con un zoom de 400%, y podemos apreciar la buena calidad de la fuente y del ícono, que se ven con total nitidez.

¿Por qué es mejor usar imágenes SVG?

Es importante tener en cuenta que en el tamaño original los íconos se ven correctamente en las pantallas con baja densidad de pixeles. Si el usuario hace zoom, o el dispositivo tiene retina display el ícono se verá pixelado y de mala calidad. Tomar en cuenta estos detalles proporcionan una mejor experiencia a las personas que tienen una dificultad visual, o los visitantes que utilizan un dispositivo táctil y acostumbran a utilizar un zoom alto al navegar

Ventajas de implementar imágenes SVG en nuestro sitio web

Ir al artículo

Usando clases para colocar íconos

El primer paso es crear una clase que será común a todos los íconos, que reúna los atributos que todos van a necesitar para no tener que repetirlos varias veces dentro de la hoja de estilos. Mi clase para los íconos será icon y en el HTML la coloqué dentro de una etiqueta span.

Definimos el ancho del ícono como 1.0 em y su altura también, esto hará que pueda redimensionarse cuando su contenedor lo haga. Es importante especificar el tamaño del fondo con background-size, ya que la imagen svg debe ser redimensionada.

CAMBIAR EL TAMAÑO DE LOS ELEMENTOS SEGÚN EL TAMAÑO DE PANTALLA

En este caso, el elemento li es quien marca el tamaño en pixeles que adquirirá el ícono. Cambiaremos el tamaño de fuente del elemento li en las diferentes media query para adaptar el tamaño del ícono y del texto.

La imagen contiene tres capturas de la consola de desarrollador de Google Chrome que nos indica el ancho y el alto en pixeles de todos nuestros elementos, ya sea que su medida en el CSS fuese en pixeles, em o porcentaje. El ícono sigue midiendo 1 em pero su tamaño en pixeles ha cambiado.

A continuación pueden ver las tres instancias en las que declaro atributos para nav ul li.

Display: inline-block

Cuando aplicamos el atributo display: inline-block a un elemento se comportará como un elemento de bloque y un elemento de línea al mismo tiempo. Por esta razón una lista que normalmente sería vertical puede ser transformada en un listado horizontal.

Display: block

Para que la lista regrese a la disposición vertical basta con aplicar display: block en la media query.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top