Ya hemos hablado sobre el diseño web responsivo o sensible. Este enfoque permite crear sitios web cuyo contenido se adapte a las dimensiones de la pantalla desde la cual se los visualice. Adoptar esta modalidad es importante en una época donde cada vez más dispositivos, de muy diversos tamaños, permiten navegar por la Web.
Todo sitio responsive presenta tres características:
- Están construidos con un sistema de cuadrícula flexible: los
<div>s (o bloques de contenido que conforman la estructura de la página) se ajustan al ancho de la pantalla. - Sus imágenes se ajustan al ancho del elemento que las contiene (por ejemplo, un
<div>). - Muestran diferentes modos de visualización dependiendo de la plataforma, gracias a los media queries de CSS3.
Un sistema de cuadrícula flexible sólo puede lograrse especificando los anchos de cada <div> o tabla en porcentajes en vez de en píxeles. De esta manera, el div no ocupa un ancho fijo, pero sí mantiene siempre la misma proporción con respecto al de la pantalla que lo contiene.
En cuanto a las imágenes, existen muchas técnicas para volverlas flexibles. Una de ellas es utilizar las propiedades max-width: 100%; y height:auto; en nuestra hoja de estilos. Pero el principal componente de un sitio responsive son las media queries, una técnica para verificar las condiciones en las cuales se visualiza el sitio web y modificar algunas reglas CSS en consecuencia. Así, cambia el formato visual sin modificarse el contenido. En otras palabras, se pueden construir muchos sitios web (uno para cada plataforma) a partir de un único documento HTML. El ancho de la ventana, la resolución de pantalla y el rango de colores aceptados determinan diferentes modalidades de visualización.
La ventaja del diseño web responsive es que permite mostrar nuestro contenido de la manera adecuada en toda clase de soportes, desde un teléfono celular hasta un televisor. Sin embargo, el uso de media queries se vuelve engorroso a medida que la complejidad del sitio web crece. En estos casos, la mejor opción puede ser desarrollar una aplicación aparte para cada plataforma.