¿Qué es Responsive Web Design?

El responsive web design es una técnica de diseño y desarrollo web que crea interfaces adaptables a cualquier dispositivo electrónico.

En otras palabras, con esta técnica el sitio web se visualiza correctamente en teléfonos inteligentes, tabletas, computadores de escritorio y otros dispositivos.

Ethan Marcotte creó el responsive web design y lo presentó en un conjunto de artículos en A list apart. En 2011, Marcotte lanza un libro que lleva el mismo nombre de la técnica.

Sin embargo, el concepto es anterior a Marcotte.

En 2008, la W3C ya había presentado una técnica similar llamada One Web, que busca que los contenidos y servicios de una web siempre estén disponibles sin importar el dispositivo electrónico.

Cómo funciona el diseño adaptable

El responsive web se apoya en diferentes metodologías. Sin embargo, la más común son las consultas de medios, que identifica el espacio disponible en pantalla y ejecuta un grupo de definiciones CSS.

La consulta de medios puede realizarse en el HTML o en el CSS, y su sintaxis es:

consulta + medio + (medida) { conjunto de definiciones }

Así, una consulta de medios, para una pantalla de teléfono móvil puede ser:

@media screen and (max-width: 600px) {
   body {
      background: green;
   }
}

Lo que sucede aquí es:

A través de @media, el navegador inicia la consulta.
Si se trata de una pantalla (screen) la consulta continúa.
Si la pantalla tiene un espacio disponible menor o igual a 600 pixeles, se ejecutan las declaraciones CSS.
En este caso, el CSS modifica el fondo de la página con un color verde.

Ahora, utilizando el mismo archivo de estilos, para cambiar el color de fondo (azul) cuando el espacio en pantalla sea mayor a 600 pixeles, se anexa:

@media screen and (min-width: 600px) {
   body {
      background: blue;
   }
}

La diferencia entre uno y otro es la condición de la medida: en el primero es max-width, y el segundo, min-width.

Juan Carlos Morales S. - Comunicador y educador

¿Estás buscando un profesor digital?

Aumenta las competencias digitales de tus estudiantes o colaboradores. Como comunicador y magister en educación digital, estoy preparado para ser parte de tu estrategia.

Conversemos

Archivo CSS de ejemplo

Por tratarse de CSS, las instrucciones del responsive web design se ejecutan del lado del cliente, es decir, es posible revisar el código de cualquier sitio web.

Para ampliar el aprendizaje, puede revisar las definiciones CSS del sitio web de e-Lexia.com.

Para validar las diferentes instrucciones, revise el sitio desde el celular, la tableta y el computador. O, desde el computador, modifique el ancho de la ventana del navegador.