Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

El DAO del Diseño Web

por John Allsopp

Lo que el Budismo Zen significaba para los años 70, lo ha representado el Tao Te Ching en los 90. Desde Piglet y Pooh a la Física y en otros ámbitos, muchos han intentado buscar una forma de aplicar el Tao Te Ching a algo (El Tao de la Física), o algo al Tao Te Ching (El Tao de Pooh). Puede ser un truco barato, pero últimamente me ha sorprendido que hay bastantes cosas que se pueden entender del diseño web a través del prisma del Tao.

El Taoísmo es una filosofía, como el Budismo, una forma de vivir, de estar en el mundo, que parte de un texto de gran antigüedad, el Tao Te Ching, cuyos 81 “capítulos” enigmáticamente recorren la experiencia humana, pero con un fuerte tema recurrente, el de la armonía.

Estos últimos años, para bien o para mal, mi vida ha girado mucho en torno de las hojas de estilo en cascada. Desarrollo software, tutoriales y guías para las hojas de estilo; he respondido incontables cuestiones acerca de ellas en grupos de noticias o a través de email; he luchado para que las adoptaran con el grupo de The Web Standards Project. I lentamente he llegado a entender el diseño web de una forma totalmente diferente gracias a ellas, a ver una estrecha relación entre diseño y el Tao.

Siento una tensión real entre la web tal como la conocemos, y l web como podría ser. Es la tensión entre un medio existente, la página impresa, y su descendiente, la web. Y ya es hora de entender realmente la relación entre padre e hijo, y dejar que el hijo siga su propio camino por el mundo.

¿El mismo viejo medio?

“Las jerarquías bien establecidas no se arrancan fácilmente;
Las creencias muy arraigadas no se pierden fácilmente;
Por eso el ritual sigue generación tras generación.”
Tao Te Ching; 38 Ritual

Si nunca viste los primeros programas de televisión, se trata de un material muy instructivo. La Televisión en esta época se consideraba a menudo como “radio con imágenes”, y ésa es una descripción muy ajustada. La mayoría de la televisión seguía el formato de los programas de radio más populares de la època. De hecho, programas como The Tonight Show, con sus diferentes variantes en casi todos los canales del mundo (con una orquesta, la charla con el presentador y los invitados), o las noticias, con el presentador sobrio y vestido con traje, se mantienen como vestigios del medio a partir del cual surgió la televisión. Un palimpsesto de medios de comunicación del pasado.

Piensa también en los primeros videos musicales (algunos de nosotros podríamos ser casi tan viejos como para poder hacerlo). Esencialmente la banda se imitaba a sí misma tocando una canción. Repetición.

Cuando un nuevo medio toma prestado de otro ya existente, algunos de los préstamos tienen sentido, pero la mayor parte de lo que toman no lo tiene, “ritual”, y con frecuencia limita al nuevo medio. Con el tiempo, el nuevo medio desarrolla sus propias convenciones eliminando las existentes que no encajan con él.

Su alguna vez tienes la oportunidad de ver un drama de televisión antiguo podrás ver un buen ejemplo de esto. Puesto que la radio exigía una voz en off –para describir lo que los oyentes no podían ver, los dramas de la primera televisión a menudo tenían una voz narradora, describiendo lo que los televidentes veían. Es un ejemplo simple pero sorprendente de lo que pasa cuando un nuevo medio se desarrolla a partir de otro preexistente.

La web es un nuevo medio, aunque ha emergido a partir del medio de las publicaciones impresas, cuyas técnicas, lenguaje del diseño y convenciones están claramente presentes. Y aún así, a menudo está demasiado marcada por este origen. “Los sitios más rompedores” son normalmente aquellos que tratan de domar lo salvaje de la web, limitando las páginas como si estuvieran hechas de papel – Autoedición para la web. Este espíritu conservador es natural “las creencias muy arraigadas no se pierden fácilmente”, pero ya es hora de avanzar, adoptar la web por sí misma como medio. Es hora de abandonar los rituales de la página impresa, y de desarrollar la propia naturaleza del medio de la web.

Con esto no quiero decir que debamos abandonar la sabiduría y conocimiento de cientos de años de impresión y miles de años de escritura. Pero necesitamos entender cuales de esas lecciones son apropiadas para la web, y cuales son simples rituales.

Controlar las Páginas Web

El Sabio

“... acepta el ir y venir de las cosas,
Las adopta pero no las posee,”
Tao Te Ching; 2 Abstracción

