Skip to content

Diseño Web Responsive o adaptable

Enlace Original: http://alistapart.com/article/responsive-web-design

Titulo Original: Responsive Web Design
Autor: Ethan Marcotte

El arquitecto inglés Christopher Wren dijo una vez que su campo elegido “apunta a la Eternidad”, y hay algo atractivo en esa fórmula: A diferencia de la web, que a menudo se siente como un objetivo para la próxima semana, la arquitectura es una disciplina muy definida por su permanencia.

Los cimientos de un edificio definen su huella, que define su marco, que da forma a la fachada. Cada fase del proceso arquitectónico es más inmutable, más inmutable que la anterior. Las decisiones creativas dan forma literalmente a un espacio físico, definiendo la forma en que las personas se mueven a través de sus confines durante décadas o incluso siglos.

Trabajar en la web, sin embargo, es un asunto totalmente diferente. Nuestro trabajo se define por su fugacidad, a menudo refinada o sustituida en un año o dos. Los anchos de ventana inconsistentes, las resoluciones de pantalla, las preferencias del usuario y las fuentes instaladas por nuestros usuarios son sólo algunos de los intangibles que negociamos cuando publicamos nuestro trabajo, y con el paso de los años, nos hemos vuelto increíblemente hábiles para hacerlo.

Pero el paisaje está cambiando, quizás más rápidamente de lo que nos gustaría. Se espera que la navegación móvil supere al acceso basado en el escritorio en un plazo de tres a cinco años. Dos de las tres consolas de videojuegos dominantes tienen navegadores web (y una de ellas es bastante excelente). Estamos diseñando para ratones y teclados, para teclados T9, para mandos de mano, para interfaces táctiles. En resumen, nos enfrentamos a un mayor número de dispositivos, modos de entrada y navegadores que nunca.

En los últimos años, me he reunido con más 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 de WebKit móvil como navegador, así como de un poderoso argumento comercial para pensar más allá del escritorio. Pero como diseñadores, creo que a menudo nos sentimos cómodos con estos requisitos explícitos, ya que nos permiten compartimentar los problemas que tenemos ante nosotros. Podemos poner en cuarentena la experiencia móvil en subdominios separados, espacios distintos y separados del “sitio web no iPhone”. Pero, ¿qué sigue? ¿Un sitio web de iPad? ¿Un sitio web de N90? ¿Podemos realmente seguir comprometiéndonos a apoyar a 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 página sencilla para una revista hipotética; es un diseño sencillo de dos columnas construido sobre una rejilla fluida, con no pocas imágenes flexibles salpicadas por todas partes. Como partidario de los diseños no fijos desde hace mucho tiempo, he sentido que eran más “a prueba de futuro” simplemente porque eran agnósticos de los diseños. Y hasta cierto punto, eso es cierto: los diseños flexibles no hacen suposiciones sobre el ancho de la ventana de un navegador y se adaptan perfectamente a los dispositivos que tienen modos vertical y horizontal.

Las imágenes enormes son enormes. Nuestro diseño, por muy flexible que sea, 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, puede escalar sin problemas más allá del contexto para el que fue concebido originalmente. El diseño del ejemplo escala perfectamente bien a medida que se redimensiona la ventana del navegador, pero los puntos de tensión aparecen rápidamente a resoluciones más bajas. Cuando se ve en viewport con un tamaño inferior a 800×600, la ilustración detrás del logotipo se recorta rápidamente, el texto de navegación se puede envolver de forma indecorosa y las imágenes de la parte inferior se vuelven demasiado compactas para que parezcan legibles. Y no es sólo el extremo inferior del espectro de resolución lo que se ve afectado: al ver el diseño en una pantalla panorámica, las imágenes crecen rápidamente a tamaños poco manejables, desplazando el contexto circundante.

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

Llega a ser responsivo

Recientemente, una disciplina emergente llamada “arquitectura responsiva” ha comenzado a preguntarse cómo pueden responder los espacios físicos a la presencia de las personas que pasan a través de ellos. A través de una combinación de robótica empotrada y materiales tensores, los arquitectos están experimentando con instalaciones de arte y estructuras de paredes que se doblan, se flexionan y se expanden a medida que la multitud se acerca a ellas. Los sensores de movimiento pueden combinarse con sistemas de control de climatización para ajustar la temperatura y la iluminación ambiental de una habitación a medida que se llena de gente. Las empresas ya han producido una “tecnología de vidrio inteligente” que puede volverse opaca automáticamente cuando los ocupantes de una habitación alcanzan un cierto umbral de densidad, lo que les da una capa adicional de privacidad.

En su libro Interactive Architecture, Michael Fox y Miles Kemp describen este enfoque más adaptativo como “un sistema de bucle múltiple en el que uno entra en una conversación; un intercambio de información continuo y constructivo”. Énfasis en el mío, ya que creo que es una distinción sutil pero poderosa: en lugar de crear espacios inmutables e inmutables que definen una experiencia en particular, sugieren que el habitante y la estructura pueden -y deben- influirse mutuamente.

