Ahora que la web puede accederse desde una
PC, una
laptop, un
SmartPhone o una tableta, se nos presenta una
paradoja a los diseñadores: debemos creer en la
estructura semántica del contenido de las páginas, pero también hay que cuidar más que nunca la
presentación de la información considerando tanto al usuario como el dispositivo a usar. Últimamente me ha llamado la atención estos sitios que aprovechan las ventajas del CSS para ajustar sus
layouts dependiendo de su resolución, así que aproveché experimentar con un proyecto de rediseño web que tenía pendiente:
La Biblioteca Franciscana.

Mi solución es bastante artesanal y no tiene nada de sofisticada. Aunque hay
artículos bastante completos sobre el tema, yo había leído alguna vez que tenía que ver con el
viewport, y entre los resultados de mi búsqueda di con el uso del parámetro
media y los
CSS Media Queries. En los siguientes recursos está cómo emplear diferentes hojas de estilo dependiendo del medio:
http://css-tricks.com/6206-resolution-specific-stylesheets/
http://css-tricks.com/6731-css-media-queries/
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
http://www.css3.info/preview/media-queries/
http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.thecssninja.com/css/iphone-orientation-css

En cuanto al diseño web, siempre tuve una preferencia por
layouts fijos por tener un mayor control del espacio en ventana y por tomar en cuenta la
resolución estándar de un usuario potencial. Nunca me había preocupado porque la información quedara bien acomodada en diferentes resoluciones; es un reto interesante conservar la
estética reticular y mantener un
flujo de lectura adecuado para cada resolución. Este tipo de soluciones requiere que tengamos una actitud algo quisquillosa y obsesiva, así como trabajar cada
layout hasta quedar satisfechos.

Justo por el cambio de "paradigma" de fijo a adaptable, y ante una especie de "bloqueo ante la hoja en blanco", no quedaba conforme en (regresar a) maquetar primero en algún software de diseño, así que lo trabajé directo en pantalla.
Un pro de esta decisión es que vas viendo "en tiempo real" como quedan las cosas en diferentes navegadores y resoluciones.
Un contra es que podemos perder el control fácilmente —sobretodo si dejamos el proyecto un día o dos. Es importante hacer anotaciones en papel y documentar en las hojas de estilo para que recordemos por qué tomamos ciertas decisiones. En este proyecto, me resultaron —a mi juicio— muchas hojas de estilo y fui redundante en ciertas reglas, dejándolas en cada hoja porque no sabía como iba a verse "el final" en todas las resoluciones; algo así como "un cambio por aquí y luego ajusto por acá".

Con un layout fijo no considero útil que tengamos muchas hojas de estilo, pero dadas las múltiples resoluciones, parece ser necesario un mayor número de "enlaces". Un colega me sugirió hacer
importaciones, pero al final descarté esta opción porque según hojeé, afecta el rendimiento:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Otro punto importante es verificar la compatibilidad de los
CSS Media Queries. Originalmente estaba muy feliz —
tipo the Oatmeal— porque IE se comportaba decente; pero por no leer, me llevo la sorpresa de que fuera de IE 9, simplemente no funcionan:
http://caniuse.com/css-mediaqueries
Ante esta situación, decidí dejarle un
layout fijo a todos aquellos usuarios que tuvieran de IE 8 para abajo y tomando como resolución estándar 1024 px de ancho.
Luego está el asunto del iPhone y del iPad. Hay que poner una línea de código que indique
qué va a pasar cuando el navegador sea Safari. Esta línea asocia la variable "ancho" empleada en el
CSS Media Query con el "ancho" del
iPad,
iPod o
iPhone —según sea el caso. Además, resulta que cuando pasamos de modo
landscape a
portrait, o viceversa, se hace un
zoom medio raro y es posible que los textos se desplieguen de diferente tamaño a como los observamos en una computadora de escritorio. Para validar todo lo anterior está como referencia el siguiente recurso:
http://stackoverflow.com/questions/2977550/iphone-safari-css-rotation-bug

A mi me divirtió mucho esta idea de presentar el mejor layout dado el ancho del
iPod,
iPhone o
iPad. Sin embargo, siendo sinceros y "usables", la desventaja de jugar con diferentes acomodos de la información es que rompemos con la navegación (
browsing) del usuario. Cuando alguno de estos dispositivos se rota 90 grados, debido a este re-acomodo, el usuario pierde vista la información de su interés. Lo anterior es más evidente en el caso del
iPod/
iPhone. Cognitivamente, lo que hacemos es
"resetear" el flujo de interacción; definitivamente algo no bueno para ningún usuario. En este proyecto, la mayoría de la información es estática y aquella que podría cambiar o agregarse durante el año, estará ubicada en la parte superior de las páginas correspondientes.
Una colega me señaló que estos ajustes automáticos no siempre convenían si trabajamos en una computadora de escritorio —o en una laptop con pantalla grande — porque quizá el re-acomodo de la información podría perjudicarnos cuando llevemos a cabo una tarea más compleja, donde trabajemos con la información proveniente de diversas ventanas. Se me hizo un punto válido; por ejemplo, yo mismo he copiado y pegado información de una página web a
Word o
Excel. En este tipo de situaciones, debería de haber una opción para "fijar" el
layout.
Por último, no olviden visitar
http://ciria.udlap.mx/franciscana/ para enterarse de qué conferencias y exposiciones habrá en dicha biblioteca. Saludos :)