Responsive design: el diseño adaptable.

El diseño responsivo

“Acepta el flujo y reflujo de las cosas.
Aliméntalas, pero no las poseas.”

—Lao-Tsé, “Dào Dé Jing”; capítulo 2. 

Quizás deberíamos ponderar que el control que disponemos sobre los medios gráficos, los paradigmas, cánones, leyes y pautas disciplinarias que hemos elaborado a lo largo de la historia del diseño, son nada más que una función expresiva de sus límites, antes que una antología de sus virtudes y bondades.

Los estatutos del diseño gráfico y tipográfico, pero también de objetos físicos tridimensionales, no constituyen un manual metodológico para la resolución de problemas, sino un arsenal de restricciones obligadas.

Las dificultades del lenguaje impreso, tales y como la gramática o la ortografía, lo son también para la escritura en general.

“Lo sucesivo del lenguaje indebidamente exagera los hechos que indicamos, ya que cada palabra abarca un lugar en la página y un instante en la mente del lector… todo lenguaje es de índole sucesiva, no es hábil para razonar lo eterno, lo intemporal”, afirmaba Jorge Luis Borges.

En ‘El Aleph’ se confesaba incapaz de superar aquellos obstáculos porque el lenguaje es “un alfabeto de símbolos cuyo ejercicio presupone un pasado que los interlocutores comparten… Lo que vieron mis ojos fue simultáneo: lo que transcribiré, sucesivo, porque el lenguaje lo es. Algo, sin embargo, recogeré.”

El valor de la experiencia

Así como con la imprenta de tipos móviles vislumbramos para la tipografía un campo netamente diferenciado del de la caligrafía –aunque conservemos los rasgos más esenciales y continuemos trabajando con trazos– debemos comprender y aceptar el hecho de que las pantallas no tienen las mismas limitaciones que el papel y estamos forzados diseñar para esta nueva flexibilidad sin abandonar la experiencia.

Durante su evolución inicial, la invención de Gutenberg se empleó con un apego plausible a imagen y semejanza de las reglas de la caligrafía manuscrita, asistimos a un diseño para pantallas que deberá mutar hacia su propio deber ser y dejar de imitar a la página impresa.

Cuando un medio nuevo toma prestadas cosas de otro preexistente, algo de lo que toma aún tiene sentido, pero la mayor parte de lo conseguido es sólo litúrgico, protocolar, irreflexivo, imitativo y antojadizo, obedece a un dogma de lo impropio.

Con el tiempo, el nuevo medio desarrolla sus convenciones particulares y, más tarde o más temprano, rompe aquellas que han dejado de tener sentido.

Esto no significa abandonar las experiencias obtenidas a lo largo de siglos de páginas impresas y milenios de escritura, sino entender qué porción de todo lo aprendido conviene a los nuevos medios, y qué ha pasado a ser, sobre las pantallas, un ritual estéril y, en el mejor de los casos, inútil.

Del papel a la pantalla

“Lo mejor del hombre es como el agua
que beneficia a todas las cosas y no las contiene;
que fluye por los lugares que otros desdeñan,
donde está en armonía con el Camino.”

—Lao-Tsé, “Dào Dé Jing”; capítulo 8. 

El diseño, considerado en absoluto, es una disciplina de prognosis, es decir:

  • se caracteriza por imaginar cómo podrían ser las cosas
  • en lugar de limitarse a describir a las cosas como son.

Por esta razón no es posible probar la aptitud de una solución, sino sólo validarla o, a lo sumo, verificar su efectividad.

La veracidad, para el diseño, es sólo transitoria y, en un punto, precaria.

El Diseño de la Interacción humana con los dispositivos y el entorno es un territorio particular del diseño,

  • centrado en las formas, pero fundamentalmente,
  • ajustado a los comportamientos.

El foco principal está puesto, en los intereses y necesidades de los usuarios por sobre las cuestiones técnicas propias de la resolución de problemas.

Con frecuencia, los diseñadores de la interacción se preguntan cómo pueden hacer para que sus elaboraciones mantengan el mismo aspecto con independencia de la plataforma. Esta preocupación parte de la creencia de que los diseñadores son quienes tienen –o deberían tener– el control absoluto.