Este es nuestro camino a seguir. En lugar de adaptar diseños desconectados a cada uno de los cada vez más numerosos dispositivos web, podemos tratarlos como facetas de la misma experiencia. Podemos diseñar para una experiencia de visualización óptima, pero incrustar tecnologías basadas en estándares en nuestros diseños para hacerlos no sólo más flexibles, sino también más adaptables a los medios que los presentan. En resumen, necesitamos practicar el diseño web responsivo. ¿Pero cómo?

Conoce los Media Query

Desde los días de CSS 2.1, nuestras hojas de estilo han disfrutado de cierta conciencia de los dispositivos a través de los tipos de medios. Si alguna vez ha escrito una hoja de estilo de impresión, ya está 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" />

Con la esperanza de que estaríamos diseñando algo más que impresiones de páginas con un formato claro, la especificación CSS nos proporcionó un grupo de tipos de medios aceptables, cada uno de ellos diseñado para dirigirse a una clase específica de dispositivo preparado para la web. Pero la mayoría de los navegadores y dispositivos nunca adoptaron realmente el espíritu de la especificación, dejando muchos tipos de medios implementados de forma imperfecta o totalmente ignorados.

Afortunadamente, el W3C creó consultas de medios como parte de la especificación CSS3, mejorando la promesa de los tipos de medios. Una consulta de los medios de comunicación nos permite dirigirnos no sólo a ciertas clases de dispositivos, sino también inspeccionar las características físicas del dispositivo que realiza nuestro trabajo. Por ejemplo, tras el reciente auge de Mobile WebKit, las consultas de los medios de comunicación se convirtieron en una técnica popular del lado del cliente para entregar una hoja de estilo personalizada a los teléfonos iPhone, Android y otros similares. Para ello, podríamos incorporar una consulta en el atributo media de una hoja de estilo enlazada:

<link rel="stylesheet" type="text/css"
  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 característica particular del medio (max-device-width) a inspeccionar, seguida por el valor objetivo (480px).

En términos sencillos, le estamos preguntando al dispositivo si su resolución horizontal (ancho máximo del dispositivo) es igual o menor a 480px. Si la prueba pasa, es decir, si estamos viendo nuestro trabajo en un dispositivo de pantalla pequeña como el iPhone, entonces el dispositivo cargará shetland.css. De lo contrario, el enlace se ignora por completo.

Los diseñadores han experimentado con diseños que tienen en cuenta la resolución en el pasado, confiando principalmente en soluciones basadas en JS como el excelente guión de Cameron Adams. Pero la especificación de consulta de medios proporciona una serie de características de medios que van mucho más allá de la resolución de pantalla, ampliando enormemente el alcance de lo que podemos probar con nuestras consultas. Además, puede probar varios valores de propiedades en una sola consulta encadenándolos con la palabra clave y la palabra clave:

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

Además, no nos limitamos a incorporar consultas de los medios de comunicación en nuestros enlaces. Podemos incluirlos 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);

Pero en cada caso, el efecto es el mismo: si el dispositivo pasa la prueba propuesta por nuestra consulta de medios, el CSS relevante se aplica a nuestro marcado. Las consultas de los medios de comunicación son, en definitiva, comentarios condicionales para el resto de nosotros. En lugar de apuntar a una versión específica de un navegador específico, podemos corregir quirúrgicamente los problemas de nuestro diseño a medida que éste va más allá de su resolución inicial e ideal.

Adaptarse, responder y superar

Volvamos nuestra atención a las imágenes en la base de nuestra página. En su diseño por defecto, el CSS relevante tiene el siguiente aspecto:

