Publicado el 21/12/2012 por Carlos Estévez
Aunque no hayas oido nunca hablar del responsive design (o diseño adaptativo), seguro que has visto más de una vez una web diseñada de esta manera. Sin ir más lejos, ahora mismo estás viendo una. Y como vale más una imagen que mil palabras, si nos estás leyendo desde un ordenador, encoge el ancho de la ventana de tu navegador y comprueba que ocurre. Si has llegado a través de un dispositivo móvil, acuérdate de visitarnos de nuevo cuando estés con un ordenador.
La consolidación de los smartphones y tablets como los dispositivos más utilizados para navegar por internet fuera del trabajo han hecho que el diseñar una web pensando sólo en los usuarios de equipos de sobremesa y portatiles no sea suficiente, pero también ha supuesto que una versión "light" para móviles con muchas menos funcionalidades que la versión estándar tampoco satisfaga a los usuarios.
Y al fin y al cabo, la gran ventaja de este tipo de diseño frente a la creación de distintas versiones de la web para según que equipos es que el responsive design utiliza para todos el mismo contenido, adaptando la manera en que se muestra este según el tamaño de la pantalla en la que se está viendo la web.
La manera de conseguir esto es a través de media queries en los estilos CSS: Se definen unos estilos específicos para cada tipo de pantalla, normalmente sobremesa y portátil, tablet y smartphone, aunque pueden hacerse tantas distinciones como se quiera.
Además, al no estar ligado a la plataforma del dispositivo sino a la pantalla de este, la web se ve perfectamente tanto en dispositivos Android como en IOS, independientemente del navegador que se utilice.
Aunque supone un mayor tiempo de desarrollo frente a una web tradicional, la usabilidad y experiencia del usuario mejora notablemente, aparte de ser más fácil de mantener que una web con versión móvil.
Y si todo esto no ha conseguido convencerte de que es la solución ideal para abordar la versión móvil de una web, a lo mejor esta recomendación de Google lo consigue.