Finalmente online il restyling del mio sito. Riassunto di un viaggio lungo… un anno.
Elenco dei Contenuti
C’era una volta
Gli archivi storici parlano chiaro: “03/08/2021” è la data in cui è stato gettato il primo sassolino.
Ci è voluto tanto, anzi troppo, per arrivare al risultato finale. Purtroppo però i progetti personali spesso finiscono in secondo piano per lasciare spazio ai lavori per i clienti.
E così, con periodi di lavoro intenso, il restyling del sito è stato interrotto più volte, anche per intervalli prolungati, in un “prendi & lascia” reiterato che come sempre costituisce la ricetta perfetta per non arrivare mai alla meta.
Prima
La situazione di partenza non era drammatica ma volevo assolutamente cambiare alcune cose.
Avere pieno controllo del frontend
Non sono a priori contro l’uso di temi pronti e page builder e la scelta di realizzare la prima versione del sito con OceanWP ed Elementor aveva delle ragioni precise. Ma dopo aver sviluppato da zero molti temi per i progetti lavorativi, volevo farlo anche per il mio sito. Insomma, preferisco il codice agli strumenti visuali.
Cambiare i colori
Non sopportavo più quell’aria da “capo delicato lavato ad alta temperatura con la candeggina”, volevo colori più pieni e netti. E siccome faccio uso del “dark mode” ovunque mi sia permesso, avere un’atmosfera scura di default anche qui.
Design minimale
“Non sono un grafico MA….” ci tenevo ad essere l’artefice di questo disastro! Seriamente: volevo un aspetto molto semplice, che rendesse fruibili i contenuti e brutto quanto basta. Volevo che uscisse dalla mia testa e non da un template preconfezionato.
Massime prestazioni
Cerco sempre di migliorare le performance, così volevo togliere gli elementi più pesanti che gravavano sul sito, nonostante non fosse affatto lento. Non solo per una questione di velocità di caricamento, ma anche in ottica di impatto ambientale: ciò che non c’è non richiede elaborazione e quindi consumo di energia.
Accessibilità
Tenevo molto al miglioramento di questo aspetto del sito e delle mie conoscenze in materia. Non c’era occasione migliore che usare questo restyling come palestra.
Contenuti personalizzati
Per strutturare meglio le informazioni, volevo che i Servizi non fossero più normali pagine ma un tipo di contenuto dedicato.
Dopo
Il risultato finale è abbastanza in linea con l’analisi iniziale. Dico “abbastanza” perchè non sono mai contento e perchè, in una gestazione così lunga, ho cambiato idea più volte e ne ho accumulate altre non riuscendo a realizzarle tutte. Ma arriva un momento in cui bisogna “fermare” la mente ed arrivare ad un risultato concreto. Dopo si può naturalmente continuare a lavorare per mettere in pratica nuove idee.
Per quanto riguarda gli obiettivi di prestazioni e impatto ambientale, seppure migliorabili i risultati sono soddisfacenti.
Clicca sull’immagine per vedere il report completo.
Come sempre quando si maneggiano questi numeri, niente fanatismi: si prendono per ciò che sono, cioè una traccia da seguire per capire dove cercare di migliorare e non uno strumento di misurazione da usare nello spogliatoio della palestra.
Sull’accessibilità ci sarà ancora da fare; ho risolto gran parte dei problemi segnalati da tre diversi strumenti di verifica ma so che nessuna scansione automatica può garantire il risultato migliore possibile, soprattutto in questo ambito.
Il design risponde ai requisiti di minimalismo, pulizia e… oscurità. E’ bello? E’ brutto? Lo definirei più che altro “funzionale”.
Infine, per chi è interessato, ecco qualche dettaglio tecnico. Sintetico eh, che altrimenti non finiamo più.
TailPress
Ho sviluppato il tema custom usando come base l’ottimo TailPress. Si tratta di un tema che propone la struttura minima standard di un tema WordPress di tipo “classic” (quindi non un tema a blocchi per il Full Site Editor), integrando TailwindCSS e gli strumenti di compilazione necessari. E’ leggerissimo e rende lo sviluppo molto veloce, anche grazie al reload istantaneo durante la modifica dei file.
TailwindCSS
Ho iniziato ad usare TailwindCSS qualche mese fa collaborando con il fantastico team di Ensoul ed è diventato per me irrinunciabile. Richiede la conoscenza di CSS e un po’ di adattamento per chi è abituato a scrivere codice, ma se ci si prende la mano regala grandi soddisfazioni. E’ necessario un processo di compilazione per generare il CSS finale, ma lavorando con TailPress lo si trova già integrato e non bisogna fare alcun setup.
AlpineJS
Cercavo qualcosa per sostituire jQuery, che fosse leggero e che consentisse di introdurre velocemente un minimo di interattività. Scavando tra librerie e framework Javascript che avevo tra i bookmark ho tirato fuori AlpineJS, ho fatto qualche test ed è scattato l’amore. Secondo me perfetto in coppia con TailwindCSS e per progetti medio/piccoli.
Plugin custom
Ho creato due mu-plugin per la registrazione dei custom post type e per alcune funzioni di utilità, tra cui la modifica della ricerca di WordPress.
PODS
Ormai è standard associare la gestione dei custom fields ad ACF, magari in versione PRO. Eppure non tutti sanno che esiste un’alternativa gratuita che fornisce funzionalità paragonabili: PODS. Dopo anni di lavoro con ACF ho dovuto abituarmi ad una interfaccia diversa, forse un po’ “grezza”, e fare i conti con qualche limitazione. Ma per le esigenze di un progetto di piccole dimensioni si è rivelato più che valido.
Accessibilità
Per le indicazioni di base ho seguito il sito A11Y-101. Per le verifiche ho usato gli strumenti di sviluppo di Firefox, WAVE e AXE. Da tenere presente che ogni tool ha le sue particolarità e restituisce risultati diversi dagli altri. Un po’ complesso confrontare tutte le informazioni raccolte, ma alla fine si riesce a verificare molti più aspetti.
E poi?
Una delle prossime fasi è introdurre qualche animazione, sempre nell’ottica della semplicità e del minimalismo. Non devono sovrastare i contenuti ma metterli in risalto.
Poi continuare ad ottimizzare performance e accessibilità.
E lavorare sui contenuti. Ma questa è un’altra storia.
E tu, persona coraggiosa che hai letto fin qui, cosa ne pensi? Se vuoi esprimere un parere moderatamente offensivo o segnalare un malfunzionamento, fallo nei commenti o contattami.
Grazie!