Diseño Web Responsive y Adaptativo

Diseño Web Responsive y Adaptativo

¿Qué es responsive y adaptativo?

El diseño responsive y el diseño adaptativo son dos cosas diferentes, pero que tienen como objetivo lo mismo, la correcta visualización en los diferentes tipos de dispositivos. Nace como respuesta a la necesidad de visualizar los sitios web en dispositivos móviles principalmente. También se lo podría definir como un conjunto de técnicas de programación y maquetado para conseguir este fin. Fundamentalmente apoyándose en CSS y sus derivados, pero también haciendo uso de HTML y Javascript.

Diferencias

Los sitios responsive y los sitios adaptativos son iguales en el sentido de que ambos cambian de aspecto basándose en el entorno del navegador en el que se están viendo (lo más común: el ancho del navegador).

Los sitios web responsive responden al tamaño del navegador en cualquier punto dado. No importa cuál sea el ancho del navegador puede ser, el sitio ajusta su diseño (y tal vez la funcionalidad) de una manera que se optimiza a la pantalla. ¿Es el navegador de 300px de ancho o 30000px de ancho? No importa porque el diseño responda en consecuencia. Bueno, al menos si se hace correctamente!

Los sitios web adaptables se adaptan al ancho del navegador en puntos específicos. En otras palabras, el sitio web sólo se preocupa por el navegador de un ancho específico, momento en el que se adapta el diseño.

Otra Forma de Pensarlo

Otra forma de pensar en ello es la diferencia entre el diseño suave y el diseño rápido. El diseño responsive o de respuesta es suave porque la disposición se ajusta con fluidez independientemente del dispositivo en el que se vea. El diseño adaptativo, por otro lado, se ajusta en su lugar porque la página está sirviendo algo diferente debido al navegador o al dispositivo en el que se ve. Esta animación ilustra la diferencia de comportamiento:

Funcionamiento Diseño Suave y Diseño Rápido

¿Cual es Mejor?

Todo depende del proyecto y hay que elegir la mejor herramienta para el proyecto a mano.

¿Está usted obligado a elegir uno sobre el otro? La elección podría ser más fácil si sabe que tiene dispositivos específicos que su sitio debe admitir. Si el iPhone 6 es el único dispositivo que importa y adaptarse a él sería mucho más fácil y más eficiente que la contabilidad de otros dispositivos. Por otro lado, un diseño de respuesta es una buena estrategia para la futura prueba de un sitio en contra de la posibilidad de cualquier dispositivo (tal vez incluso inéditos) en el mercado.

Más Información: Css Tricks

(El texto original ha sido modificado para el idioma castellano)

Publicado por:
Christian Damián Petersen
Desarrollador Web Freelance.
Twitter: @ChDPetersen