Mejorando el diseño del fotolog

Este finde he sacado tiempo para actualizar la sección fotolog de mi web. He pulido el diseño con un montón de pequeños detalles que quería implementar y que se iban acumulando en la lista de pendientes.

Simulación de la vista de la sección fotolog en una tablet. Al lado izquierdo se ve la implementación anterior, con una sola columna y un post detrás de otro. En el lado derecho la nueva versión, con una vista de los posts en forma de mosaico mostrando la foto principal de cada uno de ellos. — A la izquierda la versión anterior de la sección fotolog en una tablet y a la derecha la nueva versión.

Ahora en la página principal del fotolog salen las últimas 20 entradas en un formato de mosaico, que creo que es mucho más dinámico y permite ver mejor las últimas entradas haciendo énfasis en lo importante: las fotos.

Captura de pantalla con la ventana de un navegador web en la sección fotolog, con la nueva vista de mosaico que muestra las últimas entradas directamente con sus fotos. — Captura de la nueva vista de la sección fotolog en un navegador web de escritorio.

Cuando una entrada tiene más de una foto quería que se percibiera que la foto principal no era la única sino que es una colección. Para ello ~~me he inspirado~~ he fusilado el diseño de Glass.photo, porque me encanta. Sale un pequeño carrusel con algunas de las otras fotos, dejando entender que en esa publicación "hay más" fotos que ver. Me dejo como tarea pendiente añadir un texto con la aclaración del número de fotos adicionales, que hará que sea todavía más claro, pero creo que la versión actual ya merece ponerse en funcionamiento.

Al navegar desde pantallas pequeñas (tablets y móviles), ahora el espacio está mejor aprovechado, ajustando las fotos hasta los bordes del dispositivo y con un menor espacio entre ellas cuando es una colección. En pantallas grandes, cada foto se ve también más grande que antes.

Simulación de la vista de un post del fotolog en una tablet. Al lado izquierdo se ve la implementación anterior y en el lado derecho la nueva y actualizada, en la que el mosaico de fotos ocupa todo el ancho, con menos espacio entre ellas y con un orden dferente de las fotos. — A la izquierda antes, a la derecha la nueva versión.

El mosaico se genera ahora siguiendo, de izquierda a derecha, el orden real en que están incluidas las fotografías (antes era al revés, por columnas). Esto lo he conseguido usando una librería llamada Macy.js, que viene a generar un efecto masonry pero con muy poca carga (11KB) y sin dependencias de otras librerías. Es el primer código Javascript que incluyo en mi web personal, pero creo que merece la pena, a la espera de que CSS permita una distribución de mosaico de forma nativa.

Iba a terminar diciendo que, poquito a poco, la web va tomando la forma que quiero que tenga. Pero la verdad es que esto también va cambiando con el tiempo y es genial poder ir modificándola. Además, en cuanto a la cosa técnica, mi web es para mí un campo de juego y experimentación que disfruto muchísimo. Me ayuda a darme caña con el diseño, a desoxidar mis habilidades de programación y me permite probar nuevas técnicas de maquetación.