Evolución: Más de 20 Años de Diseño Web

1991 fue el año en que se publicó la primera página web. Lo hizo Tim Berners-Lee, físico británico quien es considerado uno de los padres de la Web. Dicho sitio tenía como único fin informar qué era la World Wide Web. Hoy, más de 20 años después, existen muchos más usos para ella, y el diseño web de las páginas ha cambiado considerablemente.

Comenzando por uno prácticamente inexistente en sus inicios, hasta las más nuevas técnicas donde ha ganado terreno el diseño adaptable.

Sin embargo, de cada época del diseño web podemos rescatar algo, ya sea extremadamente bueno (que debemos usar), o extremadamente malo (a evitar totalmente), para un mejor avance de estas técnicas en la actualidad.

Por ello, repasemos brevemente cómo es que ha evolucionado el diseño web.

Inicios: Sin Diseño Web

Como mencionaba en la introducción, el propósito de la primera página web era informar acerca del proyecto de la World Wide Web, que podríamos traducir como “Red Informática Mundial”.

Una de las principales razones por las que no se podía pensar en un diseño, además de ser los inicios de la web (y un nuevo uso para el protocolo de Internet), era la velocidad de las conexiones, que en el mejor de los casos era a través de dial-up (por línea conmutada). En este tiempo, mostrar una simple imagen era imposible.

Todo consistía en texto simple y texto con links. Aproximadamente dos años después, ya se podía hablar un poco de diseño, pues algunas etiquetas de la especificación HTML mostraban por defecto el texto con algún tamaño y peso diferente al estándar, etc.

Hoy en día al trabajar en un diseño web es importante retomar lo esencial de sus inicios: muy poco peso, la máxima expresión del minimalismo y la usabilidad.

El Prevalecimiento de las Tablas y la Introducción de CSS

En 1993, surgió el navegador Mosaic, que era el primero que desplegaba las imágenes en línea con el texto, en vez de abrirlas por separado en otra ventana. Este navegador fue el responsable de popularizar la web.

Sin embargo, para este año no existían estándares web ni una institución reguladora, por lo que en 1994 Berners-Lee funda el World Wide Web Consortium, mejor conocido como W3C, el cual hasta nuestros días regula los estándares del desarrollo y el diseño web.

Posteriormente, los creadores de Mosaic desarrollaron Netscape, que eventualmente perdió la batalla contra Internet Explorer de Microsoft.

Algo muy popular durante esta época fue el uso de tablas para acomodar visualmente el contenido donde era deseado, hasta la introducción de CSS en 1996 gracias al W3C.

Gran parte de las innovaciones de esta época fueron impulsadas por la guerra de los navegadores (con Internet Explorer y Netscape como principales contendientes) más que por el impulso del W3C.

Durante este tiempo, algo muy popular en la web eran los contadores de visitas, un uso exagerado de GIFs animados, y texto animado y con desplazamiento mediante “marquesinas”, una etiqueta HTML.

Si bien actualmente las tablas se utilizan muy poco y los GIFs únicamente se utilizan cuando son necesarios, podemos rescatar que un diseño bien estructurado permite al usuario identificar mejor la información contenida en una página web y, la hace más amigable para evitar que se pierda el interés.

Homero Simpson crea su primera página web, un gran ejemplo del diseño web entre mediados y finales de los 90

Flash, el rey del Diseño Web

En 1996 no solamente se introdujo el lenguaje CSS, también Flash, aunque este no ganó popularidad sino hasta 1998.

La razón por la que comenzó a ser utilizado cada vez más en diseño web, fue que CSS y HTML no eran tan poderosos para generar gráficos que para ese entonces no tenían precedentes, como formas redondeadas, que cambiaban de color, con efecto tridimensional mediante el manejo de tonalidades.

Sin embargo, al utilizarlo en exceso (como sucedía con los GIFs), la experiencia de usuario iba en detrimento y este se confundía, entre páginas splash y sitios web mal optimizados visualmente, e incluso tan pesados que podían llegar a consumir todo el ancho de banda (que aún era muy poco) y “crashear” el navegador.

