Diseño Web Responsive Vs Adaptativo

Cada día crece el número de usuarios que se conectan a Internet, y desde que el Smartphone enterró al teléfono móvil y con la aparición de las Tablets, el número de usuarios que navegan desde un dispositivo móvil y desde cualquier lugar, va también en aumento. La mejora de las conexiones y de la resolución de sus pantallas ha sido el paso definitivo. Hasta entonces el usuario de los primeros Smartphones era el que se adaptaba a la visualización de una página web. Ahora NO, ahora es la página web la que se adapta al usuario y al tipo de dispositivo que utilice.
Algunas compañías aún se muestran reticentes al cambio, defendiendo la postura de que una web de diseño clásico siempre será más rápida y más ligera. Puede que tengan razón, pero algo es evidente: si la forma de navegar de los usuarios ha cambiado, el diseño debe cambiar con ella. Demos a los usuarios la experiencia de navegación que piden, independientemente de con qué dispositivo nos visiten.
Y se asentó el Smartphone y el Tablet. Y con ellos aparecieron nuevas definiciones y métodos de Diseño como Adaptativo y Responsive (éste último ya se han encargado algunos de traducirlo como Responsivo.

¿Y en qué se diferencian ambos diseños?

Ambos conceptos son parecidos y pueden confundirse. Ambos son métodos de programación flexible que permite que el diseño de la web se adapte visualmente según el dispositivo. La principal diferencia es que el Diseño Responsive se adapta literalmente y el Adaptativo es como si tuviéramos varios diseños diferentes en uno. Uno para cada tipo de dispositivo.

Diseño Adaptativo

Con este sistema tendremos varios diseños diferentes dependiendo de la resolución de la pantalla o del tipo o tamaño del dispositivo. Así pues, podemos tener un diseño para móviles, uno para Tablets de hasta 7 pulgadas, otro para Tablets grandes o SmartTV, otro para PC. O podemos tener uno para Android y otro diferente para iPhone.

Ventajas:

-Enviamos al dispositivo sólo lo necesario para su visualización por lo que será más rápida de cargar.
-Al realizar cada diseño de forma independiente, aumentamos la calidad de la experiencia de navegación del usuario, ya que le mostramos justo lo que queremos.

Desventaja:

-Hasta hace poco el precio. Cuatro diseños no cuestan igual que uno. Pero si que es verdad que últimamente esto está cambiando.

Diseño Responsive

El diseño Responsive se adapta literalmente al dispositivo. La página web envía siempre los mismos datos para todos los internautas y es el navegador el que se encarga de adaptarla a la pantalla. Hasta ahora los tamaños se especificaban fijos, pero jugando con valores de tamaños proporciones y con distintas hojas de estilo css, podemos construir un diseño Responsive.

Ventajas:

-Sólo necesitamos crear un único diseño por lo que el coste es mucho menor.
-El diseño lo veremos siempre de la misma manera en todos los dispositivos. Esto tiene la ventaja añadida de que siempre se verá correctamente y que a la vez, crea la sensación de que estás visitando siempre la misma página web y que no cambia, dando confianza al usuario. Pero tiene la desventaja añadida de que en un teléfono móvil la web se verá muy pequeña, teniendo que utilizar el zoom en todo momento.

Desventajas:

-Envía más información de la necesaria por lo que disminuye la velocidad de carga y aumenta el coste de navegación, no sólo para usuario que utiliza 3G sino para el cliente de la web, que va saturando su servidor ftp donde aloja su web.
-Desde el punto de vista de la publicidad, nos perdemos la posibilidad de desarrollar varias estrategias diferentes de mercado. Porque el usuario que compra desde un Smartphone se comporta de manera diferente al usuario que compra desde un Pc.

Diferencias entre el diseño web adaptativo y responsive

Cada día, millones de usuarios se conectan a Internet desde diferentes dispositivos, pero cada vez más, lo hacen desde dispositivos móviles, esto es, smartphones y tablets. El cambio en el tamaño de pantalla y resolución de la misma entre una smart TV y un smartphone por ejemplo, es algo a tener en cuenta a la hora de visualizar una web. La navegación utilizando un tipo u otro de dispositivos cambia de forma radical y es por ello que la experiencia de usuario que ofrezca nuestra web debe adaptarse a todos los formatos.

A pesar de esta evidencia, muchas compañías siguen viendo los dispositivos móviles como algo sin demasiada importancia y piensan que con tener una web de escritorio, con que pueda visualizarse en móvil, es suficiente. Cabe destacar tres principales problemas: un tiempo de carga demasiado largo para las web de escritorio en dispositivos móviles, las descargas y el formato, que obliga al uso del zoom para ver los detalles.

Si la forma de navegar del usuario ha cambiado, las marcas deberían tenerlo en cuenta. La tasa de rebote de una web no adaptada a móvil es debido a una mala experiencia de usuario y posiblemente, ya no vuelva.

Así que date prisa en hacer tu web accesible a todos los dispositivos. Seguro que has oido hablar del diseño responsive o adaptativo. Se trata de un sistema de programación flexible que permite que el código reorganice los elementos de la web adaptándolos a la resolución de pantalla donde están siendo visualizados. Pero ¿diseño responsive y adaptativo significa lo mismo?
                                                                                                                                                         


 Diferencias entre el diseño web adaptativo y el llamado "responsive"

Como ya mencionamos con anterioridad, el diseño web responsive, reestructura en la pantalla del dispositivo los elementos de la web para optimizar todo el espacio disponible y ofrecer una excelente experiencia de usuario.

Esto se consigue estableciendo unas medidas de ancho y márgenes de diseño en tamaños proporcionales, en lugar de establecer valores fijo en los pixeles. También se necesita utilizar "media queries" y hojas de estilo para poder fijar las CSS correspondientes a cada tamaño de pantalla.

Por ejemplo, un menú horizontal se convierte en vertical si se visualiza en smartphones, evitando los scrolls infinitos y organizando el contenido de una mejor forma. La única desventaja de esta técnica de diseño web es que los elementos no son redimensionables, como los vídeos y banners, que no cambian su tamaño dependiendo del dispositivo.

Un diseño web adaptativo, por otro lado, no es tan flexible como el responsive. Utiliza tamaños de pantalla preestablecidos (ordenador - 400x100 píxeles, empezando por 240x320 píxeles - dispositivos móviles). Un diseño adaptativo no necesita tanto código como uno responsive para sus CSS.

Es por ello que la opción más recomendada suele ser utilizar un diseño web responsive, aunque ello implique un tiempo extra en su desarrollo. La buena noticia es que actualmente existen editores web en cloud que nos permiten crear online este tipo de websites, sin conocimientos de programación y de forma rápida y fácil.

La tendencia hacia el responsive no es algo nuevo pero sí se ve como una forma más extendida para la futura creación de páginas web. Gracias a los nuevos modelos de editor, no es necesario aprender a programar o tener grandes presupuestos para diseñar tu web multi-dispositivo. Basta con tener unos minutos y seleccionar un contenido de calidad para tus visitantes.