Responsive Web Design

Mario González - Blog sobre desarrollo web

Responsive web design

|

Encontrada en múltiples traducciones al castellano (diseño web adaptativo, diseño web adaptable, diseño web responsivo, diseño web sensible, diseño web sensitivo, diseño web responsivo…), Responsive web design es sin duda una de las metodologías que más está acaparando la atención de los desarrolladores web en los últimos años. Concebido mediante la unión de tres principios que ya existían anteriormente (plantillas flexibles, imágenes flexibles y media queries), este enfoque nació para dar respuesta a uno de los mayores problemas que se avecinaba en el futuro de las webs: la inmensa cantidad de dispositivos con diferentes resoluciones desde los que se podía y podrá navegar por internet.

Este artículo explica en qué consiste el responsive web design, cuáles son sus ventajas, qué herramientas nos ayudan a implementarlo y algunos ejemplos en la red.

El problema

En los últimos años hemos vivido una auténtica explosión tecnológica en cuanto a dispositivos móviles se refiere. El número de modelos diferentes no para de crecer, al igual que el número de personas que acceden a internet desde estos dispositivos. Si a esto añadimos todos los modelos de tablets, de ebooks, de netbooks, de portátiles, de monitores de sobremesa, de consolas y de todos los gadgets inventados y por inventar que permiten navegación por páginas web, nos encontramos con que es prácticamente imposible determinar desde cuántas resoluciones de pantalla se va a visitar un sitio web. Para terminar de complicar las cosas, el futuro apunta a que la navegación por internet se irá incluyendo en cada vez más aparatos.

A la hora de diseñar una web, hace unos años podíamos pensar en 4 ó 5 resoluciones estándares, y el mágico planteamiento de hacer una web con un ancho fijo de 960 píxeles y centrarla resolvía el problema en la mayoría de los casos. Ya fuera en un portátil, en un sobremesa de 17″ o en un sobremesa de 19″, la web encajaba perfectamente. Luego empezaron a llegar los monitores gigantes y los smartphones, que empezaban a ofrecer una navegación mejorada. En los monitores gigantes, la web de 960px quedaba desolada en medio de un fondo eterno (o hacía que el usuario tuviera la ventana del navegador a medio monitor), y en los smartphones aparecía una reproducción ínfima donde era imposible leer nada sin hacer zoom y tener que ir desplazando la página de un lado a otro con el dedo para poder acceder a la información importante. Por supuesto, al cambiar la orientación del móvil había que volver a ampliar o reducir el zoom.

La solución (o una de ellas)

Una de las primeras soluciones fue comenzar a diseñar dos versiones de los sitios web, una para ordenadores y otra para dispositivos móviles. Mirando el user-agent (la identificación que envía el navegador cuando solicita una página web) podemos saber si la web se está visitando desde un móvil o no, y según este dato se muestra una versión u otra. Es el caso de los famosos subdominios «m», cuando visitamos www.dominio.com desde un móvil y nos redirige a m.dominio.com. Esta solución tiene varios inconvenientes, pero el más importante es que hay que desarrollar y mantener dos páginas. Otro es que hay más dominios que gestionar, y que tendremos contenido duplicado y los buscadores pueden penalizarnos. Sin embargo, esta solución tiene sus adeptos: hay muchos profesionales que defienden que la web para móviles debe ser otra, porque el uso que se le da es otro. Jakob Nielsen, experto en usabilidad, lo defiende en este artículo (en inglés): Mobile Site vs. Full Site.

Para resolver los problemas de esta solución, hacía falta conseguir una sola versión de la página que se viera bien tanto en un ordenador como en un móvil, una página que respondiera a los cambios de resolución. El diseñador Ethan Marcotte escribió un artículo en mayo de 2010 titulado Responsive Web Design (aquí en castellano), en el que sienta las bases de una metodología -y le da nombre- que soluciona el problema de los diferentes dispositivos.

¿En que consiste el diseño… «responsivo»?

