Un Tao del diseño Web. Artículos de Diseño Gráfico y Diseño y Desarrollo Web

RSS - Sindicar Contenidos
Xhtml 1.1 Strict Válido! CSS Nivel 2 Válido!  Nivel Doble-A de Conformidad con las Directrices de Accesibilidad Web (WAI)
Descarga FireFox gratis!
\n"; } } } lecturas();

Un Tao del diseño Web

Traducción del artículo "A Dao of Web Design" por John Allsopp publicado en la revista www.alistapart.com/stories/dao/. Traducción de Alan Chuter (Fundosa Teleservicios)

Fuente: www.infoescena.es

El camino

"Al camino el uso le da forma,
Pero entonces la forma se pierde.
No valores las formas
Sino deja que las sensaciones fluyan en el mundo
Como el río fluye hacía el mar."
Tao Te Ching: 32 Formas

Entonces, ¿qué podemos hacer para diseñar para la adaptabilidad, y así para la accesibilidad? En primer lugar, describo dos maneras de pensar que pueden resultar útiles. Y luego doy algunas sugerencias prácticas sobre los pasos a seguir para evitar que tus páginas sean inaccesibles.

En primer lugar, reflexiona sobre lo que hacen tus páginas, no sobre su apariencia. Deja que el diseño de la página fluya desde los servicios que proporcionará a tus usuarios, en vez de basarlo en un concepto global de diseño visual. Deja que la forma siga la función, en vez de establecer un diseño e intentar encajarlo con el servicio.

Un fundamento de esta idea es la separación del contenido de su apariencia. Probablemente ya te lo han dicho cien veces, pero es, quizás, el paso mas importante. Consideremos un ejemplo sencillo. En una página, hay una frase en cursiva. ¿Por qué en cursiva? Puede ser para dar énfasis. Puede ser una cita. Puede ser otro idioma. En la edición tradicional, la forma sigue la función. La ventaja de la edición en la Web es que podemos hacer explícito lo que es implícito en papel. ¿Si el motivo de la cursiva es para dar énfasis, por qué marcar el texto con la etiqueta <i>? Es mejor emplear la etiqueta <em>, para permitir a los navegadores que no sean navegadores PC [gráficos] presentar el texto de la manera mas apropiada.

A una escala mas grande, no utilices HTML para formato de presentación. Fuera <font> y <b>, <i> y otros elementos de presentación. Donde HTML proporciona un elemento apropiado, úsalo. Dónde no hay, usa clases. Y por supuesto, usa las hojas de estilo para la información de presentación. Es tiempo de mirar hacía el futuro, no de aferrarse al pasado.

Si empleas las hojas de estilo correctamente para indicar la apariencia de la página, en vez de obligar a una apariencia concreta, y no dependes de la hoja de estilo para transmitir la información, entonces tus páginas "funcionarán" perfectamente en cualquier navegador, antiguo o futuro. Los navegadores que no soportan las hojas de estilo simplemente mostrarán páginas un poco más sencillas. Nuestra mayor preocupación son los navegadores que soportan las hojas de estilo de forma defectuosa. Hoy en día es un tema importante. Dentro de poco dejará de serlo. Por el momento, puedes limitarte a un subconjunto de CSS bastante bien soportado y aun así tendrás efectos de presentación mejores de los de HTML. He escrito mucho sobre este tema en otros sitios, y no voy a repetirlo aquí.

En la práctica, hay algunas cosas que debemos hacer y otras que no al diseñar hojas de estilo que afectarán la adaptabilidad de las páginas. Sobre todo, no debemos confiar en que las hojas de estilo permitan la accesibilidad de la página. Las unidades absolutas, como píxeles y puntos se deben evitar (y si eso te sorprende, sigue leyendo), y el color se debe emplear con cuidado, y nunca debe ser imprescindible.

Tipos de letra

Típicamente, un ordenador Windows, Macintosh u otro sistema, solo tendrá instalados unos cuantos tipos de letra. Hay pocos tipos de letra comunes instalados por defecto en estas plataformas distintas. Hoy en día, y cada vez mas en el futuro, los lectores podrán elegir los tipos de letra que quieren emplear para ver las páginas Web. Con CSS, puedes sugerir una colección de tipos de letra, para abarcar el mayor numero de plataformas. Pero no cuentes con un tipo de letra específico, no importa lo común que sea.

