Diseño web adaptable

«El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una consecuencia de las limitaciones de la página impresa. Debemos aceptar el hecho de que la web no tiene esas mismas limitaciones, y diseñar entonces para su flexibilidad. Pero primero, debemos aceptar el flujo y reflujo de las cosas.»

—John Allsopp, A Dao of Web Design.

El arquitecto inglés Christopher Wren bromeó alguna vez diciendo que su profesión “apuntaba a la Eternidad”, y hay algo atractivo en esa fórmula: a diferencia de la web, que siempre parece estar apuntando al corto plazo, la arquitectura es una disciplina definida por su permanencia.

Los cimientos de un edificio definen su plano, que define su estructura, que da forma a la fachada. Cada fase del proceso arquitectónico es más inmutable, más invariable que la anterior. Las decisiones creativas modelan, literalmente, un espacio físico, definiendo la forma en que la gente se moverá a través del mismo por décadas o incluso siglos.

Trabajar en la web, sin embargo, es una cuestión completamente diferente. Nuestro trabajo está definido por su transitoriedad, y es a menudo refinado o reemplazado en el lapso de uno o dos años. Las ventanas de ancho inconsistente, las resoluciones de pantalla, las preferencias de los usuarios y las fuentes instaladas son sólo algunos de los intangibles con los que negociamos cuando publicamos nuestro trabajo, y, a través de los años, nos hemos vuelto muy hábiles para ello.

Pero el panorama está cambiando, quizás más rápidamente de lo que nos gustaría. Se espera que la navegación móvil supere a la navegación desde una computadora de escritorio dentro de unos tres a cinco años. Dos de las tres consolas dominantes en materia de videojuegos tienen navegadores web (y uno de ellos es verdaderamente excelente). Estamos diseñando para mouse y teclado, para keypads T9, para dispositivos controladores de juegos, para interfaces táctiles. Dentro de poco, nos enfrentaremos con la mayor cantidad de dispositivos, modos de entrada y navegadores con la que nunca antes nos hemos encontrado.

En los últimos años, me estuve reuniendo cada vez con más compañías que solicitan “un sitio para iPhone” como parte de su proyecto. Es una frase interesante: en una lectura literal habla por supuesto de la calidad móvil de WebKit como navegador, así como también de un poderoso caso de negocio que está pensando más allá del escritorio. Pero como diseñadores, creo que a menudo damos una solución cómoda a este tipo de requerimientos explícitos, que nos permite compartimentar los problemas que tenemos ante nosotros. Podemos poner en cuarentena a la experiencia mobile en subdominios separados, espacios diferentes y alejados del “sitio no-iPhone”. ¿Pero y después? ¿Un sitio para iPad? ¿Otro para el N90? ¿Realmente podemos comprometernos a soportar cada nuevo agente de usuario con su propia experiencia a medida? En algún punto, esto empieza a sentirse como un juego de suma cero. ¿Pero cómo podemos adaptarnos y adaptar a nuestros diseños?

Un cimiento flexible

Consideremos un diseño de ejemplo. Construí una página simple para una revista hipotética; es una diagramación directa, de dos columnas, construido en una rejilla fluída, con algunas imágenes flexibles desparramadas por ahí. Hace ya tiempo que soy defensor de la diagramación no fija, siempre sentí que tendrían más durabilidad porque eran agnósticas en su diagramación. Y eso es verdad hasta cierto punto: los diseños flexibles no asumen nada acerca del ancho de la ventana del navegador y se adaptan hermosamente a dispositivos que tienen modos horizontales y verticales.

Pero ningún diseño fluído ni fijo se escala sin problemas más allá del contexto para el cual fue pensado originalmente. El diseño de ejemplo se escala perfectamente cuando la ventana del navegador cambia su tamaño, pero aparecen puntos de tensión en las resoluciones más bajas. Cuando se observa en una vista menor de 800×600, la ilustración que está detrás del logo se ve cortada, el texto de navegación se acomoda de una manera impropia y las imágenes que están en la parte inferior se hacen demasiado compactas como para ser legibles. Y no sólo las menores resoluciones del espectro se ven afectadas: cuando se observa el diseño en una pantalla widescreen, las imágenes crecen a enormes tamaños, amontonando el contenido que las rodea.