.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.figure tiene un tamaño aproximado de un tercio de la columna que lo contiene, con el margen derecho puesto a cero para las dos imágenes al final de cada fila (li#f-mycroft, li#f-winter). Y esto funciona bastante bien, hasta que el mirador es notablemente más pequeño o más ancho que nuestro diseño original. Con las consultas de los medios de comunicación, podemos aplicar correcciones específicas de resolución, adaptando nuestro diseño para responder mejor a los cambios en la pantalla.

En primer lugar, vamos a linealizar nuestra página una vez que la vista caiga por debajo de un cierto umbral de resolución, digamos, 600px. Así que en la parte inferior de nuestra hoja de estilo, vamos a crear un nuevo bloque de @media, así:

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

Si usted ve nuestra página actualizada en un navegador de escritorio moderno y reduce el tamaño de su ventana por debajo de 600px, la consulta de medios desactivará los flotadores en los elementos principales del diseño, apilando cada bloque uno encima del otro en el flujo de documentos. Así que nuestro diseño miniaturizado se está perfilando muy bien, pero las imágenes aún no se reducen de forma inteligente. Si introducimos otra consulta de medios, podemos modificar su diseño en consecuencia:

@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 figuras pueden cambiar su diseño para adaptarse mejor a pantallas más pequeñas.

No se preocupe por los desagradables porcentajes; simplemente estamos recalculando los anchos de la rejilla de fluido para tener en cuenta la nueva disposición lineal. En resumen, estamos pasando de un diseño de tres columnas a un diseño de dos columnas cuando el ancho del mirador cae por debajo de los 400px, lo que hace que las imágenes sean más prominentes.

En realidad, también podemos adoptar el mismo enfoque para las pantallas panorámicas. Para resoluciones más grandes, podríamos adoptar un tratamiento de seis cruces para nuestras imágenes, colocá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 maravillosamente en ambos extremos del espectro de resolución, optimizando su diseño para adaptarse a los cambios en el ancho de las ventanas y la resolución de los dispositivos por igual.

Al especificar un ancho mínimo más amplio en una nueva consulta de medios, podemos cambiar nuestras imágenes a un diseño de fila única.

Pero esto es sólo el principio. Trabajando a partir de las consultas de los medios de comunicación que hemos incorporado en nuestro CSS, podemos alterar mucho más que la colocación de unas pocas imágenes: podemos introducir nuevos diseños alternativos ajustados a cada rango de resolución, quizás haciendo que la navegación sea más prominente en una vista de pantalla ancha, o reposicionándola por encima del logotipo en pantallas más pequeñas.

Al diseñar de forma responsable, no sólo podemos linealizar nuestro contenido en dispositivos más pequeños, sino también optimizar su presentación en una amplia gama de pantallas.

Pero un diseño responsive o adaptable no se limita a los cambios de diseño. Las consultas de los medios de comunicación nos permiten practicar un ajuste increíblemente preciso a medida que nuestras páginas se remodelan: podemos aumentar el área de destino en los enlaces de las pantallas más pequeñas, cumplir mejor con la Ley de Fitts en los dispositivos táctiles; mostrar u ocultar de forma selectiva los elementos que pueden mejorar la navegación de una página; incluso podemos practicar la composición tipográfica receptiva para alterar gradualmente el tamaño y la orientación de nuestro texto, optimizando la experiencia de lectura para la pantalla que lo proporciona.

Algunas notas técnicas

Cabe señalar que las consultas de los medios de comunicación gozan de un soporte increíblemente robusto entre los navegadores modernos. Los navegadores de escritorio como Safari 3+, Chrome, Firefox 3.5+ y Opera 7+ analizan de forma nativa las consultas multimedia, al igual que los navegadores móviles más recientes como Opera Mobile y Mobile WebKit. Por supuesto, las versiones anteriores de estos navegadores de escritorio no admiten consultas multimedia. Y aunque Microsoft se ha comprometido a soportar consultas de medios en IE9, Internet Explorer no ofrece actualmente una implementación nativa.

Sin embargo, si está interesado en implementar el soporte de navegadores heredados para consultas de medios, hay un lado positivo de JavaScript-tinted:

  • Un plugin de jQuery de 2007 ofrece un soporte de consulta de medios algo limitado, implementando sólo las propiedades de medios de ancho mínimo y máximo cuando se adjuntan a elementos de enlace separados.
  • Más recientemente, css3-mediaqueries.js fue lanzado, una librería que promete “hacer que IE 5+, Firefox 1+ y Safari 2 analicen, prueben y apliquen transparentemente las CSS3 Media Queries” cuando se incluyan a través de los bloques @media. Aunque se trata en gran medida de una versión 1.0, personalmente la he encontrado bastante robusta, y planeo observar su desarrollo.

Pero si el uso de JavaScript no le atrae, es perfectamente comprensible. Sin embargo, esto refuerza el argumento a favor de construir su diseño sobre una cuadrícula flexible, asegurando que su diseño goce de cierta flexibilidad en los navegadores y dispositivos ciegos a las consultas multimedia.

El camino a seguir

Las cuadrículas fluidas, las imágenes flexibles y las consultas de medios son los tres ingredientes técnicos para un diseño web receptivo, pero también requiere una forma de pensar diferente. En lugar de poner en cuarentena nuestro contenido en experiencias dispares y específicas de dispositivos, podemos utilizar las consultas de los medios de comunicación para mejorar progresivamente nuestro trabajo en diferentes contextos de visualización. Esto no quiere decir que no existe un caso de negocio para sitios separados orientados a dispositivos específicos; por ejemplo, si los objetivos de usuario para su sitio móvil son más limitados en alcance que su equivalente de escritorio, entonces servir contenido diferente para cada uno podría ser el mejor enfoque.

Pero ese tipo de pensamiento de diseño no tiene por qué ser nuestro predeterminado. Ahora más que nunca, estamos diseñando trabajos pensados para ser vistos a lo largo de un gradiente de diferentes experiencias. El diseño web con capacidad de respuesta nos ofrece un camino a seguir, permitiéndonos finalmente “diseñar para el flujo y reflujo de las cosas”.

Acerca del autor

Ethan Marcotte es un diseñador web independiente que se preocupa profundamente por el diseño hermoso, el código elegante, y la intersección de los dos. A lo largo de los años, su clientela ha incluido la revista New York Magazine, el Festival de Cine de Sundance, The Boston Globe y People Magazine. Ethan se puede encontrar en Twitter o en su descuidado blog, y su libro más reciente es Responsive Web Design.