Elemento indispensable en Responsive Web Design – Media Queries

Publicado: 26 de septiembre de 2012 en Responsive Web Design

Fuente: alistapart

Enlace: http://www.alistapart.com/articles/responsive-web-design/

25 de Mayo de 2010

Diseño Web Responsivo (Responsive Web Design)

Traducción de Responsive Web Design de A List Apart

Artículo original por Ethan Marcotte. Traducción al español por Marcelo Mazza.

El control que los diseñadores conocen en el medio impreso y desean frecuentemente en el medio web, es simplemente una función 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 mobile supere a la navegación desde una computadora de escritorio entre 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 mouses y teclados, 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 enfrentado.

En los últimos años, me he estado 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 mobile 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 un layout directo, de dos columnas, construído en una grilla fluída, con algunas imágenes flexibles desparramadas por ahí. Hace ya tiempo que soy defensor de los layouts no fijos, siempre sentí que tendrían más durabilidad porque eran agnósticos en su layout. 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.

Las imágenes enormes son enormes. Nuestro layout, flexible como es, no responde bien a cambios de resolución o al tamaño de la vista.

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á.

Convirtiéndose en responsivo

Recientemente, una disciplina emergente llamada “arquitectura responsiva” 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 medio que los renderiza. Resumiendo, necesitamos practicar un diseño web responsivo. ¿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ó una 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 typesimplementados 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 layouts 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 palabar 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 test 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 nuestro layout 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 layout 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áficos para enfocarnos en el layout: 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 de, 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 dreduces 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 layout 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 grilla fluida para tener en cuenta el nuevo layout linearizado. En otras palabras, estamos moviéndonos de un layout de tres columnas a uno de dos columnas cuando el ancho de la vista cae por debajo de los 400px, haciendo más prominentes a las imágenes.

Nuestras figuras pueden cambiar su estructura de manera responsiva para adaptarse mejor a pantallas más pequeñas.

Podemos utilizar el mismo enfoque para las pantallas widescreen. Para resolucionas 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 layout a los cambios en el ancho de las ventanas y en las resoluciones de los dispositivos.

Especificando un min-width más ancho en una nueva media query, podemos mover a nuestras imágenes en un layout de una sola fila.

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 nuevos layouts alternativos ajustados para cada rango de resolución, quizás haciendo la navegación más prominente en una vista de pantalla ancha o reposicionándola encima del logo en pantallas más pequeñas.

Diseñando responsivamente, no sólo podemos linearizar nuestro contenido en los dispositivos más pequeños, sino también optimizar su presentación a lo largo de un amplio rango de pantallas.

Pero un diseño responsivo no está limitado a cambios en el layout. 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 responsiva 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+ parsean nativamente las media queries, como también lo hacen navegadores mobile 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 compromeitod para dar 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 de 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, testeen 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 grilla flexible, asegurandote de que tu diseño disfruta alguna flexibilidad en los dispositivos y navegadores que no ven las media queries.

El camino a seguir

Las grillas fluídas, las imágenes flexibles y las media queries son los tres ingredientes técnicos para un diseño web responsivo, 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 hay 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 ese tipo de pensamiento del diseño no tiene por qué ser la forma de pensar 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 responsivo nos ofrece un camino a seguir, permitiéndonos finalmente “diseñar para el flujo y reflujo de las cosas”.

Traducido con el permiso de A List Apart Magazine y el autor.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s