Mas importante aun es el tamaño de la letra. Quizás ya sabes que la misma fuente de letra, con el mismo tamaño en puntos, con Macintosh "parece mas pequeña" que con la mayoría de los equipos Windows. Para resumir, esto se debe a que la resolución lógica del Macintosh es de 72 puntos por pulgada, mientras la por defecto de Windows es 96. Esto conlleva implicaciones importantes. Primero, es imposible que el texto tenga la misma apariencia en equipos Macintosh y en los de Windows. Pero si adoptas la filosofía de la adaptabilidad, no importa.

¿Qué dices? Si estas todavía preocupado sobre la apariencia exacta de la página, eso indica que todavía no piensas en términos de páginas adaptables. Uno de los aspectos más importantes de la accesibilidad es el tamaño de letra. Una letra pequeña es más difícil de leer. Para los que gozamos de una vista buena, nos puede sorprender que un porcentaje importante de la población tenga dificultad para leer cualquier cosa con una letra menor que la Times de 14 puntos sobre papel. Y la pantalla es menos legible que el papel, debido a su menor resolución.

¿Quiere decir esto que debemos emplear un tamaño mínimo de 14 puntos? Eso no ayudaría a los que tiene la vista aun peor. ¿Entonces cuál es el tamaño que debemos utilizar? Ninguno. No emplees puntos. Deja a los lectores que elijan el tamaño que mas les gusta a ellos. La misma idea se aplica a 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.

Aun así puedes indicar tamaños mayores para encabezados y otros elementos. CSS proporciona varias maneras de sugerir el tamaño del texto para mejorar la adaptabilidad. Miremos a un ejemplo para dar una idea.

Con CSS, podemos especificar el tamaño de letra como porcentaje del tamaño del elemento padre. Por ejemplo, los encabezados están dentro del BODY de la página. Si no fijas el tamaño de la letra en el BODY, entonces el tamaño de letra será el que ha elegido el usuario como su tamaño por defecto. ¡Habremos mejorado la adaptabilidad de la página, simplemente no haciendo nada!

Puedes decir que "el texto parece demasiado grande" si lo dejas así. Pues, hazlo más pequeño. Pero en tu navegador. Así, tus usuarios tendrán la opción de hacerlo más grande o más pequeño también en sus navegadores, según sus gustos o sus preferencias.

Podemos destacar los encabezados y otros elementos por el tamaño de letra, si especificamos que los de nivel 1 deben ser, por ejemplo, un 30% más grande que el texto de cuerpo, los de nivel 2 un 25%, etc. Así, sea cual sea el tamaño del texto que elija el usuario para el texto principal, los encabezados se aumentarán para ser proporcionalmente más grandes que el texto principal. De igual manera, podemos disminuir el texto para hacerlo más pequeño que el texto de cuerpo. No obstante esto puede llegar a hacer el texto tan pequeño que resulta ilegible; por lo que debe hacerse con precaución.

Hasta ahora hemos hecho poca cosa: solo con evitar los tamaños absolutos de tipo de letra, y usar tamaños proporcionales para los encabezados habremos conseguido páginas mucho más adaptables y accesibles.

Maquetación

Los márgenes, el ancho de la página y el sangrado, son todos aspectos de la maquetación de la página que pueden mejorar la facilidad de lectura. La Web presenta dificultades para el diseñador en cada uno de sus aspectos. El usuario puede cambiar el tamaño de la ventana, cambiando así el tamaño de la página. Los distintos dispositivos (Web por el televisor, monitores de alta resolución, PDAs) tienen distintos tamaños máximos y mínimos para la ventana. Igual que con el tamaño fijo de letra, una maquetación fija de la página puede causar problemas de accesibilidad en la Web.

Igual que con la letra, los aspectos de maquetación de la página se pueden diseñar con porcentajes, en lugar de hacerlo con medidas absolutas, para crear páginas adaptables. Los márgenes se pueden especificar como porcentaje del ancho del elemento que los contiene.