Si pasas algún tiempo en los grupos de noticias sobre diseño web o listas de correo, encontrarás algunas ideas y palabras comunes recurrentes. Cuestión tras cuestión, por supuesto, encuentras “¿Cómo?”. Pero más allá de cuestiones como “cómo haré que mis páginas se vean igual en cualquier sistema” y “cómo hacer que las tipografías se vean igual en un Macintosh y en Windows” hay una misma cuestión de fondo – “¿cómo controlar al navegador de los usuarios?” Ciertamente, la palabra control aparece con una frecuencia sorprendente.

El trasfondo de todo esto es la creencia de que los diseñadores son controladores (piensa en las implicaciones del término “pixel mechanic”). Los diseñadores quieren dominar los deseos de los usuarios, y las opciones que tienen sobre su experiencia visual (“fijando”, por ejemplo, el tamaño de las fuentes). Los diseñadores quieren superar las diferencias entre plataformas, provocadas por diferentes resoluciones (el Macintosh a 72dpi, en Windows el estándar es 96dpi). Los diseñadores lo conocen todo, y no tolerarán nada que no sea una representación perfecta al píxel de lo que ellos contemplan en su propia máquina.

Por supuesto, esto es una exageración, pero no mucho. Un ejemplo es el descontento que a menudo se expresa por parte de los desarrolladores cuando aprenden que las hojas de estilo no son para “Autoedición en la web”. Y si eres un usuario de Mac, sabrás que hay muchísimos sitios importantes que abusan de las hojas de estilo para hacer sus páginas ilegibles. Lo más probable es que empleen puntos como medida para los tipos. Detrás de estos ejemplos está la filosofía de que “el diseñador es el controlador”.

¿De dónde viene esta idea? Creo que se coló desde el medio impreso. En la imprenta, el diseñador es Dios. Una enorme industria emergió de la capacidad de crear en entornos WYSIWYG, y muchos de los diseñadores web tienen muy arraigadas sus creencias y prácticas, el ritual de ese medio. Como diseñadores, debemos repensar este papel, y abandonar el control, buscar una nueva relación con la página.

¿Por qué es importante?

“Un recién nacido es suave y tierno,
Un anciano, duro y rígido.
Las Plantas y animales, cuando están vivos son nutritivos y suculentos;
;Muertos, son pobres y secos.
Así que la suavidad y ternura son atributos de la vida,
Y la dureza y rigidez, atributos de la muerte.”
Tao Te Ching; 76 Flexibilidad

Quizás la incapacidad de “controlar” una página es una limitación, un error del web. Cuando venimos del mundo del WYSIWYG, nuestro instinto primario es pernsar así. Admito que esta fue mi primera respuesta, y una impresión de que iba a llevar mucho tiempo. Ahora ya no siento esa limitación, lo veo como un punto fuerte del nuevo medio.

Contemplémoslo desde el otro extremo del microscopio. El hecho de que podamos controlar una página es realmente una limitación de ese medio. Podemos pensar que – podemos fijar el tamaño del texto – o bien que – el tamalo del texto es inalterable. Puedes pensar que – las dimensiones de una página pueden ser controladas– o que – las dimensiones de una página no pueden ser alteradas. Son simples propiedades del medio.

Y no son necesariamente buenas propiedades, en especial para el lector. Si la vista del lector no es la mejor, es posible que la elección del diseañador sea demasiado pequeña para leer con comodidad sin ningún tipo de ampliación. Si el lector está en un lugar confinado, como un tren hacia el trabajo, un avión, el periódico es demasiado grande. Y el lector no puede hacer casi nada para resolverlo.

El control que los diseñadores tienen en el medio impreso y a menudo desean en el medio de la web, es simplemente una función de la limitación de la página impresa. Deberíamos acptar el hecho de que la web no debe tener las mismas limitaciones, y diseñar para esa flexibilidad. pero primero, debemos aceptar el ir i venir de las cosas.”.

Adaptabilidad es Accesibilidad

“Lo mejor del hombre es como el agua,
Que beneficia a todas las cosas, y no lucha contra ellas,
Que fluye en lugares que otros desdeñan,
Donde está en armonía con el Camino.”
Tao Te Ching; 8 Agua

Hay quienes piensan que el Tao es fatalista. Una lectura simplista es que uno debería errar sin rumbo, permitiendo que las cosas sucedan y responder a éstas. Yo lo entiendo como que no deberíamos tener ideas prefijadas, con metas en nuestra cabeza, y en lugar de eso deberíamos ser adaptables, no fijos en nuestra visión o dirección.

