El Responsive Design

El Responsive Design (o diseño adaptativo) es la técnica que logra que una página Web "sepa" en qué dispositivo la están viendo y se acomode sola para que se vea adecuadamente. Es una forma de desarrollo Web que hace que un sitio se vea bien y funcione correctamente en cualquier dispositivo, ordenadores de escritorio, tablets, móviles y otros. Podemos hacer un simil, pensar que un Website es como el agua: si la pones en una taza, toma la forma de la taza; si la pones en una botella, toma la forma de la botella; es decir se adapta al formato.

Las características básicas de esta técnica son que se adapta automáticamente (el contenido se reorganiza según el tamaño de la pantalla); tiene imágenes flexibles (las imágenes se redimensionan para no romper el diseño); manejan un texto legible, sin necesidad de hacer zoom para leer; y contiene elementos táctiles, botones y enlaces con tamaño adecuado para dedos en móviles. 

Para que esto ocurra, el diseño se apoya en tres pilares fundamentales:

a) Cuadrículas fluídas (Fluid Grids): en lugar de decir que una columna mide "500 píxeles" (que es una medida fija), se le dice que mida el "50% del ancho de la pantalla". Así, siempre ocupará la mitad, sin importar si la pantalla es gigante o diminuta.

b) Imágenes flexibles: las imágenes se configuran para que nunca se desborden de su contenedor. Si la pantalla se encoge, la imagen también.

c) Media Queries: son "reglas" de CSS que instruyen al navegador. Una regla CSS es la unidad básica que permite definir el aspecto visual de los elementos HTML en una página Web. Así, la orden sería, por ejemplo, "si la pantalla mide menos de 600px, pon el menú arriba; pero si mide más, ponlo a la derecha".

Esta técnica tiene hoy varios beneficios. Mejora la experiencia de usuario (UX), pues evita estar haciendo zoom para leer un texto en el celular. A Google, por ejemplo, le encantan los sitios responsive. Por lo tanto es conveniente que se use esta técnica, pues los Website que no lo son terminan abajo en los resultados de búsqueda. Además, el mantenimiento no es complicado. Solo hay que actualizar un sitio Web, sin necesidad de hacer una versión para PC y otra distinta para móvil.

Antes existía la tendencia de crear sitios con versiones móviles separadas de la que se usa en PC, pero eso ya pasó a la historia porque era un dolor de cabeza mantener ambos contenidos sincronizados.