Tag Archives: sitio web

Sitio web de la Biblioteca Franciscana

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 :)

Dominios, subdominios y usuarios

Es claro que existen ciertos tipos de usuarios en la web, según su nivel de experiencia en navegación. Cuando diseñamos para la Web, pensamos mucho "si el usuario principiante hace X, entonces pasará Y", o "si el usuario avanzado se encuentra en U, entonces podrá irse a V". Por otro lado una de las premisas del web es nunca asumir que el usuario llegará por tu home o index. Creo que el Google ha hecho esta idea más verdadera que nunca. 

Quiero enfocarme en una situación real en cuanto a los subdominios, pero pero primero un comentario breve con respecto a la selección de dominios: sí es importante cómo "llamar" a nuestra página

El caso de www.tzek-design.com es un ejemplo de lo que no debe hacerse. El guión y el manejo de una palabra en inglés, complica las cosas. Ya sé, ya sé... consecuencias de una decisión rápida y no bien pensada. No lo intenten en sus casas si desean tráfico.

La importancia de seleccionar un buen dominio para la WWW y sus subdominios

Regresando a lo del subdominio y los usuarios. Algo que se nos pasa es pensar que los usuarios, ya sean novatos o expertos, sabrán introducir la URL correctamente en la barra del navegador. Falso; existen usuarios que pueden tener un nivel "decente" de navegación (browsing/surfing) pero no necesariamente se han preocupado por estas cuestiones del dominio.

Una diferencia clara entre uno y otro es la palabra "www". Por ejemplo http://www.yomero.com/blog puede publicitarse (en banners, impresos, anuncios, etc.) como http://blog.yomero.com o bien, solamente blog.yomero.com.

Alguien experto toma rápidamente blog.yomero.com, pero un usuario que no se fija en esas cosas sí pone www.blog.yomero.com o bien, http://www.blog.yomero.com, y no siempre tenemos prevista esta situación.

Mi experimento rápido como usuario notavo es tomar los blogs que están en mi blogroll y testearlos....

  1. http://www.blog.duopixel.com - Funciona. Aunque se ve muy extraño.
  2. http://www.alquimistas.evilnolo.com - Funciona. Y es más, le quita el "www", lo cual, si el usuario se fija, va mostrándole como teclear el nombre "correcto" para la próxima.
  3. http://www.letritas.blogspot.com - Funciona. Igual se ve extraño.
  4. http://www.usolab.com/wl - Excepción. A ellos los pongo ahorita porque ponen "wl" en vez de "blog". ¿Será "wl" por "web-log"? Justo comentando sobre la selección de nombres para los dominios y subdominios. Por cierto, no funciona con wl.usolab.com.
  5. http://www.blog.armandososa.com - Funciona. Es el caso contrario de los alquimistas; aquí aparece el "www" por defecto y si lo pones sin el "www", te lo pone en seguida. ¿Por qué habrá tomado esa decisión Armando Sosa?
  6. http://clear.aiga.org - Funciona. Muy bien, de hecho. La liga original que tengo es http://www.aiga.org/content.cfm/clear, por lo que definitivamente emplearía la primera para hacer diseño gráfico.
Parecerá tonto, pero cuando pasas una "dirección con subdominio", la gente puede perder porque no les jala cuando ponen el "www" acostumbrado. Además, si eres encargado de realizar campañas (impresas) donde tengas este tipo de URLs, es mejor poner "http:// con todo lo demás". Más vale prevenir "conducir bien al usuario", que lamentar.

Diseñar para el oriente

Como diseñadores de información, interacción o de interfaces en general empleamos términos como usabilidad o accesibilidad. No dudo que demos importancia a estos aspectos y consideremos que sí los aplicamos como parte de nuestros diseños, ¿pero realmente son parte de nuestro proceso? ¿estamos sensibles a ellos? Por ejemplo, diseñamos sitios web "para nuestros ojos" como diría Costa, en este caso, nuestros ojos occidentales. ¿Qué pasaría si te pidieran el diseñar la misma información también para Arabia Saudita? ¿Sería diferente el proceso? ¿Seguro? ¿Podrías afirmar por qué?

El experimento va así: entrar al sitio de la KAUST, darle una escaneada rápida al homepage y de ahí identificar qué fue relevante para nuestros ojos. Ahora, buscar la opción "en árabe". ¿cómo se siente ese cambio? Podemos regresar y repetir la operación un par de veces... ¿se siente raro? ¿no normal? ¿se te ha cruzado en la cabeza términos como "curioso" o "por qué hacen X o Y cosa? Página de inicio de KAUST, versión occidental:

Página de inicio de Kaust, versión árabe:

Acercamiento de esta página:

  • Como diseñadores de identidad, ¿podrías decir por qué es relevante que primero se lea la marca en extenso y luego el imagotipo? ¿que no da igual poner KAUST y luego el nombre largo? Si observamos la versión en árabe, no crea mayo conflicto, al contrario, entiendes KAUST y te quedas entonces con esa marca en la cabeza, aunque no sepamos bien que significa.
  • Lo mismo sucede con la foto de del profesor. Si estuviéramos diseñando un portal similar, ¿por qué es importante que aparezca la foto primero? ¿estamos conscientes de por qué tomamos ese tipo de decisiones?
  • ¿El menú debe ir a la derecha o a la izquierda? En los sitios web actuales, fuera de nuestra "occidentalidad" de leer de izquierda a derecha y de arriba hacia abajo, encontramos menús del lado derecho o izquierdo. En este caso el "What's KAUST?" es quien determina la prioridad de lectura de este chunk de información... ¿cuántas veces sabemos que priorizamos contenido en sitios web de forma adecuada? Si fuera un menú común y corriente, da igual que sea derecha o izquierda..?

Parece que pasar de español a árabe consiste en un "flipeo" del layout... Ok. Puede ser. Pero si vemos el sitio en árabe, ¿no es curioso como rompe con nuestra "normalidad" de cómo diseñar para occidente?