Resumiendo, nuestro diseño flexible funciona lo suficientemente bien en el contexto centrado en la computadora de escritorio para el cual fue diseñado, pero no está optimizado para extenderse mucho más allá.

Volviéndose adaptable

Recientemente, una disciplina emergente llamada “arquitectura adaptable” ha empezado a preguntarse cómo pueden los espacios físicos responder a la presencia de la gente que está pasando a través de ellos. A través de una combinación de robótica incrustada y materiales de tracción, los arquitectos están experimentando con instalaciones de arte y estructuras de paredes que se curvan, doblan y expanden cuando la gente se acerca a ellas. Los sensores de movimiento se pueden juntar con sistemas de control del clima para ajustar la temperatura de un cuarto y su luz ambiente mientras se llena de gente. Las compañías ya han producido “tecnología de vidrios inteligentes” que pueden opacarse automáticamente cuando los ocupantes de un cuarto superan cierto nivel de densidad, dándoles una capa más de privacidad.

En su libro Interactive Architecture, Michael Fox y Miles Kemp describieron este acercamiento adaptativo como “un sistema de múltiples ciclos en el que uno entra en una conversación; un intercambio de información continuo y constructivo.” El énfasis es mío, ya que pienso que es una sutil pero poderosa distinción: en vez de crear espacios inmutables e invariables que definen una experiencia particular, sugieren que los habitantes y la estructura pueden—y deben—influenciarse mutuamente.

Este es el camino a seguir. En lugar de hacer diseños a medida y desconectados para cada uno de los siempre crecientes dispositivos web, podemos tratarlos como facetas de una misma experiencia. Podemos diseñar para una experiencia de observación óptima, pero incrustar tecnologías basadas en estándares dentro de nuestros diseños para hacerlos no sólo más flexibles, sino más adaptables al dispositivo que los accede. Resumiendo, necesitamos practicar un diseño web adaptable. ¿Pero cómo?

Presentando a la media query

Desde los días de CSS 2.1, nuestras hojas de estilos han disfrutado algo así como una conciencia del dispositivo a través de los media types. Si alguna vez has escrito una hoja de estilos para impresión, ya estás familiarizado con el concepto:

<link rel="stylesheet" type="text/css" href="core.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Esperando que estuvieramos diseñando más que bonitos formatos de páginas para imprimir, la especificación CSS nos suministró un grupo de media types aceptables, cada uno de ellos diseñado para apuntar a una clase específica de dispositivo listo para la web. Pero la mayoría de los navegadores y los dispositivos nunca se han adherido al espíritu de la especificación, dejando varios media types implementados imperfectamente, o completamente ignorados.

Por suerte, el W3C creó las media queries como parte de la especificación CSS3, mejorando la promesa de los media types. Una media query nos permite apuntar no sólo a ciertas clases de dispositivos, sino realmente inspeccionar las características físicas del dispositivo que está renderizando nuestro trabajo. Por ejemplo, siguiendo el reciente crecimiento de WebKit mobile, las media queries se han convertido en una técnica del lado del cliente popular para entregar una hoja de estilos a medida para el iPhone, los teléfonos con Android y sus semejantes. Para hacerlo, podemos incorporar una query al atributo media de una hoja de estilos linkeada:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

La query contiene dos componentes:

1. Un media type (screen), y
2. la consulta entre paréntesis, conteniendo una característica a inspeccionar (max-device-width) seguida por el valor al que apuntamos (480px).

En otras palabras, le estamos preguntando al dispositivo si su resolución horizontal (max-device-width) es igual o menor que 480px. Si la pregunta pasa -en otras palabras, si estamos viendo nuestro trabajo en un dispositivo con una pantalla pequeña como el iPhone- entonces el dispositivo cargará shetland.css. De lo contrario, el link es completamente ignorado.

