Llamamos «Responsive Design» (o diseño adaptativo, en español), a la técnica mediante la cual un diseño web se adapta al tamaño de la pantalla del dispositivo desde el que se está visitando la web, haciendo óptima la visualización en ordenadores, tablets y móviles.
Sabemos que actualmente, más del 40% de las visitas webs se realizan desde dispositivos móviles. Por este motivo, un requisito fundamental a la hora de desarrollar una web, es la maquetación responsive.
Esta técnica se consigue con una directiva de CSS3 añadida en la última versión, mediante la cual podemos definir distintos estilos según el ancho de la pantalla desde donde se está visualizando la web.
Con el uso de esta técnica, no es necesario ampliar la web cuando la visitamos en un smartphone para poder leer los textos, ya que éstos se mostrarán en un tamaño adecuado para su correcta visualización. Cabe destacar que con esta técnica, además de adaptar el diseño, podemos cambiar el tamaño de las imágenes cuando modificamos el ancho del dispositivo.
Ventajas de una web «Responsive Design»
-
Reducción de costes
Antes de usarse esta técnica, para maquetar las webs en móviles y tablets, había que hacer una versión de la hoja de estilos para cada tamaño de pantalla. De esta forma, podemos aprovechar la misma hoja de estilos en todos los dispositivos, añadiendo solamente las directivas en los casos que sea necesario modificar la maquetación.
-
Mejor usabilidad y experiencia de usuario
Está demostrado que al aprovecharse toda la pantalla del dispositivo del visitante, aumenta la conversión. Mejorará tanto tu imagen de marca como el tiempo de permanencia en la web y aumentará la tasa de rebote entre las páginas del sitio.
-
Se evitan los contenidos duplicados
Cuando se hacían versiones móviles de las webs, existía la posibilidad de que dos urls distintas tuvieran el mismo contenido, una para la versión clásica y otra para la versión móvil, haciendo que Google te penalizara por tener contenido duplicado. Con el diseño Responsive, se evita este problema ya que es el mismo contenido el que se organiza de manera distinta según el dispositivo en el que se vea.
-
Facilidad para compartir y mayor viralidad
Actualmente, más del 70% de los accesos a las redes sociales se realizan desde dispositivos móviles; por lo tanto, si un usuario accede a una web enlazada en una red social, es muy posible que lo haga desde un dispositivo móvil. Al tener las aplicaciones de redes sociales abiertas en el dispositivo, resulta más fácil y natural el hecho de compartir.
Inconvenientes de una web «Responsive Design»
-
Mayor coste de desarrollo
Como mayor inconveniente podríamos mencionar el desarrollo de la web, ya que la maquetación con esta técnica requiere una mayor dificultad técnica.
-
Páginas web más lentas
Otro inconveniente, aunque de menor importancia, se trata de la carga de la web, ya que las imágenes que se muestran en los dispositivos móviles, son las mismas que las webs pero con el tamaño escalado.
Es evidente que el tiempo de carga de la web es importante, pero éste «problema» se puede solventar haciendo uso de técnicas más sofisticadas que carguen las imágenes solamente cuando éstas se visualicen en la pantalla, además de usar versiones reducidas de éstas para mejorar los tiempos de carga.
En Befresh Studio, todas las páginas webs que desarrollamos son Responsive.