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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<nav>
<ul>
<li>
<a href=“#”><span class=“icon home”></span> Inicio</a>
</li>
<li>
<a href=“#”><span class=“icon blog”></span> Blog</a>
</li>
<li>
<a href=“#”><span class=“icon shop”></span> Tienda</a>
</li>
<li>
<a href=“#”><span class=“icon mail”></span> Contacto</a>
</li>
</ul>
</nav>
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.icon {
display: inline-block;
vertical-align: bottom;
width: 1.0em;
height: 1.0em;
background-size: 100%;
margin: 0;
}
.icon.home {
background-image: url(iconmonstr-home-6-icon.svg);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/* Fuera de la media query */
nav ul li {
display: inline-block;
line-height: 1.05em;
font-size: 1.5em;
}
/* Media query para resoluciones intermedias */
@media (min-width: 600px) and (max-width: 980px) {
nav ul li {
font-size: 1.2em;
line-height: 1.1em;
}
}
/* Media query smartphones */
@media (max-width: 600px) {
nav {
text-align: left;
}
nav ul li {
display: block;
font-size: 1.8em;
}
}
|
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.