Habituados al soliloquio del diseño de la página impresa, los diseñadores parecen ocupar el lugar del sabelotodo que ambiciona

  • la anulación de los deseos de los usuarios y de
  • las decisiones que toman basados en sus experiencias perceptivas

Nada enfurece tanto como dejar que otro –para colmo inexperto– establezca el tamaño de los caracteres, o la fuente tipográfica que le resultan más cómodos para la lectura. Esa decisión estuvo siempre reservada para el diseñador editorial, de la misma manera que la organización del espacio habitable se licencia para la autoridad del arquitecto, o el cuidado de la salud para la del médico.

En la cultura de la impresión, el diseñador es una suerte de dios; si proviene de la autoedición –lo que hoy en día es más que probable– se ha nutrido de la industria de WYSIWYG con sus cultos y ceremonias hasta el despotismo.

Las mayores diferencias entre el diseño de la interacción y el diseño gráfico están dadas en

  • los rasgos dinámicos de los objetos del diseño interactivo, en contraposición con
  • el carácter puramente estático del diseño de la comunicación visual tradicional.

En ese sentido, también aparece una nueva relación bi/pluridireccional –o de ida y vuelta– entre objetos y usuarios a través de las interfaces, lo que lleva a reconsiderar a las entidades diseñadas como verdaderos sujetos activos individuales, y no meras cosas impasibles.

La imposibilidad de controlar la representación de la información puede percibirse como una limitación, cuando no una falla del diseño interactivo, desde el punto de vista WYSWYG.

Si miramos desde el otro lado de la lupa, el control total sobre la página impresa no es una ventaja: es una limitación de ese medio.

El poder sobre

  • la fijación de los tamaños de los textos,
  • la inalterabilidad de esos tamaños,
  • las dimensiones de las páginas y
  • la imposibilidad de modificarlas

son meros hechos del medio, y no necesariamente beneficiosos para el lector, que poco y nada puede hacer al respecto; son, cuanto menos, arbitrios basados

  • en las cualidades favorables del soporte,
  • en las capacidades visuales del diseñador,
  • en su percepción del bienestar de la lectura, elegidos
  • en la comodidad de un estudio con condiciones ambientales óptimas.

Se necesita entonces reconsiderar los credos (inclusive para el diseño de impresos, pero mucho más para el diseño de interacción) y tolerar sin fatalismo “el flujo y reflujo de las cosas” en un mundo caracterizado por la movilidad y el cambio permanentes.

Claro que no es sencillo cambiar las formas de pensar y de actuar: las creencias arraigadas por vastos espacios de certidumbre no se pierden con facilidad.

Sin embargo, la toma de conciencia de que gran parte de lo que uno da por sentado requiere una reevaluación ayuda a revisar los dogmas.

Esto no significa que ya nada sirve: sólo nos muestra que nada puede permanecer inalterable. La superación de los orígenes en la página impresa implica asumir la sabiduría y la experiencia pasadas y trazar, a partir de allí, un curso propio.

De esta forma reciente de abordaje de los problemas se desprende un modo nuevo de enfrentar su resolución especializada:

  • las perspectivas de ideación y los resultados se ajustan, de la mejor manera posible y cada vez más, a las predilecciones y a las metas particulares de los usuarios, algo que no era ni es factible en otros campos del diseño;
  • la flexibilidad de las soluciones es su capacidad de adaptación evolutiva;
  • la accesibilidad y legibilidad deben ser independientes
  • de la resolución,
  • del tamaño,
  • de la disposición y
  • de la cantidad de colores de las pantallas, sin olvidar que eventualmente pueden ser impresas o leídas en voz alta por intérpretes automáticos, o codificadas en Braille.

Esto obliga a revisar los parámetros arquetípicos de la comunicación visual:

  • en algunos casos, aparecerán restricciones e impedimentos propios de los nuevos soportes;
  • en otros, será posible conseguir avances y mejoras que devienen de cualidades y propiedades que no existían con anterioridad.

La mayor fortaleza del DxI –muchas veces vista como una limitación o como un defecto– es la flexibilidad.

