Diseño Web Adaptable – Responsive Web Design

El control que los diseñadores conocen en el medio de impresión, y con frecuencia desean en el medio web, es simplemente una función de la limitación de la página impresa. Debemos aceptar el hecho de que la web no tiene las mismas limitaciones y diseño para esta flexibilidad. Pero primero, tenemos que «aceptar el flujo y reflujo de las cosas.»

John Allsopp, «A Dao of Web Design»

El arquitecto inglés Christopher Wren dijo una vez que su campo elegido «tiene como objetivo la eternidad», y hay algo atractivo en esa fórmula: A diferencia de la web, que a menudo se establece como el objetivo para la próxima semana, la arquitectura es una disciplina muy definida por su permanencia. Cimientos de un edificio definen su huella, define su marco, da forma a la fachada. Cada fase del proceso arquitectónico es más inmutable, más inalterable que el anterior. Decisiones creativas, literalmente, dan forma a un espacio físico, definiendo la forma en que la gente se mueve a través de sus límites durante décadas o incluso siglos.

Trabajo en la web, sin embargo, es un asunto totalmente diferente. Nuestro trabajo se define por su fugacidad, a menudo refinado o sustituido en uno o dos años. Anchos incoherentes, resoluciones de pantalla, preferencias del usuario y las fuentes de nuestros usuarios instalados son sólo algunos de las cuestiones intangibles a negociar cuando publicamos nuestro trabajo, y con los años, nos hemos convertido en muy hábiles para hacerlo.

Pero el panorama está cambiando, quizás más rápido de lo que nos gustaría. Se espera que la navegación desde dispositivos móviles supere los accesos desde escritorio dentro de tres o cinco años. Dos de las tres consolas de videojuegos dominantes utilizan navegadores web (y uno de ellos bastante bueno). Estamos diseñando para los ratones y teclados, para teclados T9, controladores de juegos de mano, para las interfaces táctiles. En resumen, nos enfrentamos a un mayor número de dispositivos, modos de entrada, y navegadores mejores que antes.

En los últimos años, me he estado reuniendo con un mayor número de empresas que solicitan «un sitio web para iPhone», como parte de su proyecto. Es una frase interesante: A primera vista, por supuesto, habla de la calidad del móvil por parte de WebKit como un navegador, así como un negocio de gran alcance para pensar más allá del escritorio.

Pero a medida que los diseñadores, creo que a menudo toman la comodidad en estos requisitos explícitos, ya que nos permiten compartir los problemas que tenemos ante nosotros. Podemos poner en cuarentena la experiencia móvil en subdominios separados, espacios distintos y separados de «la página web sea iPhone.» Pero, ¿qué será lo próximo? ¿Un sitio web de IPAD? ¿Un sitio web de N90? ¿Podemos realmente comprometernos en seguir apoyando cada nuevo agente de usuario, con su propia experiencia a medida? En algún momento, esto empieza a parecer un juego de suma cero. Pero ¿cómo podemos nosotros y nuestros diseños adaptarnos?.

Una base flexible

Veamos un ejemplo de diseño. He construido una simple página de una revista hipotética, es un diseño sencillo de dos columnas basado en una red fluida, con pocas imágenes flexibles salpicadas por todos los lugares. Como un defensor de tiempo atrás de diseños no-fijos, he sentido durante mucho tiempo que eran más «una prueba de futuro», simplemente porque eran diseños agnósticos. Y hasta cierto punto, eso es cierto: diseños flexibles no hacen suposiciones sobre el ancho de una ventana del navegador, y se adaptan muy bien a los dispositivos que tienen modos vertical y horizontal.

Imágenes grandes son grandes. Nuestro diseño a pesar de flexible, no responde bien a los cambios en la resolución o el tamaño de la vista.

