Vamos a hacer un experimento: Si usted está viendo este sitio web en Firefox, vaya al menú “View > Page Style” del programa y escoja la opción “No Style”. Verá que la página se ve como sigue:

GuerrillaPop luego de apagarle el estilo y las imágenes

La mayoría de las gráficas que componen la página se han ido, y la composición de la página parece más un documento para imprimirse que una página web. Las cosas aparecen en un orden lógico, con el título de la página primero, seguido por los artículos, y por último la navegación. Más aun, si usted apagara por completo las imágenes (lo puede hacer en las opciones avanzadas de Firefox), todas las imágenes son reemplazadas por texto significativo, que explica el contenido de cada una.

El código HTML que compone esta página (y el de muchas otras, incluyendo muchos blogs) está hecho de manera tal que diferentes personas lo puedan acceder desde diferentes sistemas o dispositivos y puedan tener una experiencia agradable. A esto le llamamos accesibilidad.

Considere una persona que está mirando esta página desde un teléfono celular u otro dispositivo básico que sólo puede ver texto. En ese caso la página se verá más o menos como la está viendo usted luego de nuestro experimento. La persona en el celular no ve una página bonita, pero la página se lee bien y se puede navegar sin problemas. De igual forma piense en una persona ciega que depende de softwares especiales llamados “screen readers“, que leen el contenido del sitio en voz alta por medio de una voz artificial. El mismo caso aplica; el sitio funciona porque el verdadero núcleo de la página (el contenido) está totalmente separado de las gráficas, tipografía y colores (la presentación).

Experimento, Parte 2: Ahora vaya al website de Toyota de Puerto Rico (http://www.toyotapr.com) y haga el mismo experimento. Esta vez no pasa lo mismo; en vez vemos una página vacía con un cuadro que no dice nada ni responde a nuestro ratón:

Website de Toyota PR luego de apagarle el estilo

¿Por qué sucedió esto? El sitio de Toyota PR lo diseñaron usando la tecnología Flash, que permite crear animaciones interactivas con sonido y vídeo, pero que no permite esta separación de presentación y contenido que hablamos anteriormente. De hecho, si usted ve el site de Toyota PR en condiciones normales notará que es muy bonito y las animaciones son impresionantes. Pero el sitio se rompe en cualquier cosa que no sea una computadora personal. Los diseñadores de este sitio no comprenden la idea básica de la Web. Creen que la web es una plataforma de diseño gráfico y no una plataforma de información.

No se equivoquen, Flash tiene sus usos. Por ejemplo, Cnet.com, un sitio dedicado a reseñar equipos electrónicos, complementa el material textual con vídeos Flash que le permiten al usuario ver el producto en acción. Otros fabricantes de autos utilizan Flash como parte del diseño HTML para presentar animaciones de vehículos y vistas tridimensionales. Estos son excelentes usos de la tecnología. El problema está cuando el sitio entero es en Flash. Imagínese que yo abriera Photoshop, escribiera todo el texto de este artículo allí y se los presentara a ustedes como un jpeg bien grande. Así de ridículo es hacer un sitio completamente en Flash.

Otro ejemplo: Phantomvox.com, la página del cantante Robi Draco Rosa está hecha toda en Flash, y es una de las páginas más irritantes que he visto. Tarda una eternidad en subir (aun en banda ancha) y todos los links de la navegación superior abren una ventana nueva (!). Nota adicional: Los sitios en Flash también son difíciles de mantener y actualizar; supongo que por eso han tenido el mismo diseño por casi 4 años.

En fin, estas páginas se ven de lo más “slick”, y tienen muchos gráficos de vanguardia, pero son verdaderos dinosaurios. Desafortunadamente la Web ha sufrido por mucho tiempo de diseños hechos por gente y compañías que vienen del campo de diseño gráfico tradicional (prensa, televisión, cine) y que no se han tomado el tiempo para entender verdaderamente el medio. En vez, diseñan una página Web igual que una página de revista o, peor, igual que una película o anuncio de TV. “Cómo se ve” es más importante que “cómo funciona”.

Este tema se viene discutiendo desde hace años, pero ahora cobra mayor importancia. Nos estamos moviendo hacia una Web que no está atada a la computadora personal como en tiempos anteriores. La popularidad del Wi-Fi , el Internet por celular y otras tecnologías están permitiendo el acceso al web desde múltiples dispositivos de diferentes tamaños y capacidades. Muchas tecnologías sencillas y excitantes como RSS están rompiendo con las nociones antiguas de lo que es una “página” o un “sitio web”. En este escenario la web se ha levantado una vez más como la plataforma de información por excelencia.

Y en este escenario la lección entonces debe ser: información primero, diseño después.