Introducción al responsive web design y los media queries
El concepto de responsive web design se refiere al uso de diferentes técnicas para hacer que un sitio web se adapte, en cuanto a su diseño, al tamaño de la ventana desde la cual se está visualizando.
Puedes verlo en acción cuando agrandas o achicas la ventana del navegador en tu computadora, sin embargo, su mayor utilidad es la de permitir que un sitio web se pueda visualizar perfectamente bien en cualquier dispositivo móvil de navegación, sin la necesidad de crear diferentes versiones del mismo o tener que hacer zoom para poder leer los textos.
Gracias al responsive web design o diseño web adaptable, podemos crear un sólo sitio web y ofrecer experiencias de navegación personalizadas para móviles, tablets y computadoras.
La base principal del responsive web design son los media queries.
¿Qué son los media queries?
Puesto de forma sencilla, son un módulo de CSS que nos permite identificar el medio en el cual se está mostrando nuestro sitio y bajo qué condiciones para, en base a esa comprobación, aplicar estilos específicos.
Usando media queries, podremos saber, por ejemplo, cuándo el sitio se está presentado en una ventana que mide 768 pixeles de ancho o menos, o cuando se está enviando a imprimir.
Hay 2 formas de usar los media queries:
1. En la llamada al archivo CSS
Usando este método le indicamos al navegador que utilice el archivo CSS que estamos cargando solo si las condiciones se cumplen. Veamos un ejemplo:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="ejemplo.css" >
Con esta línea, que debiera ir dentro del head de nuestro HTML, estamos cargando la hoja de estilos ejemplo.css, pero sus propiedades solo aplicarán si el sitio se está viendo en una pantalla, dentro de una ventana de máximo 768 pixeles de ancho.
El problema con este enfoque es que cada vez que queramos cargar estilos de acuerdo a ciertas condiciones, tendríamos que cargar un archivo nuevo, y eso, por supuesto, hace nuestro sitio más lento al añadir solicitudes HTTP adicionales.
2. Dentro del archivo CSS
Esta es la forma más recomendada, ya que nos permite tener múltiples comprobaciones, sin la necesidad de cargar diferentes archivos por cada una de las media queries que hagamos.
La forma de escribir un media query en CSS, para obtener el mismo resultado que en el ejemplo anterior, es la siguiente:
@media only screen and (max-width: 768px) {
/* Aquí van todos los estilos CSS */
}
Veamos un ejemplo
Supongamos que tenemos un div con la clase «caja» y queremos que se muestre con un ancho de 500 pixeles en ventanas grandes, pero que se muestre con un ancho del 100% al ser visto en ventanas de 700 pixeles de ancho o menos.
Tendríamos que hacer lo siguiente:
.caja {
width: 500px;
}
@media only screen and ( max-width: 700px ) {
.caja {
width: 100%;
}
}
Aquí tienes el ejemplo funcionando, si estás viéndolo desde un computador, prueba reducir el tamaño de la ventana y ver cómo cambia el ancho del div:
See the Pen XJOeZr by Francisco Aguilera G. (@FranciscoAMK) on CodePen.
¿Notaste que los estilos de el div y el párrafo no están dentro de un media query? eso es porque todo lo que no está dentro de los media queries se aplica de manera predeterminada, y como me interesa que, por ejemplo, el color del fondo del párrafo sea el mismo, independientemente del tamaño de la ventana, lo dejo fuera.
¿Cómo y cuando usar media queries?
En los inicios de la era responsive, lo que se recomendaba era crear los estilos estándar para tu sitio y luego, al final de tu CSS, añadir ciertos media queries basados en dispositivos específicos y hacer que el sitio se adaptara a ellos.
De este modo terminábamos con archivos CSS que lucían más o menos así:
/* Aquí van los estilos generales del sitio */
@media only screen and ( max-width: 1024px ) {
/* Aquí van los estilos para iPad horizontal */
}
@media only screen and ( max-width: 768px ) {
/* Aquí van los estilos para iPad vertical */
}
@media only screen and ( max-width: 480px ) {
/* Aquí van los estilos para iPhone horizontal */
}
@media only screen and ( max-width: 320px ) {
/* Aquí van los estilos para iPhone vertical */
}
Si bien este método sirvió durante un tiempo, la proliferación de dispositivos móviles con diferentes tamaños y resoluciones hicieron que este enfoque quedara obsoleto.
Lo que se recomienda hoy, es tener media queries destinados a cada área de la página y que la medida en la cual se haga el quiebre (o breakpoint por su nombre en inglés) dependa exclusivamente en el requerimiento de cada elemento. Esto significa en la práctica que ya no vamos a tener sólo 4 media queries, sino varios de ellos por cada sección.
Así entonces, si tenemos una cabecera que contiene un menú y un logo y notamos que estos elementos comienzan a tocarse cuando la ventana se reduce hasta 814 pixeles, entonces ese es el ancho que usaremos para crear el quiebre.
Un ejemplo del uso de media queries con este enfoque sería el siguiente:
/*
* Cabecera
*/
.logo {
width: 300px;
float: left;
}
.menu {
width: 500px;
float: right:
}
@media only screen and ( max-width: 814px ) {
.logo {
width: 200px;
}
.menu {
width: 450px;
}
}
@media only screen and ( max-width: 660px ) {
.logo,
.menu {
width: 100%;
float: none;
}
}
Y esto mismo se puede repetir tantas veces como sea necesario, teniendo media queries propios para el pie de página, la barra lateral o cualquier otro elemento dentro de la página.
Este enfoque lo puedes ver aplicado en mi página de inicio, en donde si comienzas a angostar la pantalla lentamente, verás que comienzan a pasar cosas en diferentes objetos en la medida en cada uno de ellos lo requiera para su correcta visualización:
- Se reduce el margen a los costados del texto principal
- Luego, el texto destacado se centra y cubre la foto
- Luego, los artículos recientes pasan a mostrarse en 2 columnas
- Luego, el menú se oculta tras el ícono tipo hamburguesa (el de 3 líneas)
- Finalmente, los cursos destacados se muestran en 1 sola columna
De esta forma la apariencia del sitio web no está basada en la medida de un iPad o de un iPhone, sino que se basa en sus propios requerimientos y se adapta correctamente a cualquier tamaño.
Espero que con esto ya tengas una idea sólida acerca de qué es el responsive web design y del rol que cumplen los media queries.
Ahora bien, si te gustó lo que vimos en este pequeño tutorial, de seguro te va a encantar la noticia que tengo para contarte:
Se trata de que ya estoy trabajando a full, en la creación de la versión 2.0 de mi curso Diseño web: HTML y CSS desde cero.
Esta nueva versión del curso trata los temas con el mismo nivel de profundidad que la anterior, pero tiene un enfoque completamente orientado al diseño web adaptable o responsive web design.
Es por eso que todas las clases han sido re-estructuradas y re-grabadas, con nuevos ejercicios, nuevos contenidos y nuevas técnicas.
Si te interesa este curso, mira los detalles en esta página y regístrate para poder compartir contigo algunas clases de avance y enviarte un importante descuento el día del lanzamiento.
Nos vemos la próxima semana con otro tutorial de diseño web, en donde te explicaré qué es y por qué no aplico el mobile first en los sitios web que desarrollo.
Un abrazo,
@FranciscoAMK