Al especificar la maquetación de la página con CSS y porcentajes (u otros valores relativos), creamos páginas que se adaptan. Cuando la ventana se ensancha o se estrecha, la maquetación del elemento se adapta para mantener las proporciones, y así se adapta también la maquetación de la página entera. Los lectores pueden elegir el tamaño de ventana mas apropiado para sus necesidades.

El tamaño de los márgenes, el sangrado y otros aspectos de la maquetación se pueden especificar relacionándolos con el tamaño del texto que contienen, mediante la unidad de medida em. Si especificamos

P {margin-left: 1.5em}

Decimos que el márgen izquierdo de los párrafos debe ser 1,5 veces la altura de la letra de ese párrafo. Entonces, cuando el usuario ajusta el tamaño de letra para leer mejor la página, los márgenes se aumentan de forma proporcional, y si lo reduce, los márgenes también se adaptan.

Colores

La web es en general un medio con más colores que la página impresa. En la Web el color es mas barato. El color puede ser adorno, y puede ayudar a establecer una identidad visual, y también puede tener un valor práctico (el rojo puede destacar información importante). Pero el color también presenta problemas de accesibilidad.

¿Sabías que en muchos países (si no en todos) las personas con Daltonismo rojo-verde no pueden obtener permiso de pilotaje? Es decir, a pesar de sus otras habilidades, por que la información de alarma casi siempre se muestra como rojo para el peligro y verde para seguridad. Es una pena que las lámparas de alarma no se adapten.

¿Tus páginas web excluyen a la gente de esa manera? Sería una pena, porque dentro de poco los navegadores permitirán a los usuarios una manera sencilla de cambiar el color de los elementos de las páginas Web, mediante las hojas de estilo de usuario, que tienen prioridad sobre la tuya (ya se puede con IE5 para el Macintosh.)

¿Cómo podemos evitar estos problemas? Empleando hojas de estilo, en vez del elemento HTML <font>. Y evitando contar solo con las combinaciones de colores para transmitir el significado.

El Viaje

"Como un árbol del grosor mayor que el abrazo de un hombre nace de un minúsculo brote;
Y una presa tan grande que un río no la derriba comienza con un montículo de tierra;
Un viaje de mil kilómetros comienza en donde están tus pies."
Tao Te Ching: 64a. Cuidar los comienzos

Cambiar nuestras maneras de pensar y de actuar no es fácil. "Las creencias bien arraigadas no se abandonan fácilmente". Pero paulatinamente he llegado a aceptar que mucho de lo que creía inalterable necesitaba una reorientación. Por lo que veo y lo que oigo hablando con la gente, y por los correos que recibido en los últimos dos años, me doy cuenta de que muchos tenéis estas creencias demasiado arraigadas, y que también necesitáis repensarlas .

Ya es hora de dar a la Web la oportunidad de crecer y liberarse de sus origines. No para dejar atrás tanta sabiduría y experiencia, sino para trazar su propia trayectoria, cuando sea apropiado hacerlo.

La mayor fuerza de la Web, creo, se percibe muchas veces como una limitación, un defecto. Es la naturaleza de la Web ser flexible, y en nuestro papel de diseñadores y desarrolladores debemos adoptar esta flexibilidad, para crear páginas que, precisamente por ser flexibles, sean accesibles a todos.

El viaje empieza abandonando el control, para llegar a ser flexible. - JOHN ALLSOPP

:::

John Allsopp es responsable de tecnología en Western Civilisation software, desarrolladores de Style Master, un editor de hojas de estilo CSS para Windows y Macintosh, y mantienen The House of Style, un recurso comprensivo sobre CSS, que proporciona una guía completa sobre todos los aspectos de CSS, además de cursos, artículos, información completa sobre la compatibilidad entre navegadores, y más.
John es uno de los samurai CSS de The Web Standards Project, cuya responsabilidad ha sido animar a los desarrolladores de navegadores a soportar mejor CSS.

Las citas del Tao Te Ching son de GNL's not Lao Tao Te Ching Copyright (C) 1992, 1993, 1994, 1995 Peter A. Merel.

© 2000   A List Apart
[Jeffrey Zeldman & Brian Platz]

Ubicación permanente: www.alistapart.com/stories/dao/

Scour Design - Todos los Derechos Reservados - Carlos Carmona