¿Cómo se crea un diseño web atemporal?

El experimento mental que se le ocurrió a Chris Coyier de CSS Tricks es interesante. ¿Cómo se crea un diseño web atemporal para un sitio que está destinado a durar para siempre?

«Por cierto, ¡el sitio web debe funcionar sin cambios durante 10 años!»

¿Alguna vez ha pensado en esto? Lo admito, no lo he hecho. Chris Coyier se pregunta a si mismo y a nosotros, cómo debe verse un sitio web cuando el cliente quiere ejecutarlo sin ningún cambio durante al menos diez años. Al observar las mejores prácticas que se estabilizan continuamente, esta pregunta podría no ser tan infrecuente en el futuro. Veamos qué resultados podemos obtener juntos.

Chris Coyier enumera diferentes tipos de diseñadores que pueden reaccionar a la solicitud inusual del cliente ficticio de formas muy diferentes. En un extremo del espectro, está el diseñador que considera que cualquier tipo de disposición y diseño es innecesario y cree que un texto HTML simple es completamente suficiente. En el otro extremo, están los diseñadores que rechazarían la solicitud de inmediato.

La mayoría de nosotros probablemente estaríamos en algún punto intermedio y pensaríamos en lo que se requiere para proporcionar un diseño contemporáneo y en lo que se puede prescindir. Cuando lo pensamos en profundidad, podemos llegar a ideas completamente diferentes.

Ejemplo de disuasión: la página de inicio del millón de dólares

Hace unos días leí un articulo interesante por el Laboratorio de Innovación de Bibliotecas, que se ocupó de la popular página de inicio de un millón de dólares. Estoy seguro de que recuerdas el sitio web donde se vendió cada píxel para proporcionar al operador un millón de dólares al final.

En 1000 x 1000 píxeles, a un precio de un dólar por píxel, los prospectos pudieron comprar un lugar para colocar sus anuncios. El proyecto causó sensación en 2005. El operador ganó fácilmente el millón de dólares planeado en un período de tiempo bastante corto.

Hoy, 12 años después, la página de inicio del millón de dólares todavía existe, aunque parece una reliquia del pasado. Claro, una de las razones de eso es que no había una guía de diseño. Esto no podría resultar en nada más que un diseño completamente aleatorio. Bajo este aspecto, ni siquiera deberíamos juzgar el proyecto.

Lo llamativo es otra cosa. Es el hecho de que ya no se puede acceder a más de la mitad de los 3.000 enlaces de la página. Casi 600 enlaces conducen al nirvana web y los demás conducen a redireccionamientos parcialmente sospechosos.

Por lo tanto, el uso de la página de inicio de un millón de dólares no solo se reduce para los visitantes, sino también para los antiguos compradores de píxeles.

¿Qué nos dice esto cuando se trata de venderle a un cliente un sitio web que se pueda ejecutar durante al menos 10 años sin ningún cambio?

Requisitos para sitios web sostenibles

Es bastante obvio. Tenemos que evitar enlaces que no se originan en el enlace cosmos de nuestro cliente. E incluso entonces, tenemos que asegurarnos de que el cliente recuerde ajustar los enlaces internos cada vez que realice cambios.

También tenemos que renunciar a los recursos externos, ya que no influimos en la disponibilidad permanente de estos elementos. Por muy atractivo que parezca, debemos evitar la integración de scripts externos de repositorios web o ubicaciones de CDN comunicadas. En su lugar, mueva los recursos necesarios al sitio del cliente e intégrelos localmente. Sin embargo, asegúrese de que los scripts no hagan referencia a recursos externos. Prepárate para un poco de trabajo.

También es importante pensar qué funciones podrían no estar disponibles en el futuro. Afortunadamente, características que cuentan como deprecated, se puede identificar con bastante facilidad.

En este contexto, utilizando marcos es no recomendable cualquiera. La nueva mierda caliente, como React o Vue, seguramente será un problema en diez años. Sin embargo, Vanilla JavaScript debería ser seguro.

Que hacer con fuentes? La tipografía es un elemento de diseño bastante importante. Coyier señala que es más antiguo que el diseño web en sí, por lo que no debería ser uno de los elementos de diseño prescindibles. Entonces, usemos fuentes. Pero, una vez más, guárdelos e intégrelos localmente. En lugar del formato WOFF anterior, podemos usar WOFF2 para integrar una cierta sostenibilidad. Ya hemos presentado WOFF2 aquí.

La única tendencia en la que podemos confiar para este proyecto es minimalismo. Al menos, incluye el modesto uso de animaciones. Solo usaría este último cuando se trata de micro interacciones.

En el futuro, probablemente todavía podamos confiar en SVG como nuestra tecnología gráfica. De esta forma, no dependemos de las resoluciones. Jpg y Png seguirá corriendo la escena en diez años. WebP no pudo establecerse hasta ahora, y probablemente no lo hará en el futuro.

Generalmente, tenemos que admitir que solo podemos crear un sitio web atemporal cuando no tiene que proporcionar funcionalidad avanzada. Rechazaría una solicitud para una tienda en línea que debe funcionar sin cambios durante 10 años. Sin embargo, una tarjeta de presentación web u otra presencia puramente representativa no debería ser un problema, siempre que se cumplan los requisitos mencionados anteriormente.

¿Qué piensas? ¿Qué se debe proporcionar para que el cliente pueda recibir su sitio web de 10 años?