A estas alturas y si te interesa aunque sea solo un poco el diseño web, inevitablemente habrás escuchado hablar de «responsive design«, diseño sensible o diseño adaptable. Pero, ¿sabes realmente que significa que una web este programada al estilo «responsive design?
El responsive design no es nuevo, pero su aplicación está muy de moda y no es por otra cuestión que el auge de los dispositivos móviles como tabletas y smartphones, que cada vez son más usados para navegar por la red. Y es que si somos realistas, a día de hoy estamos constantemente conectados a Internet, pero accedemos poco desde un ordenador (a no ser que trabajes con uno, claro está).
El responsive design es una de las alternativas que existen en diseño web para que cuando uno navegue por cualquier dispositivo (ordenador, portátil, móvil, tableta) pueda hacerlo cómodamente. Su filosofía es la de «una web única«. Osea, un diseño flexible que busca adaptarse a diferentes anchos de pantalla, para mostrar los contenidos de la forma más clara posible.
Desde hace muchos años, podíamos diseñar una web para que se viera correctamente en pantallas de diferente resolución. Usábamos varias hojas de estilo para cada resolución y varias páginas dependiendo de si la íbamos a mostrar en un portatil o un sobremesa, redireccionando y repitiendo contenidos. En definitiva, invirtiendo mucho tiempo y dinero en el diseño de una web. El diseño adaptable o responsive, juega la baza de tener una única web, con lo que ahorramos en tiempo, trabajo y dinero, y que se adapta perfectamente gracias a los siguientes elementos base:
– Anchos y altos en porcentaje y no en píxeles. Olvídate de usar anchos determinados porque el verdadero secreto está en trabajar en anchos con porcentajes.
– CSS Media Queries. En un ordenador tenemos mucho espacio para rellenar, pero si podemos desactivar parte de estos rellenos en la pantalla de un móvil, mucho mejor. Esto se hace mediante las CSS Media Queries.
– Imágenes y fotografías flexibles. Se acabó el decirle a una imagen que mide 600 píxeles. Usa porcentajes máximos para que se puedan ver de forma correcta en cualquier pantalla o resolución.
Aunque se puede hablar largo y tendido sobre esta nueva forma de diseñar páginas web, creo que es un buen resumen y espero haberte ayudado a resolver las posibles dudas que podías tener sobre responsive design.
