El rápido ascenso del consumo de webs en dispositivos móviles ha irrumpido en el diseño web creando cierta confusión. Todos hemos leído sobre diseño responsive mezclado con muchos otros términos: ¿responsivo? ¿fluido? ¿adaptable? ¿adaptativo? Son términos que se mezclan dentro del diseño web pensado para el móvil y la tablet, que ya le ganan la partida al viejo ordenador. Profundicemos en ellos y saquemos en claro las diferencias.
Aunque se haya tratado mucho ya, me he decidido a hablar de las diferentes vertientes del diseño web en la era móvil de nuevo por una poderosa razón. Yo mismo no entendí bien al principio la diferencia entre diseño responsive y adaptativo, aceptando, como muchos, que simplemente un término era traducción de otro. Del error se aprende. Y si me informé para hacer aquel artículo y aún así no me quedó la cosa del todo clara, es que algún problema hay.
Pues el problema es que estas disciplinas de diseño web se extendieron y generalizaron tan rápido, que los conceptos y sus respectivas traducciones al castellano, se confundieron a la hora de referirse a ellos. Al no existir el término «responsivo» en castellano, muchos tradujeron «responsive» por «adaptable». La cuestión es que «adaptive» también existe y no es exactamente lo mismo que «responsive». Para terminar de liar la madeja, está el diseño fluido. Veámoslos uno por uno.
Hoy vamos a hablar de:
Diseño fluido (liquid design)
Esta técnica hace referencia al uso de porcentajes y la unidad tipográfica ems. Negándonos a la rigidez de los píxeles conseguimos que cambiando el ancho de la pantalla, el contenido se adapte. El problema es que ´ésta es una solución sólo válida para cambios de pantalla ligeros. Es decir, da el pego para diferentes resoluciones de monitor o incluso tablet, pero si nos vamos a dispositivos más extremos, como una televisión ancha o un móvil, la cosa chirría. Porque lógicamente, un diseño pensado para una resolución de monitor, se verá raro si lo estiras o lo estrechas demasiado.
De hecho esta «solución» que no es tal, viene de serie en el HTML clásico, pero los diseñadores siempre han preferido dar tamaños fijos a sus webs y dejar blancos a los lados, para garantizar el control sobre la forma en que se veían sus diseños. Pero lo estático ya no vale en estos tiempos, así que olvidémonos del diseño fluido y de dicho término, porque puede generar confusiones.
Diseño adaptable (adaptive)
El diseño adaptable se caracteriza por ajustarse a diferentes dispositivos o resoluciones a través de puntos de quiebre o breakpoints. Esto quiere decir que el diseñador indica diferentes umbrales de ancho de pantalla que al ser rebasados hacen que el diseño cambie de estado.
Ejemplo: Cuando el ancho total sea 1000px, un objeto ocupa 500px de ancho. Cuando el ancho total pase a ser 800, el objeto cambiará a 400px. Pero mientras el ancho sea, por ejemplo, 912px, el objeto seguirá ocupando 500px. El diseño cambia a saltos.
Por tanto, no es un diseño que responda a cualquier aumento del ancho, sino que el diseñador elabora una serie de plantillas estáticas (3, 4, 5…) y según si abrimos la web en móvil, tablet u ordenador a pantalla completa, veremos un diseño diferente, optimizado para ese tamaño y dispositivo.
Es una aproximación que salva la papeleta y que en un momento fue una ingeniosa forma de salir del paso para quien tenía un diseño basado en ordenador. Pero a la larga tiene recovecos y no garantiza la mejor experiencia de usuario, especialmente porque se basa en degradar la web hacia el formato móvil, donde generalmente se recortan los contenidos.
Diseño responsive
El diseño responsive tiene en común con el adaptable que diseño y contenido se adaptan a cada pantalla, pero esta vez cuidando mucho más la experiencia de usuario en cada una de las posibilidades de visualización.
Ejemplo: Tomando el caso antes citado, si el ancho total es 1000px, el objeto ocupará 500px de ancho y cuando el ancho total sea 800, el objeto cambiará a 400px. Eso permanecería igual. Pero en un diseño responsive, durante todo el transcurso, el objeto seguirá cambiando, de modo que para un ancho de 912px, el objeto ocuparía 457px. El diseño responde al más mínimo cambio.
Esta experiencia de navegación más natural se consigue ordenando los contenidos en bloques y reorganizándolos según las características del dispositivo receptor. Los contenidos se dividen y jerarquizan en torno a una serie de parámetros como:
- Dimensiones del navegador
- Orientación del dispositivo (vertical/horizontal)
- Proporción alto/ancho de la pantalla
- Resolución del dispositivo (nitidez).
Utilizando estos parámetros, un buen diseño responsive muestra todos los contenidos pero reorganizándolos de una forma natural para que siempre sean accesibles. Hablamos de una optimización real, un aprovechamiento de las propiedades de cada pantalla, en vez de una simple adaptación. Y sobre todo, de una filosofía que permite diseñar web de cara a futuro, sabiendo que probablemente si mañana aparece un dispositivo de medidas extravagantes, nuestro diseño va a verse de forma óptima.
Cuando surgió, el responsive design tenía la lógica intención de adaptar la web tradicional al móvil pero hoy día casi siempre va asociada de la aproximación «mobile-first», es decir, haciendo que la web crezca y se reordene desde la versión más reducida hacia la más amplia y no al revés.
Diferentes y aún a veces coexistentes
Hay que tener claras las diferencias, sobre todo entre diseño responsivo y adaptable, porque aunque a ojos profanos puedan parecer lo mismo, el resultado es muy diferente en cuanto a experiencia (legibilidad, usabilidad, etc.) y por tanto el trabajo que llevan detrás, sobre todo de conceptualización, es muy distinto.
No todo es blanco y negro y estas prácticas de maquetación web pueden convivir dando lugar a híbridos que hacen aún más complicado catalogar el diseño de una web determinada. Pero es importante saber cuáles son los puntos clave de cada una y espero que, esta vez sí, haya quedado más claro. 😉