Tal vez sea preciso abandonar el monopolio del control y abrazar el diseño flexible, crear accesibilidad, esa mezcla ambigua de elasticidad y plasticidad.

Aclaraciones

Prognosis: del griego, “previsión”; término tomado de la medicina: conjunto de datos estimados y tomados como ciertos relacionados con el resultado probable, la duración esperada y la descripción de la evolución, a partir de la situación actual.

Diseño de la Interacción: designado con las siglas DxI, distintivo del Diseño Multimedia.

WYSIWYG: What You See Is What You Get, o “lo que ve es lo que obtiene”, refiere a los sistemas de edición capaces de prefigurar en pantalla, de manera más o menos fiel, el resultado final del producto diseñado.

Relación bi/pluridireccional: la que se contrapone al modelo básico emisor-mensaje-receptor (y sus elementos complementarios canal-código-contexto-marco).

Usuarios: los usuarios (lectores-visualizadores) son los destinatarios finales. Los productores de contenidos y los medios son cardinales, pero el diseño no debería sujetarse de lleno a ellos.

Resolución de pantalla: La densidad de puntos –píxeles– que puede mostrarse en una pantalla; de manera explícita, suele enunciarse en puntos por pulgada (dpi); de modo implícito, en píxeles (ancho x alto). Ver tabla de resoluciones estandarizadas al final.

Tamaño de pantalla: El ancho y el alto de la pantalla en unidades de medida; a veces también expresada como las dimensiones de la diagonal (en pulgadas).

 Disposición de pantalla: Típicamente vertical (retrato) u horizontal (apaisada); también según las proporciones ancho y alto.

Cantidad de colores de pantalla: el número de colores/valores admisibles por los dispositivos para su representación aproximada.

La multiplicidad de los soportes para las interfaces

La proliferación dispositivos con visores de diferentes

  • tamaños,
  • resoluciones,
  • proporciones,
  • organización y
  • capacidades,

junto con una variedad de aplicaciones para los usuarios, imponen –además de lo antedicho– la revisión de los parámetros y premisas privativas del diseño de la comunicación a través de pantallas.

El diseño adaptativo deberá contemplar, en principio, las cuestiones primordiales relacionadas con

  • la visualización
  • la legibilidad
  • la navegabilidad

para distintos soportes y entornos sin que se degrade la “ilustración”, la manifestación visible de la información.

Compatibilizar la representación de los contenidos en contextos disímiles requiere, como principio básico, la simplificación de los métodos para lograr el máximo de afinidad con un mínimo de recursos.

Las primeras aproximaciones concretas –en muchos casos todavía vigentes– se hicieron desde la creación desagregada de diseños múltiples, acondicionados y normalizados para cada clase de dispositivo.

Las mayores desventajas de este punto de vista residen en que

  • es dispendioso y
  • dificulta la actualización de los contenidos, al tiempo que
  • requiere de una base de datos amplia y dinámica

para reconocer a cada entorno particular y devolverle la información adecuada a sus propiedades específicas.

Un enfoque como este va a contrapelo de las posibilidades y provechos de los medios interactivos, y también desatiende su caducidad característica.

Diseñamos antes versiones que respuestas definitivas, porque los problemas cambian y las soluciones prescriben para engendrar nuevos problemas.

Mientras el diseño tipográfico apunta a durar décadas, y el diseño arquitectónico elige como campo de acción imaginario a la eternidad[1], el diseño interactivo se propone objetivos que pueden desaparecer a los pocos días.

Si esto fuera poco, diseñamos de manera simultánea para dispositivos basados en

  • el paradigma ratón-teclado,
  • los teclados T9,
  • las interfaces basadas en lápices o plumas digitales,
  • los teclados virtuales,
  • las interfaces táctiles puras,
  • las interfaces táctiles gestuales,
  • las pantallas pequeñas,
  • los dispositivos portátiles para juegos,

y un sinfín de alternativas y variantes de toda índole. La movilidad parece ser la tendencia y, cada vez con una insistencia mayor, las organizaciones procuran aumentar de manera creciente su presencia en los dispositivos autónomos con conectividad inalámbrica.

