¿Qué es el responsive design?

El peso que empiezan a tener en las analíticas las visitas desde terminales iOS y Android hacen que los diseñadores y responsables de sitios web empiecen a plantearse seriamente la necesidad de adaptar sus diseños y contenidos para dispositivos móviles. Cuando esta necesidad surge, se nos plantean dos alternativas:

1.- Crear una versión alternativa de nuestro sitio específica para móviles. Sitios web como marca utilizan una versión completa para navegadores de escritorio y otra alternativa para navegadores de dispositivos móviles. Generalmente, esta opción es conveniente cuando no solo necesitamos adaptar el diseño sino también el contenido a mostrar. Sitios muy pesados, con muchas imágenes y contenido en su versión completa pueden resultar lentos de cargar en dispositivos móviles que disponen de menos recursos de hardware (RAM, procesador…) y velocidades de conexión a internet más lentas. En este caso se desarrolla una versión «light» de la web en cuanto a contenidos y se aprovecha para adaptar también el diseño.

2.- Publicar la misma web para escritorio y móviles usando «responsive design». El responsive design o diseño adaptable, consiste en hacer que nuestra web adapte su diseño en función de ciertos parámetros del dispositivo que navega por nuestro sitio web, generalmente el tamaño de la pantalla. Los contenidos son idénticos (en todo caso se muestran u ocultan algunas partes de la maquetación) pero la apariencia y colocación de los elementos cambia para adaptarse al tamaño de la ventana del navegador que muestra la web.

Ejemplo de responsive design con 4 media queries.

Esto se consigue gracias a CSS3 y las media queries o consultas de medios, con los que vamos a poder aplicar distintas reglas de estilos a los mismos selectores CSS en función de varias propiedades del dispositivo. La teoría es muy sencilla, básicamente se trata de indicarle al navegador en cuestión algo así como «si la anchura de la ventana es superior a 960px usa estos estilos y si es inferior usa estos otros», traducido al cristiano.

Cómo usar las media queries

Primero, evita que el dispositivo redimensione automáticamente la página. Los navegadores móviles encajan automáticamente el contenido de la página web que están mostrando salvo que les digamos que no lo hagan. Si esto sucede, nuestros media queries no funcionarán porque la página ya se habrá redimensionado y adaptado al tamaño de la ventana del dispositivo. Veremos la misma versión de nuestra web que en navegadores de escritorio, pero mucho más pequeña. Para conseguir esto utilizamos en el código HTML de nuestra página la siguiente etiqueta meta:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

Con la etiqueta meta «viewport» le indicamos que deje la página tal y como está, sin escalar. El resto del trabajo lo harán nuestros media queries.

A continuación, implementamos los distintos estilos adaptados a cada formato utilizando los media queries. Lo podemos hacer de dos maneras distintas:

1.- Creando distintos archivos css para cada diseño y cargandolos en nuestra página con la etiqueta <link>. En este caso crearemos los archivos css para móvil, tablet y escritorio, con los mismos selectores css y modificando las propiedades en cada uno de ellos adaptadas a cada diseño. A continuación los vincularemos con la etiqueta <link> y ahí introduciremos nuestros media queries. Por ejemplo, tendremos tres archivos css: movil.css, tablet.css y escritorio.css:

<link rel=»stylesheet» media=»all and (max-device-width: 480px)» href=»movil.css»>
<link rel=»stylesheet» media=»all and (min-device-width: 481px)» href=»tablet.css»>
<link rel=»stylesheet» media=»all and (min-device-width: 769px)» href=»escritorio.css»>

Con esto le estamos indicando al navegador que visite nuestra web que «si la anchura en pixels del dispositivo es de 480px como máximo cargue los estilos de «movil.css», si está entre 481px y 768px cargue «tablet.css» y si es superior a 768px cargue «escritorio.css». De esta forma tendremos los estilos duplicados pero con distintas propiedades, y los media queries que estamos utilizando obligarán al navegador a cargar uno u otro archivo css.

2.- Usando un solo archivo de estilos css e implementando los media queries en él. La teoría es la misma pero solo usamos un único archivo de estilos, por ejemplo estilos.css. Primero, vinculamos el archivo css en nuestro documento html como siempre:

<link rel=»stylesheet» href=»estilos.css»>

A continuación, dentro de nuestro archivo css, usamos la propiedad @media para definir los distintos estilos según el tamaño de la ventana del navegador o dispositivo:

@media screen and (max-device-width: 480px) {
aside a {
display: none;
}
}

@media screen and (min-device-width: 481px) {
aside a {
display: block;
padding-top: 10px;
}
}

@media screen and (min-device-width: 769px) {
aside a {
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
}
}

Esta hoja de estilos ocultaría los links situados dentro de la etiqueta <aside> para tamaños inferiores a 480px, los mostraría unos debajo de otros para tamaños entre 481 y 768px y en fila para tamaños superiores a 769px.

Implementar un diseño adaptable en nuestra web es técnicamente muy sencillo y si ya conocemos y trabajamos con CSS se reduce a realizar tres o cuatro diseños de nuestra web con distintas hojas de estilo. Dependiendo de las especificaciones de la maquetación y el público objetivo, podemos generar 3 layouts (móvil, tablet, escritorio) o 4 (móvil en vertical, móvil en horizontal, tablet y escritorio). Probarlo también es muy sencillo y no hace falta usar un dispositivo móvil, porque si os fijáis lo único que determinamos en los media queries es la anchura de la ventana del navegador, por lo que si redimensionais la ventana de este mismo blog (que utiliza responsive design :-)) en vuestro navegador podréis comprobar como se va adaptando el layout a las distintas anchuras.

En nuestros cursos profesionales de diseño y programación web y HTML5 ya incluimos responsive design dentro de los contenidos asi como todas las nuevas propiedades de CSS3 para que estéis a la última en vuestra formación.

Referencias y más información:

Ejemplos reales de responsive design usando media queries – mediaqueri.es

Referencia oficial de uso de los media queries – W3C.org

Diseño web adaptativo – Wikipedia.org

A list apart (en inglés) – alistapart.com