Diseño Web Responsive Vs Adaptativo

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.

El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs,... Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: Tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria,... Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo.
El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart,¹ una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.
ara empezar, cabe decir que la web adaptativa posee distintos diseños para los distintos dispositivos móviles, uno para tablets y otro para smartphones, por ejemplo. Este tipo de diseño nos permite crear tantas versiones como dispositivos pensemos que se van a utilizar para acceder a nuestra web, además, la carga será mucho más rápido, ya que sólo poseerán los elementos necesarios e imprescindibles para su correcto funcionamiento.

Por su parte, la responsive web es aquella la que se adapta al dispositivo, siendo la misma versión para todos los dispositivos y el navegador el que detecta lo que puede mostrar. Cabe señalar que, en este caso, la web es la misma, sin tener distintas versiones, como en el caso de la web adaptativa, por lo que el aspecto de la web, la visualicemos donde la visualicemos, siempre será el mismo.