El rediseño de mi web personal llevaba ya mucho tiempo en mi lista de tareas pendientes. Este verano decidí ponerme las pilas y sacarlo adelante. Aquí está, lista para su decimoquinto cumpleaños. Y voy a explicar un poco los cambios, que es lo que se lleva ahora.
Migrando a Hugo
Desde 2006 mi web ha funcionado con WordPress. Soy un gran defensor del proyecto y lo he implantado en varias organizaciones. Sin embargo, me he dado cuenta de que no era la mejor opción para mi web personal: termino por actualizar la instalación y los plugins con más frecuencia que publico artículos.
Por eso he apostado por Hugo, un generador de sitios estáticos muy rápido y con interesantes funcionalidades como la internacionalización (incomprensiblemente ausente en WordPress). Me fascina crear artículos con mi editor de código (Visual Studio Code) y guardar el histórico en un repositorio Git. Ya tenía ganas de probar en serio el JAMstack.
Reducción de emisiones
Cada vez es mayor la concienciación sobre el impacto medioambiental del uso de internet. Visitar webs consume electricidad, y por tanto genera emisiones de gases de efecto invernadero. He diseñado esta web para reducir estas emisiones.
La manera quizá más efectiva de conseguirlo es reduciendo el peso de cada página en la medida de lo posible. Mi objetivo es mantener el peso de las páginas por debajo de 100 KB. Por comparar, el peso medio de las páginas en 2020 superó los 2 megas: literalmente 20 veces más.
Esto significa renunciar a algunas cosas, pero mi afán es que, aun con esos cambios, la página sea agradable y legible. Algunas de las medidas que he tomado son:
- Ser selectivo con el uso de imágenes. Cuando las use, reducir automáticamente su calidad y tamaño, utilizar el formato webp y cargarlas de forma diferida.
- Utilizar una tipografía ligera: cada fuente de Atkinson Hyperlegible pesa 22 KB como máximo.
- Eliminar cualquier código de seguimiento: ni Google Analytics, ni Google Tag Manager, ni aviso de cookies, porque no hace falta. Apenas utilizo recursos alojados en otros dominios.
Me he permitido algunas excepciones que creo con impacto menor o justificadas: por ejemplo, la insignia de la Green Web Foundation que hay un poco más abajo se carga desde un dominio externo, y la página de mi portfolio es notablemente más pesada, en torno a 1 MB, por usar imágenes de más calidad. Pero me he dado cuenta de que esos 100 KB son suficientes para la mayoría de páginas, aun usando una tipografía personalizada y una foto de una calidad razonable.
Por otro lado, el consumo energético de una web estática es menor que el de un CMS dinámico. Las páginas se generan una vez, no con cada visita, reduciendo la necesidad de procesamiento y eliminando las llamadas a bases de datos. Esta web generada con Hugo debería ser más eficiente que mi antigua web en WordPress.
Finalmente, he decidido alojar esta web en Cloudflare Pages, cuyos servidores utilizan electricidad de fuentes renovables.
Accesibilidad
En los últimos meses he estado aprendiendo un montón sobre accesibilidad, y he intentado aplicarlo a este nuevo diseño. Nada del otro mundo: una mejor semántica, suficiente contraste, texto alternativo escrito con mimo. Seguiré trabajando en ello.
La tipografía que he utilizado para la web es Atkinson Hyperlegible, desarrollada por el Braille Institute con el objetivo de mejorar la legibilidad para usuarios con baja visión. La descubrí en este vídeo de Linus Boman. Además, me parece una tipografía con personalidad y que es una declaración de intenciones.
Compatibilidad
Esta web utiliza algunos estilos de CSS que pueden no funcionar en todos los navegadores, como el uso de la propiedad CSS gap en contenedores flex. En todo caso, debería ser posible leer el contenido sin problemas en cualquier navegador.
Inspiración
Para este rediseño me inspiré en un montón de webs personales que se pueden ver en este panel de Milanote. Pero con lo que se me encendió la bombillita es con la portada de la canción Sato de Paniyolo.