“Así como observar el detalle es claridad,
mantener la flexibilidad es fuerza;
Usa la luz pero no la sostengas,
de manera que no puedas dañarte,
Pero abraza la claridad.“
Tao Te Ching; 52 Claridad

La flexibilidad de la que he hablado hasta ahora es la “adaptabilidad“. Todo lo dicho hasta ahora se podría resumir en: haz páginas que sean adaptables. Haz páginas que sean accesibles, sin que importe el navegador, plataforma o monitor que el lector utilice para acceder a tus páginas. Esto significa páginas que son legibles sin que importe la resolución de pantalla o el tamaño, el número de colores (y recuerda también que las páginas se puedan imprimir, o leer en voz alta por programas lectores, o leídas con lectores braille). Esto significa páginas que se adaptan a las necesidades de un lector cuya vista no es perfeta y que quiere leer páginas con un tamaño grande.

Diseñar páginas adaptables es diseñar páginas accesibles. Y quizás la gran promesa de la web, todavía no cumplida, es la accesibilidad, sin que importen las dificultades, a la información. Es uno de los pilares del World Wide Web Consortium, y se está convirtiendo en una obligación del diseño web, a medida que las páginas por ley deban proporcionar acceso universal, al igual que las leyes de edificación en muchos países requieren acceso a los edificios.

Suena como una imposibilidad, diseñar la página universal. Quizás ahora es todavía una aspiración, con los navegadores tan imperfectos y muchos de los dispositivos a través de los que accederemos a internet en su infancia, o todavía no creados. Pero ya hay mucho que hacer para establecer las bases de las páginas que se adapten a los deseos y necesidades de los usuarios, y sean por tanto accesibles.

El camino

“El camino está modelado por el uso,
Pero la forma se pierde.
No te agarres a las formas
Pero deja que la sensación fluya hacia el mundo
Igual que un río se dirige hacia el mar.”
Tao Te Ching; 32 Formas

¿Qué puede hacerse para diseñar para la adaptabilidad y por tanto la accesibilidad? En primer lugar, hay modos de pensar que pueden ser útiles. Después hay algunas sugerencias sobre los pasos que se pueden dar para evitar hacer las páginas inaccesibles.

Primero, piensa en lo que hacen las páginas, no lo que parecen. Deja que el diseño fluya a partir de los servicios que proporcionarás a los usuarios, en vez de una idea impuesta de cómo quieres que se muestren las páginas. Deja que la forma siga a la función, en lugar de tomar un diseño en particular y hacerlo “funcionar”.

La piedra angular es separar contenido y apariencia o presentación. Probablemente habrás oído esto cien veces, pero es probablemente el paso más importante que debes dar. Veamos el siguiente ejemplo. En una página en la cual el texto está en cursiva, ¿por qué está en cursiva? Puede ser por razón de énfasis. Puede ser una cita. Puede ser una palabra extranjera utilizada en otro idioma. En las publicaciones tradicionales, la forma sigue a la función. La ventaja de la publicación en el Web es que podemos hacer explícito lo que en el papel es implícito. Si el motivo de que esté en itálicas es enfatizar, ¿por qué marcar con el elemento <i>? Usa el elemento <em>, y así otros navegadores que no sean los basados en un PC podrán entender el elemento adecuadamente.

A gran escala, no utilices el HTML par la presentación. Nada de elementos tales como <font> o <b>, <i> y otros que tienen valor puramente presentacional. Cuando el HTML proporciona un elemento apropiado, utilízalo. Cuando no lo haya, emplea clases de CSS. Y por supuesto, utiliza hojas de estilo para la información de presentación. Ya es hora de mirar hacia el futuro y no anclarse en el pasado.

Si utilizas las hojas de estilo adecuadamente, para sugerir la apariencia de una página, no para controlarla, y si no dependes de tu hoja de estilo para transmitir información, entonces tus páginas “funcionarán” bien en cualquier navegador, pasado o futuro. Los navegadores que no reconocen hojas de estilo simplemente presentarán la página a la manera básica. Nuestra principal preocupación son los navegadores que soportan las hojas de estilo de forma incorrecta. Éste es todavía un problema. No tardará mucho, sin embargo, en dejar de ser un problema. Por ahora, puedes limitarte a una parte de CSS que esté bien representada, y todavía tendrás mejores recursos presentacionales que con el HTML. He escrito sobre el tema en otros sitios, así que no voy a repetirme.

