Introducción al responsive web design
Vale, todo el mundo a estas alturas ya sabe de que va esto, un único diseño para cualquier dispositivo, el sueño de todo desarrollador. Un diseño que funciona en una pantalla de ordenador de 25" y en un móvil de 4", todo compartiendo el código base y no teniendo que mantener dos (o más) proyectos diferentes.
¿Cómo funciona?
Básicamente intervienen tres cosas: una estructura (grid) flexible, basada en porcentajes; contenido multimedia flexible (se adapta al tamaño de su contenedor) y media queries que es la manera de poder aplicar reglas de CSS específicas basándonos en las características del navegador del cliente, lo más normal es preguntar por el tamaño de la pantalla, pero las media queries no están limitadas a eso, de hecho hace ya mucho que se utilizan, por ejemplo, para especificar estilos para imprimir:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
En el caso anterior el media="print" es lo que indica que esa hoja de estilo sólo se debe aplicar en la impresión.
¿Y en la práctica?
Pues en la práctica es un poco más complicado pero a la vez bastante más interesante, lo primero que debes hacer (incluso si ya estás utilizando estas técnicas) es leerte el libro de Ethan Marcotte: Responsive Web Design, al fin y al cabo es quien acuñó el término y el libro es muy interesante para comprender algunos aspectos claves que no son evidentes a primera vista, por ejemplo, no basta con introducir unos puntos de corte en el que conviertes un diseño de dos columnas en una para decir que tu web es responsiva (no tengo ni idea de si existe una traducción aceptable al español, si alguien sabe alguna, por favor, que me lo diga que llevo tiempo queriéndola).
Una vez pasado el trámite de conocer los aspectos básicos, lo más normal es empezar poco a poco, elige tu mejor web, una que tenga el código muy limpio, que esté muy bien estructurada, que la hoja de estilo esté ordenada y sobre todo que sea muy sencilla, que esto la primera prueba. Ahora piensa como debería ser esa web pensando en un tamaño de pantalla de un móvil, reduce tu pantalla del navegador para que coincida con el tamaño de la pantalla del móvil, crea una hoja estilo nueva y modifica el head de tu página para que quede algo así:
<!-- Esto es importante, pero lo explico en el artículo un poco más abajo -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (max-width: 480px)" />
Bueno, antes de continuar quiero dejar claro que esto no son buenas prácticas, simplemente me parece que es la manera más fácil de iniciarse en esto, mi intención es preparar más artículos sobre responsive web design en los que sí que haré las cosas correctamente (o lo intentaré).
En el código de arriba, la etiqueta meta es para decirle al navegador que no utilice el tamaño de pixel real del dispositivo sino el del viewport (explicación en MDN), que no escale el contenido por defecto y hay que asegurarse de no incluir nada del estilo a maximum-scale=1 porque esto impediría al usuario escalar el texto a su voluntad.
Con esa estructura ya puesta en su sitio podemos empezar a trabajar en nuestra primera prueba, simplemente hay que entender una cosa, los estilos de la hoja de estilos mobile.css sólo se aplican cuando el dispositivo tiene un ancho de pantalla de como mucho 480px y a partir de aquí es sólo CSS, en esta prueba simplemente vamos reescribiendo los estilos que queramos para adaptar el diseño al tamaño de la pantalla, por ejemplo, teniendo esto en stylesheet.css:
.main-content {
width: 70%;
float: left;
}
.sidebar {
width: 30%;
float: left;
}
Podríamos escribir esto en mobile.css para convertirlo a una columna:
.main-content, .sidebar {
width: 100%;
float: none;
}
Y de eso se trata, de ir sobreescribiendo los estilos que necesites para que la página se adapte al tamaño que quieras, en cuanto empiezas a leer acerca del tema te vas dando cuenta de que esto son malas prácticas, pero a mí me parece que para empezar a entender la parte técnica es completamente válido.