El diseño adaptative (adaptado) y el diseño responsive (sensible) son dos términos confundidos incluso por miembros veteranos de la industria del diseño web. De hecho, muchos profesionales piensan estar realizando diseños responsive cuando en realidad están trabajando con una arquitectura adaptive. En realidad, ambos diseños son muy similares, pero con unas diferencias clave a tener muy en cuenta.
El diseño adaptative
El diseño adaptive forma escalones dependiendo del tamaño de la pantalla. A medida que el tamaño de la pantalla del dispositivo cambia, se ofrecen diferentes archivos o un mismo archivo CSS aplica ciertas clases y estilos distintos. Tradicionalmente los diseñadores utilizan tres o cuatro escalones distintos: pequeño (centrado normalmente en un smartphone), mediano (tablets y monitores de escritorio pequeños), grande (tablets grandes o ventanas de navegador de escritorio a pantalla completa) y por último, en algunos casos, incluso extragrande (para monitores de escritorio con mucha más resolución de lo habitual).
Otro punto clave del diseño adaptive es que intenta averiguar mediante elementos externos como JavaScript una estructura apropiada de forma predeterminada, sin tener en cuenta la pantalla en la que está siendo reproducido. Por ejemplo, cuando un navegador de escritorio muestra un diseño pensado para 1000 píxeles de ancho como mínimo, aunque la ventana haya sido desplazada a un lateral del monitor del usuario con 500 píxeles en total.
El diseño responsive, por el contrario, se deshace de estos escalones fijos y crea una estructura fluida y en cierto sentido agnóstica de la pantalla en la que se está reproduciendo. Utilizan porcentajes para especificar el ancho de los elementos de una estructura, y en ocasiones también el alto, en la pantalla. Para las unidades de tamaño de las tipografías, márgenes y otros atributos clave, en responsive se utilizan unidades relativas como los porcentajes, los em y ex.
Al ser fluido, utiliza puntos de ruptura para que determinados elementos sean recolocados en la pantalla, e incluso ocultados, a partir de que su tamaño se convierta en una aberración. Por ejemplo: un menú que debería cubrir el 20% del ancho de una pantalla se vería reducido a 64 píxeles de ancho en una ventana de 320 píxeles. En ese caso, lo mejor será desplazarlo a la parte inferior, cambiar su contenido, u ocultarlo.
¿Cuándo es mejor cada uno?
Si se está trabajando con un proyecto ya finalizado que mantener pero adaptar a las nuevas realidades, optar por elementos del diseño adaptive puede ahorrar trabajo y recursos. Si la estructura no es muy compleja, muchos diseñadores no tendrán mayor problema en saber qué puntos clave de su diseño cambiar con media queries o sirviendo distintos ficheros de estilos dependiendo del navegador.
Sin embargo, si se está planteando la base de un nuevo proyecto desde cero, utilizar las claves del diseño responsive acaba siendo una mejor opción no solo para empezar, sino también a largo plazo.
En realidad, lo más inteligente es siempre utilizar la mejor herramienta para cada trabajo. Esto se traduce en que a veces lo mejor, más rápido o más adecuado es utilizar elementos responsive y adaptive a la vez. Combinando las eficiencias de ambos métodos un diseñador o equipo de diseño profesional podrá crear con menos esfuerzo un proyecto más robusto.
Con un catálogo de dispositivos cada día más variado desde las que los visitantes leen a los sitios web de todo el mundo, se hace imperativo poder dominar un diseño que escale, adapte y mute para satisfacer no solo la pantalla del mismo; también sus capacidades de conexión y de procesador.
Es importante no servir más activos de diseño de los necesarios al usuario, y tomar decisiones inteligentes desde que se ponen las primeras piezas de una nueva estructura web. Servir iconos que no se van a ver o cargar tipografías que no están soportadas son algunas de las más obvias, pero también se debe evitar la carga de texturas específicas de elementos que un dispositivo en concreto no vaya a poder mostrar.
Utilizar diseño responsive o adaptive es una de las decisiones más importantes de un proyecto web nuevo o establecido, y conocer las debilidades y puntos fuertes de ambos métodos permitirá al equipo de diseño trabajar de forma más eficiente.
