Una lección de historia del diseño web: 20 años en diseño web

Parece casi una locura. Comencé mi viaje como diseñador web en 1996 , trabajando para mi periódico local. Si mis matemáticas son correctas, entonces estoy a punto de entrar en mi vigésimo año. Más de la mitad de mi vida la he pasado trabajando en la web.

Como tal, pensé que sería interesante echar un vistazo a cómo funcionaba (o no) la web en ese entonces y compararla con algunos de los desafíos que enfrentamos hoy. La pregunta que tengo es, ¿la historia se repite en la web?

Herramientas del oficio

En 1996, el diseño web estaba en sus inicios, al menos en un sentido comercial. En aquel entonces codifiqué (y por decirlo amablemente) HTML a mano en el Bloc de notas de Windows 95.

Existían algunos editores web rudimentarios, como Coffee Cup. Pero WYSIWYG ni siquiera estaba cerca de la realidad. La mayoría de las veces descubrí que los editores de HTML escribieron un código descuidado (al igual que yo). Eso no comenzó a mejorar hasta 1997, cuando Macromedia lanzó la primera versión de Dreamweaver (más tarde comprada por Adobe).

Macromedia lanzó Dreamweaver en 1997

Hablando de Adobe, su venerable Photoshop no era para nada la aplicación amigable con el diseño web que es hoy. Por qué, mirando su historial de versiones, es increíble pensar que la siempre presente opción "Guardar para Web..." no llegó a Photoshop hasta la versión 5.5, lanzada en 1999.

Cuadro de diálogo Guardar para Web de Photoshop 5.5. (Fuente de imagen)

Antes de los días de todas las bondades de CSS3 que ahora disfrutamos, Photoshop era prácticamente su única opción para sombras, esquinas redondeadas y degradados. La compresión de imágenes para uso web ni siquiera estaba en la mente de Adobe en ese entonces.

Más allá de la edición de código y gráficos, la principal herramienta elegida por un diseñador era un buen cliente FTP antiguo. Las cargas de archivos basadas en la web a través de módems de 56k no eran una opción.

¿Se repite la historia?
Ciertamente no. Dreamweaver y Photoshop siguen siendo bastante populares y funcionan bien. Sin mencionar cientos, si no miles, de otras herramientas para hacer que el diseño y el desarrollo sean mucho más fáciles. Sean cuales sean sus gustos y requisitos, lo más probable es que haya una herramienta que se adapte perfectamente a sus necesidades.

navegadores

¿Alguien recuerda mosaico NCSA? Co-desarrollado por Marc Andreessen, quien luego pasó a desarrollar Netscape, Mosaic se incluyó con muchos kits de inicio de proveedores de servicios de Internet (ISP). Tanto Netscape 2.0 como Internet Explorer 3.0 se lanzaron en 1996.

El navegador web Mosaic 1.0

Los navegadores tenían errores e inestables. No era raro que un sitio web específico (especialmente uno que ejecuta Shockwave/Flash) bloqueara repetidamente la sesión de su navegador, lo que significa que nunca podría visitar el sitio.

Una de las peores tendencias de este período de tiempo fueron los sitios que presentaban código propietario, que solo funcionaba en Internet Explorer (gracias, Microsoft). Esto también condujo a sitios en su mayoría inutilizables al usar navegadores que no son IE.

¿Se repite la historia?
Afortunadamente, no. Si bien todavía tenemos que lidiar con algunos desastres anteriores, me refiero a las versiones de IE, las cosas ahora son claramente mejores que en los años 90. Si bien las marcas Mosaic y Netscape se convirtieron en polvo durante mucho tiempo, IE también desapareció y fue reemplazada por Edge. Chrome, Firefox, Safari y Opera son opciones sólidas. Las peculiaridades basadas en el navegador todavía existen, pero no son tan frecuentes como solían ser.

Métodos de diseño y limitaciones

La mitad de los 90 fue sin duda el "salvaje oeste" del diseño. El lema en ese entonces era "Haz que funcione". Como se mencionó anteriormente, los navegadores web eran bastante terribles. A veces parecía que tenías que engañarlos para que cooperaran con cualquier aspecto o característica que quisieras crear.

Lo haces con Tables, por supuesto :
Casi todos los sitios principales usaban un diseño basado en tablas, ya que CSS1 recién se estaba preparando para su lanzamiento. Si nunca ha creado un diseño basado en tablas, se ha perdido algo de diversión.