En el pasado, los diseñadores han experimentado con la diagramación conscientes de la resolución, dependiendo generalmente de soluciones en JS como el excelente script de Cameron Adams. Pero la especificación de media query provee una serie de características del medio que se extienden mucho más allá de la resolución de la pantalla, ensanchando el alcance de lo que podemos testear con nuestras queries. Lo que es mejor, puedes testear múltiples valores de las propiedades en una sola query, encadenándolos con la palabra clave and:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

Además, no estamos limitados a incorporar las media queries en el tag link. Podemos incluírlas en nuestro CSS como parte de una regla @media:

@media screen and (max-device-width: 480px) {
    .column {
        float: none;
    }
}

O como parte de una directiva @import:

@import url("shetland.css") screen and (max-device-width: 480px);

Y en cada caso, el efecto es el mismo: si el dispositivo pasa el examen planteado por nuestra media query, el CSS que corresponda es aplicado a nuestro código. Las media queries son, en resumen, comentarios condicionales para todos. En lugar de apuntarle a una versión específica de un navegador, podemos corregir quirúrgicamente problemas en nuestra diagramación cuando se escala más allá de su resolución inicial e ideal.

Adaptarse, responder y más

Llevemos nuestra atención a las imágenes en la base de nuestra página. En su diagramación por defecto, el CSS está así:

.figure {
    float: left;
    margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
    width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,
li#f-winter {
    margin-right: 0;
}

Omití algunas propiedades tipográficas para enfocarnos en la diagramación: cada elemento .figure tiene un tamaño de aproximadamente un tercio de la columna que lo contiene, con el margen derecho en cero para las dos imágenes al final de cada fila (li#f-mycroft, li#f-winter). Y esto funciona bastante bien, hasta que la vista es o notablemente más pequeña o más ancha que nuestro diseño original. Con las media queries, podemos aplicar arreglos específicos para una resolución, adaptando nuestro diseño para responder mejor a los cambios en la pantalla.

Antes que nada, linealicemos nuestra página una vez que la vista cae por debajo de cierta resolución—digamos, 600px. Así que al final de nuestra hoja de estilos, creemos un nuevo bloque @media, de la siguiente manera:

@media screen and (max-width: 600px) {
    .mast,
    .intro,
    .main,
    .footer {
        float: none;
        width: auto;
    }
}

Si observas nuestra página actualizada en un navegador moderno y reduces el tamaño de tu ventana por debajo de los 600px, la media query desactivará los floats de los principales elementos del diseño, apilando cada bloque encima del otro en el flujo del documento. Entonces nuestro diseño miniaturizado está tomando una bella forma, pero las imágenes todavía no se reducen tan inteligentemente. Si introducimos otra media query, podemos alterar su diagramación de manera consecuente:

@media screen and (max-width: 400px) {
    .figure, 
    li#f-mycroft {
        margin-right: 3.317535545023696682%;    /* 21px / 633px */
        width: 48.341232227488151658%;          /* 306px / 633px */
    }

    li#f-watson, 
    li#f-moriarty {
        margin-right: 0;
    }
}

No le des importancia a los porcentajes ilegibles; simplemente estamos recalculando los anchos de la rejilla fluida para tener en cuenta la nueva diagramación linear. En otras palabras, estamos moviéndonos de una diagramación de tres columnas a una de solo dos cuando el ancho de la vista cae por debajo de los 400px, haciendo más prominentes a las imágenes.

Podemos utilizar el mismo enfoque para las pantallas widescreen. Para resoluciones más grandes, podemos adoptar un tratamiento de seis columnas para nuestras imágenes, situándolas todas en la misma fila:

@media screen and (min-width: 1300px) {
    .figure, li#f-mycroft {
        margin-right: 3.317535545023696682%;    /* 21px / 633px */
        width: 13.902053712480252764%;          /* 88px / 633px */
    }
}

