Tutoriales de diseño web

HTML5, CSS3 y JQuery

volver al índice

Responsive design

Escrito por Laura Chuburu

Responsive design y media queries

El responsive design es una técnica de diseño web que utiliza las reglas media queries para lograr un diseño adaptable a cualquier dispositivo.

Las reglas media queries son reglas CSS especiales que se aplican según la resolución de pantalla. Estas reglas se escriben en la misma hoja de estilos del sitio y empiezan con una línea de código especial donde determina en qué resolución de pantalla deben aplicarse, por ejemplo:

@media screen and (max-width: 1100px) {
acá van las reglas CSS escritas normalmente una debajo de la otra
}

La primer línea se podría traducir como una frase condicional de la siguiente manera: "Si el medio es una pantalla y tiene un ancho máximo de 1100px, entonces aplicar las siguientes reglas". Y esas reglas se escribien entre las llaves.

El ejemplo completo quedaría:

@media screen and (max-width: 1100px) {
body {background-image:none}
}

En el código anterior le estamos indicando al navegador que si el dispositivo mide menos de 1100px no muestre la imagen de fondo del body.

Se pueden escribir varias reglas dentro de una misma regla media querie, quedaría asi:

@media screen and (max-width: 1100px) {
body {background-image:none}
header {tet-align:center}
}

Un sitio web habitualmente tiene varias reglas media queries para realizar cambios en diferentes resoluciones. Por ejemplo:

@media screen and (max-width: 1100px) {
body {background-image:none}
header {tet-align:center}
}

@media screen and (max-width: 600px) {
h1 {font-size:45px}
.redes {display:none}
}

En el código anterior, la primer regla media querie se aplica cuando el navegador tiene una resolución menor a 1100px y la segunda, menor a 600px.

Medidas de los dispositivos y de las reglas media queries

Como la cantidad de dispositivos y resoluciones de pantallas es casi infinita, no podemos (ni es necesario) hacer una regla por cada dispositivo. Las reglas media queries se pueden ir creando a medida que necesitemos ajustar el diseño y esa medida es totalmente independiente de cualquier dispositivo. Lo ideal es que si chequeamos un sitio responsive en una pc y modificamos gradualmente el ancho del navegador, los elementos se vayan acomodando de manera fluida sin que queden puntos sin resolver aunque no exista un dispositivo con esa resolución.

Max-width, min-width y concepto mobile first

Cuando empezamos a aplicar esta técnica hace algunos años, primero maquetábamos el sitio para la versión de escritorio y luego creábamos las reglas media queries para empezar a adaptarlo a dispositivos menores. En ese caso, utilizábamos max-width ya que aplicábamos las reglas a resoluciones menores a la que ya estaba definida.

Actualmente le damos mayor prioridad al diseño para dispositivos móviles, una tendencia que se denomina Mobile First. Esto hace que empecemos pensando el diseño del sitio para dispositivos móbiles y luego lo adaptemos a las resoluciones mayores. Por esta razón ahora las reglas media queries las utilizamos con min-width que aplica las reglas CSS a resoluciones mayores.

Etiqueta meta especial para sitios responsive

Cuando diseñamos un sitio responsive, tenemos que colocar en el head de todos los archivos html la siguiente línea:

<meta name="viewportcontent="width=device-width,initial-scale=1">

Como por defecto los smartphones reducen la vista de un sitio web para que encaje en la pantalla, esta etiqueta le indica al navegador que no lo haga.

Diseño web elástico y responsive

Para usar más eficientemente las reglas media queries, nos conviene partir de la base de un sitio con diseño elástico, donde especialmente las medidas de los anchos estén resueltas en porcentajes. De esta manera, con media queries simplemente hacemos ajustes. Cuanto más elástico sea nuestro diseño, menos reglas media queries vamos a necesitar.

Adaptar un sitio existente a dispositivos móbiles

En este momento muchas empresas ven la necesidad de que su sitio actual (diseñado para PC) se adapte a todos los dispositivos. El problema es que partiendo de un sitio con diseño rígido donde todas las medidas están en píxeles y muchas soluciones del maquetado sólo funcionan para un ancho de pantalla fija, es muy difícil llegar a un buen resultado, por lo que la mayoría de las veces conviene remaquetar el sitio.

Por otro lado los sitios que deben verse y navegarse cómodamente en un celular deben tener un diseño mucho más limpio y con el contenido mejor organizado que los diseños para pc. Por lo cual el problema no se resuelve simplemente escribiendo reglas mediaqueries, sino que el proyecto requiere un replanteo desde la comunicación y la navegabilidad.

Licencia Creative Commons
Tutoriales de diseño web por Laura Chuburu se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.