Con la increíble crecida del uso de dispositivos móviles como smartphones o tables, cada vez va siendo más necesario saber qué es un diseño web adaptable/adaptativo, o en inglés: responsive. La idea es bien sencilla, realizar un diseño web cuya programación y hoja de estilos permita que la web «se adapte» para las resoluciones más típicas de pantalla de estos dispositivos móviles o de pantallas de PCs. Y es que ya lo decía Bruce Lee: «Be water, my friend», refiriéndose a que el agua de adaptaba a la forma del recipiente donde se depositase.
A nivel de costes, diseñar una web adaptativa, aunque pueda parecer que es más caro, todo lo contrario, ya que reduce los costes de mantenimiento, se evita desarrollar aplicaciones específicas para diferentes dispositivos y a nivel de posicionamiento, todo va bajo una misma URL, evitando posibles enlaces incorrectos, redirecciones y demás.
“El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una consecuencia de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos ‘aceptar el flujo y reflujo de las cosas.‘”
—John Allsopp, A Dao of Web Design.
Para que veáis algunos ejemplos de web adaptables, os mostramos aquí varios, probad a reducir el tamaño de la ventana con el ratón si lo véis en un PC para comprobar cómo se recolocan los elementos de las páginas y se adaptan al espacio visible:
- http://www.bostonglobe.com/
- http://foodsense.is/
- http://www.smashingmagazine.com/
- http://bluegg.co.uk/
- http://sweethatclub.org/
- http://heathlife.co.uk/
Esperamos que os haya gustado el artículo de esta semana, y ya sabéis, si queréis un diseño web adaptativo, ¡contactádnos!