Tutorial: Responsive Web Design I

Tutorial de Responsive Web Design, un conjunto de técnicas en HTML5 y CSS3 para que una web se adapte a cualquier dispositivo.

archivado en: HTML/CSS || 9 octubre, 2012

1. Diseño elástico

Desconozco los datos de otros lugares del mundo, pero al menos en España, cada vez son más los internautas que utilizan un móvil para navegar. Según  un estudio de The Cocktail Analysis presentado en septiembre de 2012:

El 59% de los internautas españoles tiene un ‘smartphone’ y el 77% de ellos se conecta a diario

El uso de tablets también crece, situándose en el 23% de penetración, 15 puntos más que en 2011

Tablets, smartphones, navegadores web... los usuarios pueden llegar a una web a través de una gran variedad de dispositivos y cada uno con una resolución de pantalla distinta. Desde los 240 píxeles de ancho de algunos smartphones hasta los más de 1200 que puede tener un monitor, hay muchas variantes, pues, para complicar aún más la situación, en móviles y tabletas las páginas pueden verse en horizontal o en vertical. En fin, un auténtico lío para el diseño web.

Una manera de resolver este problema es detectar mediante JavaScript qué navegador está empleando el ordenador cliente y cargar una hoja de estilo específica, pero no es recomendable ya que te obliga a desarrollar varias y luego cualquier cambio, que con toda seguridad será necesario, obliga a repasarlas todas.

Otra, más elegante y cómoda es programar la web mediante una técnica que en inglés se denomina «responsive web design», que podemos traducir al español como «diseño elástico» o «diseño adaptable». En cierta manera se parece al diseño fluido que se usaba hace unos años y que perdió popularidad cuando se dio por sentado que todos los monitores alcanzaban cuanto menos los 800 píxeles de ancho, pero incorpora nuevas posibilidades de CSS3 que permiten no solo adaptar las cajas (divs y demás), sino también reacomodarlas en función del ancho del navegador.

Valga como ejemplo esta web. En resoluciones pequeñas, entre otros cambios el sidebar deja de estar a la derecha y se pasa a la parte inferior, donde ya no está en vertical, sino en una cuadrícula de una o más cápsulas.

Para ver cómo queda una web en distintas resoluciones basta con ampliar o reducir la ventana del navegador, aunque también se puede usar una opción de Firefox, Resize > View Responsive Layouts, o alguna aplicación web, como esta de mattkersley.com.

Además, para terminar de comprender el concepto, podemos visitar alguna de estas webs:

bostonglobe.com alispart.com andersonwisse.com

Bueno, pues ya que hemos entendido qué es eso del responsive web design, vamos a ver cómo ponerlo en práctica. En este primer tutorial conoceremos tres recursos básicos: las medidas relativas, las imágenes al 100% y las media queries.

2. Medidas relativas

El píxel ha muerto. En un diseño responsive, hay que olvidarse del píxel, que solo se usa para especificar un ancho mínimo o máximo, como veremos más adelante. Para todos los demás casos —como  el ancho, el margen o el padding de cualquier caja— hay que emplear medidas relativas.

width: 80%; margin: 0.5%;

padding: 1%;

Y lo mismo sucede con las fuentes. En responsive no se definen en píxeles, sino en em,que equivale al  punto tipográfico : es el ancho de la letra M de la tipografía que se está usando. Suele corresponder a 16 píxeles, pero no recuerdo qué navegador la interpretaba como 12.  (En riddle.pl hay  un conversor de medidas muy bueno para convertir tamaños exactos).

font-size: 1em;

Para estar seguro de que los navegadores tomarán de partida la equivalencia 1em=16píxeles, conviene especificar en el selector body que el tamaño de la fuente sea del 100%.

body { font-size: 100%;

}

Importante: las medidas em se heredan, es decir, un elemento dentro de un elemento tomará como referencia el superior para calcular cuánto es un em. Por ejemplo, si tenemos una caja donde hemos definido una fuente como 0.5em y dentro de esa caja otra con una fuente 0.25em, esta última fuente tendrá 1/4 de tamaño respecto a la 1/2 de tamaño de la fuente general.

<div style="font-size: 0.5em"> Soy una fuente con tamaño 0.5 respecto a la fuente base

<div style="font-size: 0.25em">

Soy una fuente con tamaño 0.25 respecto a la fuente anterior

</div>

</div>

Tip: Además de los porcentajes relativos para el margen y el padding, también se pueden usar em. Y para no tener que andar calculando cuánto se añade a una caja por los padding, se puede añadir la propiedad box-sizing, que otro día explico en detalle.