El mayor problema de Flash: los buscadores, ya que estos “indexan” el HTML, lo cual genera que sitios diseñados puramente en Flash difícilmente aparezcan en los resultados de búsqueda.

Actualmente, a pesar de que se puede optimizar Flash para efectos de SEO por medio de técnicas como dividir el archivo flash en varios pequeños archivos, cada uno con su respectivo documento HTML en que se inserten, no se recomienda su uso, pues se puede igualar y mejorar la experiencia mediante el uso de HTML y JavaScript, e incluso muchos efectos ya se pueden aplicar a partir de CSS3.

Crecimiento del CSS

A inicios de la década de los 2000, las tendencias de diseño web cambiaron de nuevo, gracias a que la industria notó que Flash no era tan prometedor, y sobre todo a que las especificaciones para CSS se ampliaron. Ahora no solamente el texto tenía links, también las imágenes, con el uso de HTML y CSS, nada de Flash ni scripts.

Los matices y tonalidades tipo neón o chillantes cayeron en desuso, en favor de colores más agradables a la vista. Las resoluciones de pantalla y el tamaño de los elementos recobraron importancia, de nuevo el diseño web se enfocaba en usabilidad y no en solamente llamar la atención. A la vez, los motores de búsqueda podían indexar mejor a cada sitio.

La ‘Web 2.0’

Tal vez el término “Web 2.0” suene un poco extremo, pero en verdad los cambios totales y duraderos del diseño web se comenzaron a ver en esta época, aproximadamente de 2005 a 2010.

Interfaces más bonitas a la vez que permitían alta usabilidad, la muerte casi total de Flash, el verdadero inicio del SEO y técnicas cambiantes para posicionar las páginas web (algunas ya en desuso, pues no favorecían al buen contenido original).

Era la primera vez que conocíamos, o mejor dicho, descubríamos de pies a cabeza de qué se trataba un diseño web bien hecho, que pensara tanto en usuarios/clientes, como en buscadores: excelente distribución y tamaño de bloques de contenido, favorecimiento de HTML, CSS y JavaScript, SEO, fácil uso de páginas web, experiencia agradable para los usuarios mediante el diseño, y mayor facilidad para vender un producto/servicio directa, o mejor aún, indirectamente.

Actualidad: Diseño Web Limpio, Minimalista y Adaptable

¿Creían que era todo? ¡No! Algo que cambió de nuevo la manera de hacer páginas web, aproximadamente desde 2011.

Esto fue el auge de los dispositivos móviles inteligentes, empezando por los smartphones, después las tablets, y posteriormente las phablets (smartphones con tamaños de pantalla cercanos a los de una tablet).

Pero en vez de diseñar por separado un sitio para escritorios y otro para móviles, llegó una tendencia –o técnica– llamada diseño adaptable. Esta consiste en un solo sitio (idealmente un solo HTML y un solo CSS) en que, dependiendo del tamaño de la ventana, el contenido se acomoda a su tamaño.

Esto permite utilizar imágenes del ancho completo de la pantalla y, aunado a ello, permitió que surgiera un diseño web minimalista, en parte propiciado por el tamaño tan pequeño de las pantallas y la dificultad para presionar botones pequeños en páginas web.

En esta ocasión los botones y los bloques se han tornado en elementos de mayor tamaño, menos tridimensionales y más cuadrados, con colores y apariencias muy limpias, uso de simples líneas para íconos, así como texto integrado en las imágenes, algo simplemente hermoso a la vista y que permite visualizar el contenido importante de manera muy fácil.

Estas técnicas aún se encuentran en evolución, y bien podría sorprendernos lo que se genere en los próximos años.

Sin duda el panorama cambiante de dispositivos que, entre otras cosas, se utilizan para navegar la web –incluyendo la muy anticipada por expertos muerte de la PC–, jugará un papel muy importante en el futuro del diseño web.

Con información de HubSpot.

Imagen Principal: Wesley Fryer.