En la práctica, hay cosas que deberías hacer y cosas que no deberías hacer cuando designes hojas de estilo que tengan un impacto sobre la adaptabilidad de tus páginas. Por encima de todo, no dependas en ningún aspecto de las hojas de estilo para hacer la página accesible. Unidades absolutas, como los píxeles y los puntos deberían evitarse (si te sorprende, sigue leyendo), y el color se debe utilizar con cuidado, y nunca debe dependerse exclusivamente de él.

Tipografías

Típicamente, Windows, Macintosh, u otros sistemas tienen sólo un puñado de fuentes instaladas. Hay pocas concordancias entre las fuentes instaladas por defecto entre estos diferentes sistemas. Cada vez más, los lectores serán capaces de decidir qué fuentes quieren emplear para ver sus páginas web. Con CSS, puedes sugerir un conjunto de fuentes, y cubrir tantas opciones como sea posible. Pero no dependas de que una fuentes esté disponible, con independencia de lo común que sea.

Más importante aún es el tamaño de los tipos. Ten en cuenta que una misma fuente, al mismo tamaño en puntos, en el Macintosh “se ve más pequeña” que en la mayoría de Windows. Esta diferencia se debe a que la “resolución lógica” del Macintosh es 72dpi, mientras que en Windows es 96dpi. Las implicaciones que tiene son significativas. En primer lugar, garantiza que es casi imposible hacer que el texto se vea idéntico en Mac y Windows. Pero si adoptas la filosofía de la adaptabilidad, no importa.

¿Qué? Si estás preocupado sobre como aparece exactamente una página web, éste es un signo de que todavía no estás considerando las páginas como algo adaptable. Uno de los problemas de accesibilidad más importantes es el tamaño de la fuente. Las fuentes pequeñas son más difíciles de leer. Par los que no tenemos buena vista, puede ser sorprendente saber que un porcentaje significativo de la población tiene problemas para leer textos de tamaño inferior a los 14 puntos en Times en papel impreso. Y las pantallas son menos legibles que el papel, debido a su menor resolución.

¿Significa esto que el tamaño mínimo que debemos utilizar es de 14 puntos? Esto no ayuda a aquellos que tienen una vista aún peor. Así que ¿cuál es el mínimo tamaño que deberíamos usar? Ninguno. No utilices puntos. Esto permite al lector elegir el tamaño de fuente que mejor le va. Lo mismo pasa con los píxeles. Debido a las diferencias de resolución lógica, un píxel en una plataforma no es un píxel en otra.

Puedes sugerir tamaños de fuente grandes para los encabezados y otros elementos. CSS proporciona varias formas de sugerir el tamaño del texto de manera que ayude a la adaptabilidad. Veremos simplemente una de estas formas para que se vea clara la idea.

Con CSS puedes especificar el tamaño de las fuentes como un porcentaje del que tiene un elemento antecesor. Por ejemplo, los encabezados están dentro de BODY en una página. Si no especificas un tamaño para el texto en BODY, el texto de éste será el que el lector haya elegido como valor por defecto. Ya estamos ayudando a la adaptabilidad de la página, simplemente sin hacer nada.

Puedes decir que “el texto se ve demasiado grande” si simplemente lo dejamos así. Entonces hazlo algo menor. Pero en tu navegador. Y así, tus lectores tendrán la opción de hacerlo mayor o menor en sus navegadores, dependiendo de sus gustos o sus necesidades.

Podemos hacer que los encabezados y otros elementos destaquen utilizando, por ejemplo, un valor en los encabezados de nivel 1 del 30% mayores que el cuerpo de texto, el nivel 2 un 25% mayor, y así sucesivamente. Así, con independencia de lo que el lector elija para su texto principal, los encabezados siempre se mostrarán proporcionadamente mayores. Asimismo, se puede especificar que algunos elementos sean una fracción del tamaño del cuerpo de texto, pero esto debe utilizarse con precaución, puesto que puede suceder que algunos textos se hagan demasiado pequeños y sean ilegibles.

Realmente hemos hecho muy poco, sólamente hemos evitado utilizar valores de tamaño absolutos, y hemos utilizado valores proporcionales para los encabezados, pero ya hemos hecho nuestras páginas mucho más adaptables y accessibles.

Maquetación

