Diseño, Tutoriales | 24 de marzo de 2015

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:

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:

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:

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.9272

¿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í:

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:

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:

  1. Se reduce el margen a los costados del texto principal
  2. Luego, el texto destacado se centra y cubre la foto
  3. Luego, los artículos recientes pasan a mostrarse en 2 columnas
  4. Luego, el menú se oculta tras el ícono tipo hamburguesa (el de 3 líneas)
  5. 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

También te podría interesar:

Quise diseñar y desarrollar un sitio web en un día… Esto fue lo que pasó

Hoy te voy a contar la experiencia que tuve trabajando a contra reloj cuando traté de hacer un sitio completo en un día. Esto implica diseñarlo y desarrollarlo prácticamente desde cero. Partamos por el inicio: ¿Por qué? Seguro te preguntas por qué quise hacer un sitio en un solo día. Bien, partamos por allí. Hace mucho […]

Seguir leyendo...

Introducción a Invision Studio – Aplicación de Diseño UI

En el tutorial de hoy haremos una introducción a la aplicación Invision Studio, destinada al diseño de interfaces digitales. Esta aplicación es una alternativa muy interesante a Sketch, Adobe XD y Figma y tiene características muy similares, aunque a mi parecer destaca principalmente por las capacidades de animación. Un detalle que olvidé mencionar en el […]

Seguir leyendo...

Cuando el diseño de logos no importa

En el video de estilo libre de hoy comparto contigo la conversación que tuve con un amigo sobre el estado actual del diseño de logos y de por qué en algunos casos no es importante. Hasta la próxima. Un abrazo, @FranciscoAMK

Seguir leyendo...

Hay 8 opiniones

  1. Petición: me gustaría que algún día nos contaras algo sobre como incorporar fuentes creativas a nuestros proyectos web. Por ejemplo, con Typekit o alguna otra aplicación en la nube. ¡1000 Gracias!

  2. ¡Hola Tocayo!
    Sigo tu blog desde hace un tiempo, pero por fin me animo a comentar.
    Excelente introducción, fundamental para cualquiera que quiera comprender más de este mundo digital.
    ¡¡¡Muchas gracias!!!
    Saludos desde Colombia.

  3. Tienes conceptos fundamentales para el desarrollo bien muy bien explicados. Además, no conocía el primer método para colocar media queries.

    Por cierto, colocaré un link de esto en mi proximo post de CSS. Le quería informar.

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 8.226 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.