Han aparecido varias traducciones para responsive web design: diseño sensitivo, sensible, adaptativo, adaptable, responsivo… Esta última, pese a no ser la elección correcta semánticamente, es la que más se está usando. Nosotros, mientras se asienta la traducción definitiva, usaremos la terminología original en inglés. Aquí un artículo donde se desarrolla el tema: ¿Cómo podemos traducir «Responsive Web Design»?.

Según explica Ethan Marcotte en su artículo, el responsive web design se basa en el uso conjunto de estas tres técnicas:

  • Estructura flexible
  • Imágenes flexibles
  • Media queries

Aunque por definición se ha establecido que responsive web design implica usar las tres técnicas, es cierto que podemos diseñar una web que responda a los cambios de resolución sin ser flexible, sólo con el uso de media queries o de JavaScript, si bien es cierto que con una estructura fija es más difícil solucionar el problema de las múltiples resoluciones.

Estructura flexible

Utilizar en una web una estructura (o layout) flexible implica algo que para muchos puede resultar difícil de aceptar: abandonar los píxeles. Se trata de dejar de ver un diseño pensando en medidas, y hacerlo pensando en proporciones, mirar los elementos siempre en relación con los demás. Por ejemplo, esto es lo que diríamos al plantear un diseño fijo:

  • La web tendrá un contenedor general que medirá 1000 píxeles de ancho e irá centrada.
  • Tendrá una cabecera que ocupe todo el ancho del contenedor.
  • Tendrá dos columnas, una con el contenido principal y otra lateral a la derecha, con contenido accesorio. La principal medirá 650 píxeles de ancho, la lateral 300 píxeles, y ambas estarán separadas por un hueco de 50 píxeles.

Y esto es lo que diríamos al plantear un diseño flexible:

  • La web tendrá un contenedor general que medirá tres cuartas partes del ancho del navegador, e irá centrada.
  • Tendrá una cabecera que ocupe todo el ancho del contenedor.
  • Tendrá dos columnas, una con el contenido principal y otra lateral a la derecha, con contenido accesorio. La principal medirá un 65% del ancho del contenedor, la lateral un 30% del ancho del contenedor, y ambas estarán separadas por un hueco que medirá un 5% del ancho del contenedor.

Con esto conseguimos que las proporciones sean las mismas, sea cual sea el ancho de resolución. Para trabajar de esta manera, lo más fácil es partir de una medida fija y calcular los porcentajes a partir de ella. Es importante tener en cuenta que, para establecer el ancho de un elemento, el porcentaje siempre es respecto al elemento que lo contiene. Por ejemplo, imaginemos que hemos diseñado nuestra estructura en Photoshop y le hemos dado un ancho al contenedor de 1000 píxeles. Establecemos que el contenedor rellene, por ejemplo, el 75% del ancho del navegador. A partir de aquí, podemos calcular todos los anchos de la estructura en porcentajes. Para calcular el porcentaje de ancho de un elemento, hay que realizar el siguiente cálculo:


ancho_porcentaje = ancho_fijo / ancho_fijo_padre

Así podemos determinar ya los anchos que necesitamos, aplicando la fórmula a cada elemento. En muchas ocasiones el porcentaje tendrá varios decimales, es importante dejarlos todos y no truncar ni redondear la cantidad.


#contenedor_general {
    width:75%;
    margin:auto;
}
#columna_principal {
    width:65%;
    margin-right:5%;
    float:left;
}
#columna_lateral {
    width:30%;
    float:left;
}

Es importante tener en cuenta que un ancho siempre es relativo a su contenedor. Así, aunque mirando estas líneas de CSS pueda parecer que el contenedor general y la columna principal no difieren mucho en su ancho (75% y 65%), en realidad el 75% es respecto al ancho del navegador y el 65% es respecto al contenedor general.

Usando anchos relativos hemos conseguido una estructura flexible, en la que los elementos siempre mantendrán las mismas proporciones, sea cual sea el ancho del navegador.

Imágenes flexibles

