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

En un proyecto reciente, me topé con un formulario web para búsquedas avanzadas. El texto en el formulario ya estaba previamente aprobado. En este caso, mi asignación fue realizar un posible ajuste visual al contenido del formulario.

El formulario original:

El formulario en realidad son dos: uno tiene que ver con la búsqueda por "Procedencia" y/o "Institución" y el otro con la búsqueda avanzada por "Identificador de la marca". Sin duda, una forma directa de resolver esta situación es a través de una "división visual" que rompiera la lectura tan vertical que se tenía originalmente.

La parte de "Procedencia" y/o "Institución" resulta complicada por si misma: ¿cómo sabes qué campo es más importante?, ¿se llena uno? ¿se llenan ambos? Al final se decidió que el usuario, en su curva de aprendizaje, aprendiera a trabajar esta sección sin "ayudas visuales" adicionales — como poner una leyenda al estilo: "A ver mi estimado usuario, o llenas uno o llenas los dos, etc".

De la parte de "Buscar en", "Tipología" y "Ordenar resultados por", me surgió la duda si debía cada sección acomodarse horizontalmente. Eso daría una dinámica de trabajo de ir bajando un renglón/bloque a la vez. Sin embargo, esa opción no podría ser adecuada porque al menos en "Buscar en", las 8 opciones la convierten en impráctica. El cambio que sí se realizó fue que las opciones por defecto en "Búscar en", "Tipología" y "Ordenar resultados por" sean más evidentes para el usuario poniéndolas de primero.

Este es el resultado del formulario:

Aunque los cambios realmente no son drásticos, puede observarse que con un acomodo más reticulado y manejo del aire compositivo en adición a las cuestiones planteadas arriba, el formulario se ve más consistente y quizá sea más usable. Afirmación, que por su naturaleza, sólo se puede validar a través de una prueba de usabilidad

En la celebración de la primera comunión es común encontrar un pastel con cubierta blanca o en tonos marfil, típicamente adornado con algún motivo relacionado: una hostia, una cruz, unas uvas o bien, un cáliz de consagración. La señora comentó que tuvo un roce con el pastelero porque cuando llegó a "apartar" el pastel (dejar el anticipo y realizar su encargo), ella había sido muy específica de que el pastel tenía que ser de chocolate porque a su ahijado le gusta el chocolate. Así de simple.

Luego comentó que el pastelero le dijo: "Eso no se puede hacer". A lo que ella respondió: "¿No se puede o no quiere?". Como respuesta, el pastelero le preguntó que cómo era posible hacer un pastel de primera comunión que no fuera blanco, ¡todos los pasteles de primera comunión son blancos! Escuché que ella le respondió: "El pan y la cubierta pueden ser de chocolate y los adornos hechos a base de merengue blanco". Bueno, en realidad la señora se expresó con otras palabras, pero ese fue el punto: de que sí se podía.

Me quedé pensando entonces cómo está situación se da en un contexto de diseño. Podríamos pensar que este asunto sin duda está bien relacionado con el diseño de servicios, pero enfocándonos más en el diseño de lo visual (en proyectos de diseño gráfico, de información e incluso de interacción), ¿cuál sería el símil de esta historia? En realidad sólo dejo la pregunta al aire, aunque me quedé con un par de reflexiones y preguntas:

El pastelero pensando en él y en su negocio en general, debería ser tanto un buen pastelero como versátil: un pastel de chocolate le debería quedar tan sabroso como un pastel sabor vainilla. Para este caso, no escuché que se tratara de una persona que sólo hiciera pasteles de primera comunión. Considero que son varios factores a analizar, quizá cuestionarnos sobre el nivel de especialización del pastelero, su experiencia o la forma personal metodológica con la que enfrenta un problema y proyecta una solución. Quizá este asunto pueda verse también desde el punto de vista de la innovación, creatividad o incluso, de la mercadotecnia.

Hasta donde sé, en ningún lugar está acuñado en piedra que los pasteles de primera comunión sean blancos o que los pasteles de niña sean color rosa. Sin embargo es una convención de fuerte carga simbólica tanto en los colores como en las figuras. Aunque es verdad que esto no está relacionada con cubrir la necesidad del ahijado. Vamos, el niño quería su pastel de chocolate por algo. ¿O el pastel es realmente para satisfacer (al menos en cumplir con las convenciones dentro de este tema) a los invitados? En todo proyecto, no sólo está el cliente, sino también el usuario y otras personas involucradas; eso hace muy interesante y particular la toma de decisiones dados diversos factores.

En este round pastelero, ¿el experto (el pastelero) debió imponer racional o apasionadamente su punto de vista o hizo bien en aceptar al final las órdenes de su cliente? ¿Fue descabellada la cliente en hacer semejante solicitud con tal de satisfacer el antojo de su ahijado? Y si tomamos en cuenta que lo importante es el rito religioso y su simbolismo, ¿no debería al menos un sacerdote dar sus recomendaciones? Cómo tomaría la mamá e invitados un pastel obscuro en un evento como éste, aunque al final acaben disfrutando e incluso repitiendo rebanada en caso de que el pastel estuviera sabroso?

Bueno, ya estoy exagerando… en realidad esta anécdota, la cual no impidió que disfrutara mis tacos de cecina, sólo causó la curiosidad de preguntarme: ¿qué implicaciones se tendrían si se tratara de un proyecto de diseño?

Saludos.