La experiencia móvil en subdominios separados, en espacios distintos de los dedicados a dispositivos de escritorio, parece ya destinada al olvido.

El DxI requiere una base flexible, adaptable, fluida, para lo cual es necesario cambiar la forma en que pensamos las soluciones porque, de otro modo, ningún proyecto se ajustará más allá del contexto para el que fue ideado.

Las respuestas elásticas, que fueron pensadas para las computadoras de escritorio, funcionan de modo bastante aceptable en el contexto de las computadoras de escritorio, pero no mucho más allá.

Cuando las resoluciones son bajas y los tamaños de pantalla disponibles son materialmente pequeños, aparecen disposiciones indecorosas; y esto sucede también para el espectro de las resoluciones altas y las dimensiones generosas.

Hace unos pocos años, la arquitectura ha dado a luz a una disciplina conocida como “arquitectura de respuesta”, fundada en la noción de que los espacios físicos deberían poder adaptarse a las conductas y usos de las personas que los habitan, a través de una combinación de nuevos materiales dúctiles, un diseño adaptable y el apoyo la robótica.

Aclaraciones

Vida útil del diseño arquitectónico: la voluntad de la perpetuación puede parecer excesiva, pero sobran los ejemplos de tipologías –en lo intangible– y de edificaciones –en lo material– que han perdurado a través de los siglos.

T9: acrónimo que significa texto en 9 teclas y que refiere a una tecnología de texto predictivo para teléfonos móviles (en particular los que disponen de un teclado 3×4)

Arquitectura de respuesta: una suerte de extensión de la domótica, que es la automatización de los edificios destinados a la vivienda residencial.

La ruta de la adaptación

“El Camino es determinado por el uso,
pero entonces la forma se pierde.
No te aferres a las formas
sino deja a la sensación fluir hacia el mundo
como un río que se dirige hasta el mar.”

—Lao-Tsé, “Dào Dé Jing”; capítulo 32. 

El diseño de la interacción implica antes una cuestión de realización que de representación, que requiere

  • pensar más en lo que los objetos hacen
  • pensar menos en lo que los objetos parecen

En la controversia interminable sobre el papel que le cabe a forma y función, es el momento de dejar de lado a la apariencia de la idea preconcebida y tratar de que la idea funcione. Para esto es indispensable separar

  • la imagen
  • del contenido

Para el diseño gráfico convencional, los usos se derivan de formas que los anteceden; así, utilizamos la variante itálica de una fuente

  • para enfatizar un texto,
  • para indicar que se emplea una palabra extranjera,
  • para resaltar que se trata de una cita.

Hacia una web semántia

En el HTML original se imitaba a esta manera de trabajar, para lo cual se habían creado etiquetas específicas de presentación como

  • <i> (italic, itálica) o
  • <b> (bold, negrita).

Pero si la intención es el énfasis, se requiere abandonar esta metodología en favor de un conjunto de etiquetas con valor semántico, que no refieran al uso de una variante tipográfica determinada, como por ejemplo

  • <em> (emphasis, énfasis)
  • <strong> (strong, fuerte o marcado)

La diferencia puede parecer nimia; sin embargo es sustancial.

Las hojas de estilo en cascada (CSS) deben utilizarse de manera correcta

  • para sugerir la apariencia de los contenidos en la pantalla,
  • no para controlar su presentación.

La obediencia precisa a esta noción es esencial, sobre todo si la información se presenta, además, en dispositivos que no soportan CSS. Las hojas de estilo en el diseño de interacción pueden verse mejor

  • como una insinuación de la apariencia más apropiada que
  • como un modo determinado para transmitir información.

En términos prácticos, el diseño adaptativo requiere

  • hacer algunas cosas y
  • dejar de hacer otras

para conseguir la adaptabilidad de la representación de los contenidos, como

  • evitar los absolutos (prescindir de unidades categóricas como píxeles, puntos tipográficos o milímetros, y adoptar, en lo posible unidades relativas, como % o ems) y
  • utilizar con cuidado los atributos (no fijar de modo tajante la fuente, el color, el peso)

y sin depender por completo de ellos.