Práctica

Con el objetivo de entender mejor lo explicado hasta aquí, podemos hacer la típica web con un contenedor central, un cuerpo central a la izquierda y un sidebar a la derecha.

El código del archivo html podría ser similar a este:

<!DOCTYPE html> <html>

<head>

<title> Práctica responsive

</title>

<link rel="stylesheet" type="text/css" media="all" href="estilos_responsive.css" />

</head>

<body>

<div id="contenedor_principal">

<div id="cuerpo_central">

Soy el cuerpo central del documento

</div> <!--cierra el cuerpo central -->

<div id="sidebar">

Soy el sidebar

</div> <!--cierra el sidebar -->

</div> <!--cierra el contenedor principal -->

</body>

</html>

(No uso las etiquetas semánticas, sino divs normales para no liar más la explicación).

Y el de la hoja de estilo algo así:

body { margin: 0 auto;

font-size: 100%;

vertical-align: baseline;

}

#contenedor_principal {

width: 100%;

overflow: hidden;

max-width: 1024px;

min-width: 240px;

margin: 0 auto;

}

#cuerpo_central {

width: 72%;

background-color: #9c0;

float: left;

padding: 1em;

font-size: 1.2em;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

}

#sidebar {

width: 25%;

background-color: #cf0;

float: right;

padding: 1em;

font-size: 1em;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

}

Importante: en el ancho del contenedor principal he especificado una anchura máxima (max-width:1024px;) y mínima (min-width:240px;) mediante píxeles. En responsive solo se hace en este caso, para evitar que quede una página kilométrica en caso de que los monitores sean muy grandes.

3. Media queries

Las  media queries  vienen con las CSS3 y consisten en estilos que solo se aplican si el navegador cliente cumple determinadas condiciones. Es decir, son como una estructura condicional de un lenguaje de programación. Por ejemplo, estos estilos solo se aplicarían si el navegador fuera monocromo:

@media all and (monochrome) { estilos específicos aquí

}

Se pueden aplicar media queries en función de una gran cantidad de parámetros:

width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan

Pero de momento, el único que nos interesa es el ancho del dispositivo:

@media screen and (max-width: 800px){ estilos específicos aquí

}

Así, según tenga el navegador cliente un ancho u otro, se puede modificar el comportamiento de algunos estilos. Por ejemplo, un recurso muy habitual es desflotar el sidebar y ponerlo al 100% debajo del cuerpo central (como hago en esta web) en las resoluciones pequeñas. En el caso que estamos usando para la práctica podríamos hacerlo con las resoluciones inferiores a 600 píxeles añadiendo este código a las hojas de estilo:

@media screen and (max-width:600px){ #bloque_principal {

float: none;

width: 100%;

}

#sidebar {

float: none;

width: 100%;

}

}

Solo hay que especificar lo que se quiere cambiar, las demás propiedades se mantienen de la primera vez que se definieron.

4. Imágenes

Solo un detalle más para terminar esta introducción: las imágenes también se pueden hacer en responsive relativizando su ancho. Es tan sencillo como no indicar ni el alto ni el ancho en la etiqueta img y poner 100% en el width de las hojas de estilo.

.imagenes_elasticas img { width: 100% !important;

}

En algunos sitios, en vez de usar un selector de clase, he visto que ponen directamente todas las imágenes en responsive.  

img { width:100%;

}

Pero eso es un error o, mejor dicho, un jaleo, porque luego tienes que des-responsibilizar las que no quieras que se

amplíen, como los iconos, lo que en WordPress es un lío tremendo con todos los plugins que se instalan.

Para des-reponsabilizar hay que poner este estilo dónde se necesite:

.imagenes_fijas { width: auto;

height: auto;

width: auto\9; /* IE*/

}

Sin embargo, como decía, recomiendo hacerlo al revés, dejarlas todas normales menos las que quieras relativizar (como la cabecera).

Quizás te interese también: cómo hacer un tema de WordPress en responsive design:

primera parte segunda parte

Bonus

2 cosinas más rápidas y cierro que tengo que ir a cenar:

1) En el archivo HTML se puede añadir este script de Google en el head para que el explorer y otras tostadoras pillen las CSS3 (también se puede descargar y subirlo al server):

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

2) y también en el HTML, en el head conviene añadir esta línea que otro día explico con calma, pero que sirve para que una web se pueda escalar en los móviles.

<meta name="viewport" content="width=device-width">