Pero ningún diseño, fijo o fluido, tiene una dimensión continuamente extendida más allá del contexto para el que fue pensado originalmente. El diseño de ejemplo escala perfectamente con la redimensión de la ventana del navegador, pero los puntos de estrés aparecen rápidamente a resoluciones más bajas. Cuando se ve en una ventana más pequeña de 800×600, la ilustración detrás del logotipo se corta, el texto de navegación se presenta en forma poco adecuada, y las imágenes de la parte inferior se vuelven muy compactas e ilegibles. Y no es sólo el extremo inferior del espectro de la resolución el que está afectada: al ver el diseño en una pantalla panorámica, las imágenes rápidamente crecen hasta tamaños difíciles de manejar, agolpándose al contexto que lo rodea.

En resumen, nuestro diseño flexible funciona bastante bien en el contexto de escritorio para el cual fue diseñado, pero no está optimizado para extenderse mucho más allá.

Volviendonos adaptables

Recientemente, una disciplina emergente llamada «arquitectura receptiva» ha empezado a cuestionar cómo los espacios físicos pueden responder a la presencia de las personas que pasen por ellos. A través de una combinación de la robótica y materiales elásticos incorporados, los arquitectos están experimentando con instalaciones de arte y estructuras de paredes que se doblan, flexionan y se expanden cuando las personas se acercarse a ellas. Los sensores de movimiento se puede combinar con sistemas de control climático para ajustar la temperatura de una habitación y la iluminación de ambiente, con la presencia de gente. Las empresas ya han producido «la tecnología del vidrio inteligente», que automáticamente se vuelve opaco cuando los ocupantes de una habitación alcanzar un umbral de densidad, dándoles una capa adicional de privacidad.

En el libro «Arquitectura Interactiva», Michael Fox y Kemp Miles describen este enfoque más adaptable como «un sistema múltiple de circuito en el que uno entra en una conversación; un intercambio de información continuo y constructivo». Enfatizo eso ya que creo que es una sutil pero poderosa distinción: en lugar de crear inmutabilidad, que no cambia los espacios que definen una experiencia particular, sugieren que los habitantes y la estructura se puede y se deben influenciar mutuamente.

Este es nuestro camino a seguir. En lugar de adaptar los diseños desconectados para un número cada vez más creciente de dispositivos web, podemos tratarlos como facetas de la misma experiencia. Podemos diseñar para una experiencia visual óptima, pero incorporar tecnologías basadas en estándares en nuestros diseños para que sean no sólo más flexibles, sino también más adaptables a los tipos de medios a los que se prestan. En resumen, tenemos que practicar el diseño web receptivo. Pero, ¿cómo?.

Conociendo los medios de consulta

Desde los días de CSS 2.1, nuestras hojas de estilo han disfrutado de un cierto grado de concienciación de dispositivos a través de los diferentes tipos de medios. Si alguna vez has escrito una hoja de estilo en cascada (CSS), ya estarás familiarizado con el concepto:

Con la esperanza de crear diseños de páginas perfectamente formateadas, la especificación CSS nos proporciona un grupo de tipos de medios aceptables, cada uno diseñado para apuntar a una clase específica de dispositivo preparado para la web. Pero la mayoría de navegadores y dispositivos nunca realmente han adoptado el espíritu de la especificación, dejando muchos tipos de medios implementados de manera imperfecta, o ignorándolos por completo.

Afortunadamente, el W3C creó consultas de los tipos de medios como parte de la especificación CSS3, mejorando los tipos de medios. Una consulta de los tipos de medios nos permite apuntar no sólo a algunas las clases de determinados dispositivos, sino también inspeccionar las características físicas de prestaciones del dispositivo haciendo nuestro trabajo.

Por ejemplo, tras el reciente aumento de la telefonía móvil web, las consultas de los tipos de medios se convirtieron en una popular técnica cliente-servidor para la entrega de una hoja de estilos en cascada (CSS) a medida para el iPhone, Android, y sus semejantes. Para ello, se puede incorporar una consulta en un atributo de una hoja de estilo en cascada de los tipos de medios:

 media="screen and (max-device-width: 480px)"href="shetland.css"