Una página web formada por tablas. (Fuente de imagen)

Si bien fue bastante fácil crear un diseño que tuviera varias columnas, otros diseños requerían un gran nivel de creatividad. A menudo, la solución consistía simplemente en anidar una mesa dentro de otra, una y otra vez. El código estaba extremadamente inflado y gravaba las conexiones lentas.

Carreras de caracoles :
Las velocidades de conexión fueron uno de los mayores obstáculos para crear un sitio. Los módems de 56k eran lentos, pero Dios mío, parecían de banda ancha en comparación con los modelos de 14,4 y 28,8. Por lo general, deseaba que su página de inicio (código e imágenes) tuviera un total de menos de 50 kb de espacio.

Por supuesto, ahora vemos sitios con controles deslizantes de ancho completo que tienen más de 1 MB. Las conexiones lentas a Internet supusieron un reto difícil del que tenías que ser consciente constantemente.

Resoluciones/Dispositivos :
¿Conoces ese teléfono inteligente en tu mano? Bueno, lo más probable es que tenga una resolución más alta que la mayoría de las computadoras de escritorio de 1996. Mi Packard Bell, propensa a fallas, tenía una tentadora pantalla de 640 × 480. Mira, ¡primero fuimos móviles!

Pero en serio, esa era una pantalla pequeña. Algunos usuarios corrían a 800 × 600 o incluso a 1024 × 768 ocasionalmente (si estaba ejecutando un sistema de gama alta), pero era difícil obtener acceso a resoluciones más grandes si aún no estaba ejecutando una. Eso llevó a que muchos sitios se diseñaran para pantallas pequeñas, solo para romperse en pantallas más grandes.

Los dispositivos móviles que podían navegar por la web eran prácticamente una quimera en esos días. Y, aunque nunca tuve ganas en ese momento, las cosas en realidad eran más simples en términos de los tipos de pantallas para las que estabas diseñando. Ahora, tenemos diseños receptivos que funcionarán en prácticamente todas las pantallas.

Gestión del sitio :
Así que sí, no había nada como WordPress en el pasado. Si quería editar el contenido de su sitio, o peor aún, agregar una nueva sección de navegación, prácticamente estaba pirateando potencialmente los cientos de archivos en un sitio HTML estático.

Si bien algunas personas inteligentes (no yo) utilizaron las inclusiones del lado del servidor, otras (yo) se vieron relegadas a cambiar cada archivo en el sitio. La búsqueda y reemplazo global fue de gran ayuda.

Todos los sistemas de administración de contenido de mediados a finales de los 90 generalmente se fabricaban a medida para una corporación y costaban una gran suma de dinero. Aún así, no funcionaron tan bien. Las limitaciones del navegador y las secuencias de comandos harían que estos sistemas fueran una gran pérdida de dinero en muchos casos. También es una de las razones por las que IE 6 se quedó mucho más allá de su vida útil.

¿Se repite la historia?
Diría que lo único que se ha repetido (y multiplicado) son las resoluciones de pantalla y la gran cantidad de dispositivos para los que debemos diseñar. Sin embargo, la llegada del diseño receptivo ciertamente ha hecho que ese desafío sea mucho más fácil de abordar.

Como mencioné anteriormente, esos navegadores "clásicos" a menudo tomaban el mismo código y lo representaban de maneras muy diferentes. Si bien ese problema seguirá apareciendo de vez en cuando, no es el desastre de diseño que alguna vez fue. Este es otro gran paso que nos permite crear diseños que funcionan en todas las pantallas.

Aquí y ahora

Al igual que la electrónica y los automóviles, el diseño web ha recorrido un largo camino en un período de tiempo relativamente corto. Es sorprendente ver lo que están creando diseñadores y desarrolladores talentosos, sin haber soñado nunca con tales cosas cuando comencé.

Afortunadamente, los avances en hardware y software han facilitado nuestro trabajo y han democratizado la publicación en línea. Ya no tenemos que contratar a grandes empresas para que nos construyan un CMS. Hay muchos grandes disponibles gratuitamente. Las instalaciones con un solo clic de los proveedores de alojamiento permiten que aquellos que ni siquiera son profesionales comiencen a trabajar en la web. Eso ha creado más oportunidades para todos nosotros.

¿Cuándo comenzó tu viaje como diseñador web? ¿Cuáles son algunas de las diferencias más notables entre entonces y ahora?