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

La marca de fuego se define como una señal carbonizada colocada principalmente en los cantos de los libros mediante un instrumento metálico candente. A la fecha se valora como un testimonio histórico distintivo que permite identificar a las instituciones y particulares que se valieron de ellas; como evidencia de haber sido los poseedores de ciertas colecciones bibliográficas. [Catálogo Colectivo de Marcas de Fuego, 2010].

Aunque las marcas de fuego resultan interesantes, por lo mismo de su aplicación, muchas pueden notarse como monogramas de trazos simples – "cuasi serifos" por decirlo así. Los que formamos el comité del proyecto, consideramos en cierto momento asociar la identidad visual con una "marca de fuego particular". Sin embargo, decidimos que sería mejor una solución que evoque a "algo antiguo" sin caer en la obviedad de la marca, considerando la morfología tipográfica como elemento distintivo.

Y es que el asunto fuerte de la marca: es lograr su construcción de forma que sea armoniosa y aplicable como símbolo de una identidad visual.

Unas muy buenas referencias que conseguimos fue de "Escuela Paleográfica" de AndresMerino de Jesucrito, libro que data de 1780. Miembros del comité propusieron que la 'M' y la 'F' deberían tener un carácter protagónico, funcionando como "símbolo" dentro del imagotipo, convirtiéndose de ser posible en una fusión de 'MF' por "Marcas de Fuego".

Una vez determinada la "MF" seleccionada, mi participación activa, estuvo en el ajuste de las curvas y la presentación de diferentes arreglos con la propuesta. Mi aprendizaje en este proceso fue cuidar esa sensación caligráfica, resaltar que la 'M' efectivamente es una 'M' e incorporar ese detalle que evoca al gancho de una 'F', entender cómo es el ritmo en los trazos y dónde es necesario romper las reglas.

Esta es la presentación que presenté al comité de dicho proceso:

El arreglo que seleccionamos al final fue el siguiente:

Con esta experiencia tuve la oportunidad de analizar y ver la riqueza de los trazos caligráficos. Es difícil expresar la exquisitez de un trazo, pero creo ahora que cuando conectas mentalmente cómo era la "punta" de la pluma más la forma del trazo, puedes tener una idea de cómo se da la fluidez en la mano y muñeca durante la escritura (sobretodo en mi caso que me considero un neófito caligráfico), lo cual hace que disfrutes y aprecies esta habilidad.

En cuanto a la parte humana del proceso, confirmé este asunto de que al ser el diseño visual una capacidad sustentada en la alfabetización visual (por lo que vemos) y posible de ejecutar prácticamente por cualquiera (porque al menos podemos manipular una herramienta de trazo o escritura), es natural que todos quieran anteponer su punto de vista sobre cómo debería ser un logo. Lo interesante aquí es escuchar y entender qué se comenta, por qué se comenta y reconocer el alcance o límite del conocimiento en el que se basan los comentarios/toma de decisiones; y aún más, que al trabajar en comité, la democracia juega un papel fundamental para llegar a acuerdos y concluir con los objetivos.

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