Vai direttamente al contenuto

Redesign: il layout

🗓 Quando: 🙇🏻‍♂️ Categoria: Meta lavoro 💁🏼‍♂️ Cosa: Front end, Frank Chimero, indieweb, css, Emmaboshi, Craft CMS

TL;DR

Ho finalmente aggiornato il mio sito. 

Avevo tra le mani un vecchio layout implementato solo a metà. Oggi l'ho completato e, già che c'ero, ho dato anche una rinfrescata ad alcuni testi. 

Lo ammetto, sui colori 🎨 ho forzato un po' la mano: i colori di questo sito cambiano se utilizzi un tema scuro (se hai un Apple sai di cosa parlo!) e – per non farsi mancare niente – cambiano anche nel corso dell'anno, seguendo il calendario reale dei quattro slam 🎾 di cui riprendono le tonalità 🌈.

Griglia

Anteprima?

Prima di Natale, in un post specifico, mi ero speso in un sacco di complimenti per i siti piccoli ma curati e allo stesso tempo mi ero fatto la predica da solo. Perché? Perché il mio sito non era poi così curato e dovevo fare qualcosa. Non so se lo hai notato ma qualcosa da allora è cambiato.

Capiamoci, lungi da me il voler fare un redesign in the open come il buon Frank Chimero; io faccio le modifiche zitto zitto e man mano, aggiornando un po' alla volta, documento quello che produco. Ovviamente tutto il lavoro è un cantiere aperto e perenne, quindi se vedi errori, robe "rotte" e/o brutte, o se semplicemente qualcosa non ti piace... scrivimi due righe e te ne sarò grato. Email, twitter, piccioni viaggiatori. Insomma: quello che preferisci.

Prima

Decaro.la before it was cool

Da dove iniziare

Premesso che l'architettura del sito poteva rimanere esattamente com'era – in quest'ultima versione troverai giusto l'aggiunta di una pagina "bio" – , la necessità urgente era quella di riorganizzare il layout: insomma, come per il tappeto del grande Lebowsky, anche io dovevo dare un tono all'ambiente.

Per prima cosa ho quindi rimesso in ordine il codice (tutto è ancora generato da Craft CMS) e ho cercato di tenere la complessità al minimo, così da contenere anche la difficoltà di manutenzione nel tempo.

Per quanto riguarda la veste grafica, ho preso in mano un layout che aveva ideato il buon Emmaboshi più di due anni fa: carta bianca ed effetto wow assicurato. Qui vedi la primissima bozza.

Così andando avanti con entusiasmo ma un po' "a sentimento" rispetto a quello che era il layout originale, e dando dei colpi di martello un po' a destra e un po' a sinistra, sono arrivato al risultato finale che - indovina un po'? - è quello che stai vedendo. In tutta onesta non è come doveva essere all'inizio ma, nonostante tutto, credo vada più che bene.

Layout boshi

Il nuovo layout, prima che lo mettessi in lavorazione

Aspettando i bombardamenti di Nadal

Approfittando del nuovo spazio digitale, ho iniziato a fare un paio di "giochini" col codice. Per cominciare ho creato una variante per il dark mode e, come se non bastasse, ho inserito un trick per far sì che i colori del tema cambiassero in concomitanza dei periodi dell'anno in cui hanno luogo i quattro slam 🎾🏆.

Qualora non lo sapessi, i quattro slam sono i quattro tornei più importanti di tennis, hanno luogo ogni anno e sono l'Australian Open 🇦🇺, il Roland Garros 🇫🇷, Wimbledon 🇬🇧 e lo US Open 🇺🇸. Ognuno di questi tornei ha una sua palette cromatica che, con l'alternarsi dei mesi, vedrai anche su questo sito: tutto gestibile facilmente con le CSS variables.

Per la cronaca, la prima variazione di colore sarà visibile durante i bombardamenti di Nadal sulla terra rossa di Parigi, nel periodo del Roland Garros. Ah, mi hanno detto che c'è una somiglianza tra me e lui facilmente riscontrabile nella pagina bio.

E adesso?

Sono intanto contento di aver fatto il primo passo, pensando invece ai prossimi aggiornamenti ho l'imbarazzo della scelta. I primi step che mi vengono i mente sono quelli dal punto di vista dello sviluppo "classico": i service worker, le immagini in formati moderni, qualche effettino simpatico con Greensock. Invece, parlando di indieweb, mi piacerebbe provare qualcosa di nuovo come l'autenticazione con i rel-me, Micropub, le Webmention e tutto quello che bolle proprio nella pentola dell'indieweb oggi.

E quindi eccoci qui. Nuovo sito, tanti colori, buoni propositi per il futuro. Che te ne pare? Ogni commento, in qualsiasi luogo (digitale o non), è ben accetto. Ciao!

Bello ‘sto sito eh, ma me lo dimentico tra meno di subito

Ti capisco amico mio. Neanche io mi ricorderei di me. Per questo ho fatto una pagina about e creato una newsletter che uso per avvisarti quando pubblico qualcosa di nuovo. Metti che ti fa comodo.

Una newsletter? Sì: email molto brevi, molto di rado (la stessa frequenza con cui pubblico), e puoi cancellarti quando vuoi. Non mi offendo.

Facciamolo 💌