Los márgenes, anchos de página y sangrados son aspectos del diseño de páginas que pueden ayudar a la lecturabilidad. La web presenta problemas para el diseñador con cada uno de estos aspectos. Las ventanas pueden variar de tamaño, cambiando el tamaño de la página. Diferentes dispositivos (web TV, monitores de alta resolución, PDAs) tienen diferentes valores mínimos y máximos de las ventanas. Al igual que sucede con los valores fijos en las fuentes, los valores fijos en los tamaños de página pueden dar problemas en la web.

Y como pasa con las fuentes, los aspectos de la maquetación se pueden resolver utilizando porcentajes para crear páginas adaptables. Los márgenes se pueden indicar como un porcentaje del ancho del elemento que los contiene.

Utilizar porcentajes (u otros valores relativos) para especificar el layour en CSS automáticamente crea páginas adaptables. A medida que se ensanchan o estrechan las ventanas del navegador, la maquetación de un elemento se adapta para mantener las mismas proporciones, y así toda la disposición de la página se adapta. Los lectores pueden elegir el tamaño de la ventana que les parezca más adecuado.

Los márgenes, los sangrados de texto y otros aspectos de compaginación se pueden especificar también en relación con el texto que contienen, utilizando la unidad em para especificarlos. Si indicas

p	 {margin – left: 1.5em}

estás diciendo que el margen izquierdo de los párrafos debe ser 1,5 veces el alto de la fuente de ese párrafo. Así que cuando el usuario ajusta el tamaño de su fuente para hacer la página más legible, el margen aumenta en proporción, y si lo hace menor, también se ajusta proporcionalmente.

Colores

La web es mucho más rica en color que los medios impresos. El color es barato en la web. Puede ser ornamental, puede establecer una identidad visual y puede tener valor práctico (el rojo puede llamar la atención a una parte importante). Pero el color también presenta problemas de accesibilidad.

¿Sabías que en muchos países (o en todos) las personas con ceguera respecto del rojo y verde no pueden tener un título de piloto de aviación? Esto se debe a que, casi invariablemente, la información de peligro se transmite en rojo y la seguridad en verdeon is almost invariably conveyed using red for danger and green for safety. Es una lástima que las luces de alerta no sean algo más adaptables.

Tus páginas web ¿excluyen a la gente de una forma similar? Sería una lástima, ya que en el futuro próximo la mayoría de navegadores pueden proporcionar sistemas de ajuste del color de los elementos de una página web, a través de hojas de estilo del usuario, que pueden sobreimponerse a las hojas de estilo del programador.

¿Cómo evitar estos problemas? Utiliza hojas de estilo en lugar de el elemento de HTML <font>. Y evita depender de combinaciones de color para transmitir significados.

El camino

“Incluso un árbol más ancho de lo que un hombre puede rodear con sus brazos nace de un minúsculo brote;
Una presa tan grande que ningún río la pueda desbordar empieza con un montoncito de tierra;
Un camino de mil leguas empieza en el punto que está debajo de los pies del caminante.”
Tao Te Ching; 64a. Cuida el comienzo.

Cambiar nuestras formas de pensar y actuar no es fácil. “ Las creencias muy arraigadas no se pierden fácilmente”. Pero poco a poco me he dado cuenta de que muchas de las cosas que damos por supuestas pueden cambiar. A juzgar por lo que veo y leo y las conversaciones que he tenido, el email que he leído durante los últimos años, muchos se agarran a esas creencias, y también deberían reflexionar sobre ellas.

Es la hora de que el medio de la web supere sus orígenes en a página impersa. No abandonar tanta sabiduría y experiencia, pero sí marcar su propia ruta, cuando sea preciso.

El poder de la web, a menudo contemplado como una limitación, o como un defecto, es su naturaleza flexible, y deberíamos adoptar esa flexibilidad, como diseñadores y desarrolladores, y producir páginas que, siendo flexibles, son accesibles a todos.

El camino empieza renunciando al contol, y volviéndose flexibles.

Citas del Tao Te Ching quotes de la edición GNL’s not Lao Tao Te Ching Copyright © 1992, 1993, 1994, 1995 Peter A. Merel.

John Allsopp es responsable de tecnología en Western Civilisation Software, desarrolladores de Style Master, un editor de CSS para Windows y Macintosh, y editores de The House of Style, un recurso exhaustivo sobre CSS. John también participó en el Web Standards Project (1998–1999), ayudando a los programadores de sistemas de navegación de internet a mejorar su soporte de CSS .

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]