La consulta contiene dos componentes:

1. Un tipo de medio (pantalla), y
2. la consulta real encerrada entre paréntesis, que contiene una determinada característica de medio (max-device-width) (ancho-máximo-dispositivo) a inspeccionar, seguido por el valor objetivo (480px).

En Inglés simple, estamos preguntando al dispositivo si su resolución horizontal (max-device-width) es igual o inferior a 480px. Si pasa la prueba, en otras palabras, si queremos ver nuestro trabajo en un pequeño dispositivo de pantalla como el iPhone, el dispositivo cargará la hoja de estilos shetland.css. De lo contrario, el enlace será ignorado.

Los diseñadores han experimentado diseños con la resolución-consciente en el pasado, apoyándose fundamentalmente en soluciones JS-Driven como excelente guión de Cameron Adams. Sin embargo, la especificación de la consulta de medios ofrece una serie de características de los medios que se extiende mucho más allá de la resolución de pantalla, ampliando el alcance de lo que podemos comprobar con nuestras preguntas. Lo que es más, puede probar varios valores de propiedad en una sola consulta concatenada a la palabra clave:

 media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
href="shetland.css" />

Además, no estamos limitados a la incorporación de consultas de medios en nuestros enlaces. Podemos incluirlas en nuestras hojas de estilo (CSS), ya sea como parte de una regla @media:

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

O como parte de la directriz @import:

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

Pero en cada caso, el efecto es el mismo: Si el dispositivo pasa la prueba planteada por nuestra consulta de los medios, el CSS correspondiente se aplica a nuestras instrucciones. Las consultas de los medios son, en resumen, comentarios condicionales para otros. En lugar de establecer una versión específica de un navegador, podemos corregir los problemas en nuestro diseño con las medidas aumentadas más allá de su resolución ideal inicial.

Adaptar, responder y superar

Vamos a centrar nuestra atención en las imágenes de la base de nuestra página. En su diseño por defecto, el CSS relevante actual se parece a esto:

.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;
}

He omitido una serie de propiedades tipográficas para centrarme en el diseño. Cada elemento de la figura tiene un tamaño de aproximadamente un tercio de la columna que contiene, con el margen derecho cero para los dos cuadros al final de cada fila (li#f-mycroft, li#f-winter).

Y esto funciona bastante bien, hasta que la vista es notablemente más pequeña sea o mayor que nuestro diseño original. Con las consultas de los medios podemos aplicar resoluciones específica a layouts fijos de nuestro diseño para responder mejor a los cambios en la pantalla.

En primer lugar, linealizar nuestra página desde la ventana de vista previa mostrada por debajo de un determinado umbral de resolución, es decir, 600px. Luego, al final de nuestro estilo en cascada (CSS), se crea un nuevo bloque @media, de la siguiente manera:

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

Si observamos nuestra página actualizada en un navegador moderno y reducimos el tamaño de la ventana por debajo de 600px, la consulta de medios desactivará la fluctuación de elementos principales del diseño, acumulando en cada cuadro otro en el flujo del documento. Por lo tanto, nuestro diseño en miniatura está bien estructurado, pero las imágenes de abajo no se dimensionan de modo inteligente. Si introducimos consulta de medios, se puede cambiar el diseño de forma adecuada:

@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;
}

Nuestras cifras pueden cambiar el diseño para adaptarse a pantallas más pequeñas.

No nos preocupemos por los distintos porcentajes, simplemente estamos volviendo a calcular la anchura fluida para informar al nuevo diseño lineal. En resumen, estamos cambiando de un diseño de tres columnas para un diseño de dos columnas cuando el ancho de la ventana de visualización registra por debajo de 400px, haciendo las imágenes más prominentes.

En realidad, también podemos lograr el mismo enfoque para pantallas grandes. Para una mayor resolución, podemos adoptar un tratamiento de seis imágenes atravesadas, posicionándolas en la misma línea:

@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 funcionando en ambos lados del espectro resolución correctamente, optimizando el diseño y cambiar la resolución en pantallas grandes de un dispositivo similar.

Para especificar un ancho mínimo min-width en una nueva consulta de medios podemos cambiar las imágenes con un formato de línea única.

Sin embargo, esto es sólo el principio. A partir de consultas de medios integradas dentro de nuestro CSS, podemos cambiar mucho más que la posición de algunas imágenes: podemos introducir nuevos diseños y alternativos ajustados para cada variación de resolución, tal vez haciendo la navegación más prominente en una pantalla panorámica o reposicionando el logo superior en pantallas más pequeñas.

A través del diseño receptivo, no sólo podemos linealizar nuestros contenidos para dispositivos pequeños, sino también optimizar la presentación a través de un cambio de imagen.

Sin embargo, un diseño receptivo no se limita a cambios en el diseño. Consultas de medios nos permiten practicar una precisión perfecta, ajustada de acuerdo a los cambios de páginas: podemos aumentar el área de destino en los enlaces de las pantallas más pequeñas, de acuerdo con la Ley de Fitts en dispositivos táctiles; selectivamente mostrar u ocultar los elementos que pueden mejorar la navegación de las páginas, incluso podemos practicar el formato de texto receptivo para cambiar gradualmente el tamaño y formato de de este, optimizando la experiencia de lectura.

ALGUNAS NOTAS TÉCNICAS

Debe tenerse en cuenta que las consultas de medios gozan de un apoyo sólido entre los navegadores modernos. Navegadores como Safari 3+, Chrome, Firefox 3.5+, Opera 7+, todos oriundos de consultas de medios, así como los nuevos navegadores móviles como Opera Mobile y WebKit móvil. Ciertamente, las versiones antiguas de navegadores no soportan consultas de medios. Mientras que Microsoft se ha comprometido «a soportar consultas de medios en IE9″», Internet Explorer no ofrece una implementación nativa.

Sin embargo, para quien esté interesado en implementar el soporte al navegador para consultas de medios, existe una solución basada en JavaScript:

Recientemente se puso en marcha el css3-mediaqueries.js, una biblioteca que promete «hacer en IE 5+, Firefox 1+ y Safari 2, el análisis de forma transparente, comprobar y aplicar CSS3 consultas de medios», incluido en @media.

Pero si el uso de JavaScript no te gusta, es algo perfectamente comprensible. Sin embargo, esto refuerza la conveniencia de construir un diseño en una red flexible, asegurando que el diseño se beneficiará de un cierto grado de flexibilidad en los navegadores y dispositivos en los que @media no es perceptible.

Como continuar

Redes (grids) fluidas, imágenes flexibles y consultas de medios son los tres ingredientes técnicos para un diseño web receptivo, que también implica una nueva manera de pensar. En lugar de poner nuestro contenido en cuarentena para un dispositivo específico, podemos utilizar consultas de medios para un mejor desarrollo de nuestro trabajo en diferentes contextos visuales. Esto no quiere decir que hay un tratamiento para sitios separados dirigidos a dispositivos específicos, -algo que ya se hacía desde tiempo atrás por parte de desarrolladores de layouts-, por ejemplo, si el objetivo del usuario de su sitio móvil es más limitado, por lo tanto contenidos diferentes para cada uno puede ser un mejor enfoque.

Sin embargo, este tipo de pensamiento de diseño no tiene que ser norma para nosotros. Ahora más que nunca, estamos diseñando un trabajo que debe ser visto con una inclinación para experiencias diferentes. El Diseño Web Receptivo (Responsive Web Design) nos ofrece un camino a seguir, y permitirnos «por fin» diseñar para contenidos fluidos.

Ilustraciones de Kevin Cornell

Una traducción y adaptación para Español (Internacional) de gnumax sin el permiso del autor. Hay otras traducciones disponibles para Español en Internet.

Artículo original de Alist Apart