Diseño web responsivo: qué es y cómo utilizarlo

Hoy en día, casi todos los clientes nuevos quieren una versión móvil de su sitio web. Al fin y al cabo, es prácticamente imprescindible: un diseño para la BlackBerry, otro para el iPhone, el iPad, el netbook, el Kindle... y, además, todas las resoluciones de pantalla deben ser compatibles. En los próximos cinco años, es probable que tengamos que diseñar para una serie de inventos adicionales. ¿Cuándo acabará la locura? No lo hará, por supuesto.

Diseño web responsivo
En el campo del diseño y el desarrollo web, estamos llegando rápidamente al punto de no poder seguir el ritmo de las infinitas nuevas resoluciones y dispositivos. Para muchos sitios web, crear una versión del sitio web para cada resolución y nuevo dispositivo sería imposible, o al menos poco práctico. ¿Debemos sufrir las consecuencias de la pérdida de visitantes de un dispositivo a cambio de ganar visitantes de otro? ¿O hay otra opción?
¿Qué es el diseño web responsivo?El diseño web responsivo es el enfoque que sugiere que el diseño y el desarrollo deben responder al comportamiento y al entorno del usuario en función del tamaño de la pantalla, la plataforma y la orientación.
Esta práctica consiste en una mezcla de cuadrículas y diseños flexibles, imágenes y un uso inteligente de CSS media queries. Cuando el usuario pasa de su portátil a su iPad, el sitio web debe cambiar automáticamente para adaptarse a la resolución, el tamaño de la imagen y las capacidades de scripting. También hay que tener en cuenta la configuración de sus dispositivos; si tienen una VPN para iOS en su iPad, por ejemplo, el sitio web no debería bloquear el acceso del usuario a la página. En otras palabras, el sitio web debería tener la tecnología para responder automáticamente a las preferencias del usuario. Esto eliminaría la necesidad de una fase de diseño y desarrollo diferente para cada nuevo gadget del mercado.

El concepto de diseño web responsivoEthan Marcotte escribió un artículo introductorio sobre el enfoque, Responsive Web Design, para A List Apart. Se deriva de la noción de diseño arquitectónico responsivo, por el que una habitación o espacio se ajusta automáticamente al número y al flujo de personas que se encuentran en él:
"Recientemente, una disciplina emergente llamada "arquitectura receptiva" ha empezado a preguntarse cómo pueden responder los espacios físicos a la presencia de personas que pasan por ellos. Mediante una combinación de robótica incorporada y materiales tensados, los arquitectos están experimentando con instalaciones artísticas y estructuras murales que se doblan, flexionan y expanden cuando la gente se acerca a ellas. Los sensores de movimiento pueden combinarse con los sistemas de control climático para ajustar la temperatura y la iluminación ambiental de una sala a medida que se llena de gente. Las empresas ya han producido una "tecnología de vidrio inteligente" que puede volverse opaca automáticamente cuando los ocupantes de una sala alcanzan un determinado umbral de densidad, lo que les proporciona una capa adicional de privacidad".Trasplante esta disciplina al diseño web y tendremos una idea similar, pero totalmente nueva. ¿Por qué deberíamos crear un diseño web a medida para cada grupo de usuarios; después de todo, los arquitectos no diseñan un edificio para cada tamaño y tipo de grupo que pasa por él? Al igual que la arquitectura responsiva, el diseño web debería ajustarse automáticamente. No debería requerir innumerables soluciones a medida para cada nueva categoría de usuarios.
Obviamente, no podemos utilizar sensores de movimiento y robótica para conseguirlo como lo haría un edificio.

 El diseño web responsivo requiere una forma de pensar más abstracta. Sin embargo, algunas ideas ya se están poniendo en práctica: diseños fluidos, consultas de medios y scripts que pueden reformatear las páginas web visita aqui y el marcado sin esfuerzo (o automáticamente).
Pero el diseño web responsivo no consiste únicamente en resoluciones de pantalla ajustables e imágenes redimensionables automáticamente, sino en toda una nueva forma de pensar en el diseño. Vamos a hablar de todas estas características, además de otras ideas en ciernes.
Ajuste de la resolución de pantallaCada vez hay más dispositivos con diferentes resoluciones, definiciones y orientaciones de pantalla. Cada día se desarrollan nuevos dispositivos con nuevos tamaños de pantalla, y cada uno de estos dispositivos puede manejar variaciones de tamaño, funcionalidad e incluso color. Algunos son apaisados, otros verticales y otros completamente cuadrados. Como sabemos por la creciente popularidad del iPhone, el iPad y los teléfonos inteligentes avanzados, muchos de los nuevos dispositivos son capaces de cambiar de vertical a horizontal a voluntad del usuario.

 ¿Cómo se puede diseñar para estas situaciones?
Diseño web responsivo - Retrato PaisajeAdemás de diseñar tanto para paisaje como para retrato (y permitir que esas orientaciones puedan cambiar en un instante al cargar la página), debemos tener en cuenta los cientos de tamaños de pantalla diferentes. Sí, es posible agruparlas en categorías principales, diseñar para cada una de ellas y hacer cada diseño tan flexible como sea necesario. Pero eso puede ser abrumador, y ¿quién sabe cuáles serán las cifras de uso dentro de cinco años? Además, muchos usuarios no maximizan sus navegadores, lo que a su vez deja demasiado espacio para la variedad de tamaños de pantalla.