Hubo un tiempo en el que nuestros monitores de tubo de 14 pulgadas y
nuestras todavía precarias tarjetas gráficas nos permitían disfrutar de
resoluciones ahora discretas, como aquellos 800 x 600 px habituales que
tardaron bastante tiempo en ser superados a medida que el
hardware
avanzaba y los usuarios tenían acceso a una tecnología mejor. Por aquel
entonces, en plena ebullición de la red, con Flash asomando la cabeza,
parecía óptimo diseñar webs teniendo en cuenta ese ancho máximo de 800
píxels, intentando que ningún usuario se encontrase con
situaciones incómodas,
como intentar acceder a contenidos que quedasen fuera del alcance de su
pantalla o enfrentarse a sistemas de navegación prácticamente
inservibles.
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.