En el ejemplo anterior todo ha ido bien, pero si decidiéramos insertar una imagen de 300 píxeles de ancho en la columna principal, nos encontraríamos con un elemento que no mantiene las proporciones al cambiar el ancho del navegador, y que podría romper la estructura de la página al verse en un móvil. Para evitar esto, las imágenes también tienen que ser flexibles.

Hay varios métodos para conseguir esto. El más básico es hacer que la imagen se escale junto con la estructura si no tiene espacio para mostrarse completa. Para ello se usa esta propiedad CSS:


img { max-width:100% }

Mediante esta propiedad, la imagen se mostrará a su tamaño normal siempre que quepa en su contenedor, y si éste se reduce, la imagen se reducirá con él. El inconveniente de este método es que si la imagen original mide 300 píxeles y la vemos reducida a 80 píxeles, estaremos descargando más información de la necesaria, y esto en conexiones 3G es algo que hay que tener presente. Una solución a este problema es, además de hacer que la imagen se escale, crear diferentes imágenes y mostrar una u otra según la resolución. Esto lo podemos hacer mediante JavaScript, y si la imagen es un fondo y no una etiqueta <img>, podemos utilizar media queries, que veremos más adelante.

Otro método para que una imagen de tamaño fijo no nos rompa la estructura flexible es hacer que aquella se recorte si es necesario. Por ejemplo, si una imagen mide 300 píxeles y su contenedor se reduce hasta 200 píxeles, sólo se mostrarán los primeros 200 píxeles de la imagen. Esto provocará en la mayoría de los casos problemas de encuadre, pero puede servir en según qué imágenes.

Hay dos maneras de hacer esto: con un elemento <img> o como imagen de fondo. En ambos casos tenemos que crear un elemento html (que puede ser un <div>) que contenga la imagen.


<div class="imagen"><img src="foto.jpg" alt="" /></div>

O, si queremos usar una imagen de fondo, simplemente:


<div class="imagen"></div>

Y luego darle al contenedor las medidas de la imagen original, sin olvidar el max-width para que el contenedor también se reduzca cuando sea necesario:


.imagen {
    width:300px;
    height:220px;
    max-width:100%;
}

A partir de aquí, el código cambia según si optamos por una <img> o por un fondo. En el primer caso, si lo dejamos como está conseguiremos que el contenedor se escale correctamente, pero la imagen se seguirá viendo completa y se saldrá de su contenedor. Para lograr el recorte, hay que ocultar el overflow del contenedor:


.imagen {
    width:300px;
    height:220px;
    max-width:100%;
    overflow:hidden;
}

Con esto obtenemos el efecto buscado. Si queremos usar un background, basta con establecer la imagen de fondo, el efecto recorte ya se producirá automáticamente.


.imagen {
    width:300px;
    height:220px;
    max-width:100%;
    background:url('foto.jpg') no-repeat 0 0 transparent;
}

Si queremos mantener centrado el encuadre, podemos hacerlo con la posición de la propiedad background:


.imagen {
    width:300px;
    height:220px;
    max-width:100%;
    background:url('foto.jpg') no-repeat top center transparent;
}

Con esto ya tenemos una web totalmente flexible, pero ¿es suficiente? ¿Es lógico que en un móvil nuestra columna lateral mida menos de 100 píxeles? ¿Qué podemos mostrar en ese espacio? Lo lógico, y el tercer paso para conseguir nuestro diseño adaptable, es que si el espacio para mostrar información se reduce hasta el absurdo, entonces modifiquemos la disposición de los elementos. En nuestro ejemplo tendría más sentido que, si se está viendo la web desde una pantalla de 320 píxeles de ancho, la zona de contenido principal ocupe toda la pantalla, y la información que tenemos en el lateral pase a estar debajo de aquella. Para conseguir esto tenemos las media queries.

Media queries