Ahora nuestras imágenes están trabajando hermosamente en los dos extremos del espectro de resoluciones, optimizando su diagramación a los cambios en el ancho de las ventanas y en las resoluciones de los dispositivos.

Pero esto es sólo el comienzo. Trabajando dentro de las media queries que incrustamos en nuestro CSS, podemos alterar mucho más que la colocación de unas pocas imágenes: podemos introducir una diagramación alternativa ajustada para cada rango de resolución, quizás haciendo la navegación más prominente en una vista de pantalla ancha o re-ubicandola sobre el logo en pantallas más pequeñas.

Pero un diseño adaptable no está limitado a cambios en la diagramación. Las media queries nos permiten practicar ajustes increíblemente precisos cuando nuestras páginas cambian de forma: podemos aumentar el área clickeable de nuestros links para pantallas más pequeñas, para cumplir mejor con la Ley de Fitts en los dispositivos táctiles; mostrar o esconder elementos de manera selectiva que pueden mejorar la navegación de una página; podemos incluso practicar una tipografía adaptable que gradualmente altere el tamaño y espaciado de nuestro texto, optimizando la experiencia de lectura para la pantalla correspondiente¹.

Algunas notas técnicas

Debe mencionarse que las media queries disfrutan de un soporte increíblemente robusto entre los navegadores modernos. Todos los navegadores de escritorio como Safari 3+, Chrome, Firefox 3.5+ y Opera 7+ aceptan de forma nativa las media queries, como también lo hacen los navegadores móviles más recientes como Opera Mobile y WebKit mobile. Por supuesto, las versiones más viejas de esos navegadores de escritorio no soportan media queries. Y aunque Microsoft se ha comprometido en ofrecer soporte a las media queries en el IE9, el Internet Explorer actualmente no ofrece una implementación nativa.

Sin embargo, si estás interesado en implementar compatibilidad con los navegadores más viejos, hay un revestimiento teñido en JavaScript:

• Un plugin de jQuery del 2007 ofrece un soporte limitado de las media queries, implementando sólo las propiedades min-width y max-width cuando son adjuntadas a elementos link separados.
• Recientemente, css3-mediaqueries.js fue lanzado, una librería que promete “lograr que IE 5+, Firefox 1+ y Safari 2 analicen, examinen y apliquen las media queries de CSS3” cuando son incluídas a través de los bloques @media. Aunque está en una versión 1.0, lo he encontrado bastante robusto y planeo observar su desarrollo.

Pero es perfectamente entendible que no te atraiga usar JavaScript. Sin embargo, eso fortalecerá el caso de que quieras construir tu estructura encima de una rejilla flexible, para asegurarte de que tu diseño disfrute de alguna flexibilidad en los dispositivos y navegadores que no ven las media queries.

El camino a seguir

Las rejillas fluídas, las imágenes flexibles y las media queries son los tres ingredientes técnicos para un diseño web adaptable, pero también se requiere de una forma diferente de pensar. En lugar de poner en cuarentena nuestro contenido en diferentes experiencias, específicas para cada dispositivo, podemos usar las media queries para realzar progresivamente nuestro trabajo en los diferentes contextos de vista². Eso no significa que no existan casos de negocio en los que sea preferible realizar sitios para dispositivos específicos; por ejemplo, si los objetivos del usuario para tu sitio mobile tienen un alcance limitado con respecto al equivalente de escritorio, entonces servir contenido diferente para cada uno puede ser el mejor enfoque.

Pero esa manera de pensar en el diseño no tiene por qué ser la forma de proceder por defecto. Ahora más que nunca, estamos diseñando trabajos destinados a ser vistos en una gran gama de experiencias diferentes. El diseño web adaptable nos ofrece un camino a seguir, permitiéndonos finalmente “diseñar para el flujo y reflujo de las cosas.³”

---

1. Responsive Web Design, por Ethan Marcotte ↩︎

2. Mobile First, por Luke Wroblewski ↩︎

3. RWD en A List Apart, por Ethan Marcotte ↩︎