Los sitios web adaptables y responsivos son muy similares, ya que ambos ajustan la interfaz de usuario (UI) de un sitio web en función del ancho de la ventana del navegador. Sin embargo, la forma en que lo hacen es lo que hace que las dos técnicas sean diferentes.

 

Responsive Design

En el diseño de responsivo, un sitio web cambiará su apariencia basándose en la ventana de visualización del navegador. Normalmente, los desarrolladores usan el ancho del navegador como la variable que determina el tamaño de los elementos que cambian dinámicamente en la página.

Un sitio web de resposivo es completamente fluido y se ajustará y responderá a la ventana gráfica sin importar el tamaño de la ventana del navegador (o pantalla). Esto se debe a que utiliza reglas CSS basadas en porcentajes para cambiar el estilo según el tamaño del dispositivo.

Si el navegador tiene un tamaño de 400px de ancho o 45.000px, los elementos de la página siempre se ajustarán a una proporción específica garantizando que la página siempre se vea bien.

Los beneficios de este enfoque son innumerables. La ventaja más destacada es que la base del código no necesita cambiar para móviles, escritorio o cualquier tamaño entre.

Muchos diseñadores creen que el diseño responsivo es más difícil ya que tienen que diseñar para un número mayor de tamaños de pantalla. Si bien esto es parcialmente cierto, también resulta en un código más limpio y mejor adaptabilidad.

 

 

Diseño Adaptativo

Al igual que los sitios web  responsivos, un sitio adaptable ajustará el diseño de la página dependiendo del ancho del navegador, pero lo hace de una manera diferente.

Los diseños adaptativos consisten en múltiples interpretaciones del mismo diseño, uno para cada tamaño, según lo elegido por el diseñador o desarrollador de la interfaz de usuario.

Cada versión del diseño se asigna a anchos de navegador específicos, denominados ‘puntos de anclaje’. Los puntos de anclaje indican al navegador exactamente cuándo debe saltar al siguiente diseño.

Una manera fácil de pensar en ello es que el contenido de la página y los elementos casi “encajan” en su lugar una vez que la vista ha pasado el umbral designado.

Generalmente, un diseñador diseñaría un diseño diferente para cada uno de los seis anchos de ventana más comunes. Estos incluyen una amplia gama de tamaños, incluidos los dispositivos móviles más pequeños, y los anchos de escritorio más grandes: 320px, 480px, 760px, 960px, 1200px y 1600px.

En lugar de utilizar porcentajes, un diseño adaptable utilizará exactamente una disposición estática por cada punto de anclaje y se ajustará al tamaño de la pantalla una vez que se haya detectado el punto de anclaje.

Al igual que el diseño responsivo, el diseño adaptativo también puede ser complejo, ya que los diseñadores tienen que diseñar activamente la misma página, seis (o más) veces diferentes. Piense en cuántos diseños diferentes pueden ser necesarios para un sitio que consta de numerosas páginas.

 

 

Decidir qué utilizar para tu sitio web

Diseño Adaptativo

Si no tiene mucho tiempo para dedicarse a un proyecto, ya sea por razones presupuestarias o debido a restricciones relacionadas con la línea de tiempo, el diseño adaptativo le dará una ventaja si tiene acceso a los datos de análisis del usuario del sitio.

Los datos de Google Analytics pueden ayudarle a priorizar diferentes ventanas de visualización diciéndole qué plataformas y dispositivos se utilizan más en su sitio web. Por lo tanto, puede atender a ese grupo y el diseño de los tamaños de pantalla específica para ahorrar tiempo.

En la siguiente captura de pantalla, está claro que la mayoría de la gente está navegando en este sitio web desde un iPhone de Apple o un iPad. Estos datos podrían utilizarse activamente para dar prioridad a esos tamaños de ventanas específicas, lo que le permite asegurarse de que son perfectos.