Si lo que queremos es distribuir los elementos de la web de una manera u otra según la resolución de pantalla, necesitamos una manera de saber cuál es dicha resolución. Para eso tenemos las media queries, que nos permitirán cargar unas propiedades CSS u otras según la pantalla desde la que se esté viendo la web.

Recordando la manera de incluir un archivo CSS en nuestro código HTML, vemos que uno de los atributos que puede llevar la etiqueta link es media:


<link href="estilos.css" rel="stylesheet" media="screen" />

Este atributo permite cargar el CSS sólo cuando se esté viendo el HTML en una pantalla. CSS3 nos permite, además, establecer bajo qué dimensiones de pantalla queremos que se cargue el CSS:


<link href="estilos.css" rel="stylesheet" media="screen and (max-width: 480px)" />

Con esto le estamos diciendo al navegador que cargue el archivo estilos.css sólo si se está viendo la web en una pantalla y el ancho del navegador es igual o menor a 480 píxeles. En realidad las media queries se pueden usar dentro de la propia hoja de estilos, y así no hay que cargar más archivos. Podemos tener, dentro de estilos.css:


@media screen and (max-width:480px) {
    <!-- aquí irían los estilos que queramos aplicar a pantallas pequeñas -->
}

Con las media queries podemos preguntar no sólo por el ancho máximo del navegador, también por el ancho del dispositivo (no tiene por qué ser el mismo), un ancho concreto e incluso podemos preguntar por la orientación (portrait o landscape) en algunos dispositivos móviles.

En nuestro ejemplo flexible, si queremos que en pantallas pequeñas la columna lateral pase a la zona inferior y que desaparezcan los márgenes laterales, podríamos añadir al CSS que ya teníamos:


@media screen and (max-width:480px) {
    #contenedor_general {
    width:100%;
    }
    #columna_principal {
        width:100%;
        margin-right:0;
        float:none;
    }
    #columna_lateral {
        width:100%;
        float:none;
    }
}

Con estas líneas le estamos diciendo al navegador que si la web se está visualizando en un área menor a 480 píxeles, aplique los estilos necesarios para que el contenido principal rellene todo el ancho. Para comprobar esto en el ordenador podemos redimensionar la ventana del navegador y veremos cómo en el momento de bajar de 480 píxeles, la disposición de la web cambia.

Otros enfoques, como mobile first, que propone diseñar primero para los dispositivos pequeños y a partir de ahí ir añadiendo propiedades para los más grandes, utilizarían el CSS a la inversa. Primero pondrían los elementos sin flotar y sin márgenes, y luego lo añadirían para las pantallas mayores a 480 píxeles.

Para elegir los puntos en los que los estilos deben cambiar (o breakpoints), se han propuesto listas de medidas para incluir los dispositivos más usados, pero como cada vez hay más resoluciones y la idea detrás del responsive web design es que nos despreocupemos de las resoluciones, nuestro consejo (y el de otros) es que sea el contenido el que determine los puntos de cambio.

Conclusiones y recursos online

Como hemos podido ver, el responsive web design soluciona el problema de tener que crear y mantener dos versiones diferentes de la web. Con un sólo marcado y una única hoja de estilos, podemos conseguir que la web se adapte a diferentes resoluciones. Este blog (a fecha de este artículo) está desarrollado siguiendo esta metodología: su estructura es flexible, las imágenes de cabecera de los posts también, y la estructura se modifica según diferentes rangos de resolución.

Sin embargo, aunque el responsive web design ha llegado con fuerza, ya tiene sus detractores. En este artículo (en inglés) podemos leer hasta 11 inconvenientes de este método:
11 reasons why Responsive Design isn’t that cool!.

Si aun así seguimos queriendo realizar nuestro diseño adaptable o aprender más acerca del tema, aquí hay una lista de recursos en la red que nos serán bastante útiles:

Hasta aquí este artículo que pretende presentar esta metodología cada vez más extendida. Más adelante prepararemos un tutorial para hacer una maquetación completa con responsive web design.

¿Qué opinas?

Tu dirección de correo electrónico no será publicada. * Campos obligatorios