Con la llegada de monitores planos y la mejora paulatina del hardware, nuevos estándares ganaron terreno y algunas compañías empezaron a arriesgarse, tomando como base unos 1024 px de ancho total que se convirtieron en el ‘nuevo límite’ del diseño web. Fruto de ello surgieron sistemas modulares basados en la reticulación de un área de 960 px, pensados para aprovechar al máximo el espacio disponible, al tiempo que fragmentábamos de forma eficiente un columnado flexible sobre el que ubicar cada elemento del diseño.
Superada la primera década del siglo, nos encontramos en un momento en el que prácticamente cualquier usuario puede permitirse comprar un equipo de aceptable calidad a precios razonables, con pantallas que oscilan entre las 10 pulgadas de portátiles compactos y las 30 de monitores de gran calidad, con un rango de resoluciones excepcionalmente amplio. A ello, debemos añadir todo un nuevo océano de usuarios que aprenden a utilizar la red desde sus móviles mientras personas mayores sin contacto previo con la tecnología, encuentran el uso de un tablet sencillo y próximo y los niños disfrutan accediendo a contenidos desde cualquiera de las plataformas comentadas de forma indiscriminada.
Así que es lógico preguntarse: ¿cuál es el nuevo estándar? ¿Qué resolución debemos tener en cuenta a la hora de plantear un nuevo diseño para un cliente? ¿Es posible seguir teniendo en cuenta aquellos 1024 px casi legendarios y asegurarnos de que los usuarios menos actualizados en términos de hardware/software puedan seguir accediendo a nuestros contenidos? Lo es, siempre que tengamos en cuenta que será un planteamiento poco usable en un teléfono móvil y visualmente algo anticuado para grandes monitores y altas resoluciones como las cercanas a los 3.000 px de ancho que determinados equipos pueden ofrecer a día de hoy.
Así que la respuesta es que ya no existe un estándar acotado. Los formatos fijos y el diseño estático han pasado a mejor vida y la actualidad pasa por ofrecer una buena experiencia de uso, independientemente del dispositivo que utilicemos para acceder al contenido. En base a este punto de partida y al avance técnico en lo relativo a CSS y Html, Ethan Marcotte acuñó el término ‘Responsive Web Design’ para referirse a un diseño sensible al entorno en el que se muestra. El perfil profesional del propio Marcotte hizo que su discurso se basase en sistemas reticulares fluidos y otros recursos similares, pero la intención de este post no es profundizar en aspectos técnicos, sino explicar la idea esencial de esta necesaria realidad del diseño web actual.
No hay forma más sencilla de explicar este concepto que probándolo de forma directa. Trata de acceder al delicioso site Food Sense. Expande la ventana de tu navegador tanto como te sea posible en tu monitor y después ve acortando el ancho de la misma paulatinamente. Comprobarás como el diseño se readapta en base a varios estados que coinciden con resoluciones concretas. En ocasiones, los cambios se limitan a reducciones en el cuerpo de letra o el ancho del columnado, mientras que en otras, la disposición de los elementos de navegación y otros módulos se reposicionan de forma calculada.
Trata de hacer lo mismo usando tu tablet e intenta visualizar el site tanto en formato vertical como horizontal. La diferencia de resolución entre ambos anchos (1024 vs 768 px, p.e.) dará como resultado un diseño ligeramente distinto pero, y ahí radica lo importante, la experiencia seguirá siendo la apropiada y las diferencias en términos visuales, prácticamente inapreciables para usuarios poco preocupados por estos temas. Si accedes al site usando tu smartphone, verás que el contenido se reconstruye con un formato que permite que la información sea igualmente accesible pero adaptada, para una legibilidad adecuada a las escasas dimensiones de la pantalla.
Hace dos años que Marcotte explicó de forma esclarecedora en su artículo original de A List Apart la problemática del “multi-plataformismo” derivado del acceso a la red mediante dispositivos tan diversos como los mencionados smartphones o tablets, o incluso videoconsolas, en ocasiones haciendo uso de navegadores muy diversos. Determinados clientes empezaron a solicitar versiones específicas para iPhone de sus respectivos sites, en ocasiones encontrando soluciones parciales como el destierro de dichas versiones a subdominios. Así que el diseño sensible o adaptable parece una solución adecuada que llega para quedarse, independientemente de los avances técnicos que mejoren su aplicación a futuros formatos.
Consideraciones
Lógicamente, desarrollar un site adaptado a las necesidades actuales requiere más tiempo que plantear uno limitado a una maqueta fija. Si bien existen recursos a nivel de desarrollo web que pueden acelerar mucho el proceso de implementación, las decisiones que se tomen en cuestión de diseño no son triviales y siguen estando en manos de personas, por lo que las variaciones que puedan existir en términos de proporciones o disposición de elementos deben ser consideradas y estudiadas de antemano.Esto puede generar una planificación más abultada de lo esperado para aquellos que estén acostumbrados al acelerado desarrollo web habitual, pero teniendo en cuenta las tendencias actuales en cuanto al acceso a internet a través de teléfonos y otros dispositivos portables, parece sabio invertir tiempo y dinero en un diseño que:
- Asegure el funcionamiento del site en cualquier situación.
- No implique el desarrollo paralelo de versiones adicionales que convivan entre sí.
- Dote a nuestra web de una vida útil considerablemente más larga.
- Mejore la percepción del usuario sobre nuestro trabajo.
La posición del diseñador
Como diseñador de formación, doy fe de que un profesional del diseño gráfico, especialmente si proviene de un ámbito más cercano a la gráfica impresa en toda su extensión, se sentirá especialmente incómodo al tener que plantear un esquema de este tipo. Ser conscientes de que es complicado controlar en cada momento la forma exacta en la que un usuario visualiza un determinado contenido incomoda sobremanera al diseñador (en este sentido, los desarrolladores tienen una visión mucho más práctica).A los omnipresentes problemas con las interpretaciones entre navegadores, se le suma ahora el hecho de pensar en un diseño totalmente flexible, por lo que el interés o el reto en cada proyecto recae en aspectos distintos. La importancia del elemento que se encuentra perfectamente alineado en unas coordenadas determinadas se transforma en un interés creciente por sistemas modulares avanzados, sin dejar de lado, claro está, todo su criterio tipográfico y compositivo. Los límites del papel nunca tuvieron sentido en el diseño web.
Buenas prácticas
A estas alturas, son muchos los ejemplos que podemos encontrar en la red y que demuestren las bondades de lo que formalmente podemos llamar Responsive Design. Bastarán algunas búsquedas en Google para encontrar acertadas recopilaciones de enlaces de interés en lo que se refiere al tema que nos ocupa. Sin embargo, nosotros también tenemos nuestros favoritos, que en esta ocasión limitaremos a tres para dejar que descubras por ti mismo muchos otros ejemplos, cada vez más presentes en la actualidad web:
1. Edenspiekermann
El último proyecto empresarial del respetado diseñador Erik Spiekermann, con presencia en Alemania y Holanda. Su propio website es un fantástico (y temprano) ejemplo de su buen hacer y de la aplicación del concepto de Responsive Design. Méritos técnicos y gráficos a parte, su web es totalmente fiel a su filosofía general e incluso la redacción de sus artículos y manifiestos denota carácter.
2. Teehan/Lax
Unos pioneros del Responsive Design y un equipo realmente respetado en los últimos años. Sus artículos dejan claro su enorme bagaje técnico y gráfico, pero además ofrecen muchos ejemplos sobre cómo poner dicho conocimiento al servicio de una estrategia sólida. Sus secciones Labs y Downloads son sumamente interesantes y demuestran su generosidad hacia la comunidad.
3. Sparkbox
Una empresa que, precisamente, vende Responsive Design. Llaman SmartSites a este tipo de producto y toda su web es un manifiesto a favor del diseño adaptable. Como no podía ser de otra forma, su site es un gran ejemplo de lo que venden.
—
Para aquellos interesados en el tema, especialmente desde un punto de vista técnico, tal vez sea inteligente recurrir al excelente libro escrito por el propio Marcotte y editado por A List Apart / A Book Apart como libro impreso o electrónico: Responsive Web Design, de Ethan Marcotte.
