La nuova versione di questo sito è online: più spazio al mobile e alla leggibilità degli articoli. In questo post l’analisi completa dei cambiamenti e i dettagli tecnici dello sviluppo.
Chi mi segue dal lontano 2006 sa bene che questo sito non è mai stato stravolto dal momento della sua prima pubblicazione. Ho fatto alcuni aggiornamenti negli anni immediatamente successivi, ma il tema WordPress realizzato in origine non è mai cambiato in maniera radicale.
Era da tempo (anni!) che volevo intervenire, ma per mancanza di determinazione e priorità maggiori di altri progetti ho sempre posticipato lo sviluppo.
Sono così arrivato ad Aprile 2016 con molte idee, alcune bozze di design, ed un nulla di fatto. Il giorno del 10° compleanno di questo sito ho capito che se volevo veramente cambiare qualcosa dovevo darmi degli obiettivi concreti e a breve termine, così ho preparato una board su Trello con le cose indispensabili, e dopo circa un mese ho pubblicato l’aggiornamento che potete vedere.
So benissimo che ci sono ancora margini di miglioramento, ma alcuni sviluppi mi avrebbero richiesto più tempo. Ho puntato a pubblicare il risultato prima possibile arrivando almeno allo stato di MVP.
La strategia ha pagato, se pensate che ho ancora una nota su Evernote creata il 13 Febbraio 2012 con le cose da fare per il nuovo tema. Avessi continuato su quella strada probabilmente starei ancora ragionando su cosa includere nella revisione di TomStardust.com.
Tema responsive, approccio mobile-first
Uno dei requisiti fondamentali del nuovo sito era l’approccio mobile-first. Il tema WordPress precedente non si comportava malissimo, essendo accessibile e con un layout fluido, ma non era stato progettato per dispositivi come gli smartphone (del resto parliamo di 10 anni fa).
È probabilmente già un grande risultato che abbia resistito così bene al passare del tempo.
Ho così progettato il nuovo tema pensando prima di tutto alla visualizzazione su schermi di piccole dimensioni, prevedendo 3 breakpoint per tablet, notebook e desktop con risoluzione elevata.
In precedenza utilizzavo un plugin per generare una versione parallela del sito dove almeno gli articoli erano leggibili, ma la soluzione non era ottimale e l’esperienza non era soddisfacente.
Adesso ho un unico sito responsive, e sarà interessante seguire l’evoluzione del trend delle visite su Google Analytics.
Tipografia web
Nel nuovo tema dovevo obbligatoriamente curare la tipografia. Tutto merito di Kerning 2013, la prima conferenza italiana sulla tipografia a cui ho partecipato 3 anni fa.
Alla base di tutto c’è Raleway, uno dei font gratuiti di Google Font utilizzato a dimensioni ben precise seguendo le indicazioni dell’utilissimo Modular Scale.
Ho inoltre migliorato la leggibilità impostando un limite massimo alla lunghezza dei paragrafi di testo: mai oltre i 38em. L’ideale è restare sempre tra i 45 ed i 75 caratteri per linea.
Questa è stata una delle prime cose che ho impostato nel CSS mentre lavoravo al tema, e vi consiglio di seguire lo stesso approccio su progetti come questo: una tipografia curata fa la differenza in un sito dove i contenuti testuali hanno un ruolo fondamentale.
Non solo blog
Un altro cambiamento fondamentale riguarda l’organizzazione dei contenuti e la diversa importanza assegnata alle sezioni del sito.
La mia frequenza di pubblicazione è cambiata nel corso degli anni, anche se continuo a scrivere articoli quando ho qualcosa di veramente interessante da condividere. Pur avendo un ruolo fondamentale il blog non è più l’unico motivo che mi fa mantenere vivo questo sito: era giusto dare più rilevanza al mio lavoro ed ai progetti che seguo, oltre alle mie passioni.
Ho così creato una nuova home, che non si limita più a mostrare l’elenco dei post più recenti e rappresenta meglio chi sono e cosa faccio.
Ne ho approfittato anche per sostituire la precedente pagina “chi sono” con un template su misura per la pagina autore di WordPress. Mi è bastato creare un template utilizzando come nome del file author-$nicename.php e in questo modo il mio profilo può essere facilmente raggiunto anche dal box informativo alla fine di ogni post.
Anche le altre sezioni hanno ottenuto più visibilità: le recensioni di prodotti tecnologici che avevo iniziato come esperimento meritano più spazio, e adesso le ho incluse anche all’interno del feed RSS. Mi trovo spesso a provare nuovo hardware e software, e adesso ho uno spazio per parlarne in maniera adeguata.
Integrazione di Flickr
Utilizzo da anni Flickr per raccogliere le mie foto migliori, e volevo integrare il servizio sfruttando le API che mette a disposizione.
Esistono plugin di WordPress, ma non volevo aggiungerne di nuovi e creare altre dipendenze: avevo bisogno di qualcosa di più personalizzato. Ho così integrato nel tema WordPress due idee.
Fotografia in homepage
Ho definito un insieme di fotografie che volevo mostrare in modo casuale sulla pagina, ed ho creato un array con gli ID delle stesse foto (l’ID è facilmente identificabile alla fine della url, ad esempio https://www.flickr.com/photos/tomstardust/22914769353).
Ho quindi usato l’API flickr.photos.getInfo per recuperare le informazioni che mi servivano di ogni foto, come l’indirizzo della pagina su Flickr ed i parametri farm-id, server-id e secret per costruire l’indirizzo della foto alla risoluzione necessaria.
È infatti disponibile una guida ufficiale (molto utile) per ricavare l’indirizzo di una foto nei vari formati. L’unica pecca è che per le dimensioni 1600px e 2000px questa API non è sufficiente, è necessario utilizzare flickr.photos.getSizes. Attenzione inoltre ai termini del servizio: non è possibile usare Flickr come servizio di storage per poi visualizzare le foto altrove, devono essere sempre linkate al sito originale.
Un esempio di chiamata è il seguente:
https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key='APIKEY'&photo_id='PHOTOID'&format=json&jsoncallback=?
I valori APIKEY e PHOTOID sono da inserire.
Nota: per utilizzare le API è sufficiente richiedere una key: la risposta alla richiesta per l’uso non-commerciale è istantanea.
Galleria delle ultime foto
La pagina Fotografia raccoglie le mie ultime foto di Flickr e le posiziona nel modo migliore possibile adattandosi alla risoluzione grazie a Freetile, un plugin di jQuery.
Il JavaScript necessario per far funzionare il tutto è il seguente:
// Flickr importer
if ($('.js-gallery').length) {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=38389505@N00&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
var imageShown = item.media.m;
$("<img class='gallery-item-img' alt='' />").attr("src", imageShown).appendTo(".js-gallery").wrap("<li class='js-gallery-item gallery-item'><a href='" + item.link + "></a></li>");
});
})
.done(function(){
$('.js-gallery').freetile({
animate: true
});
});
}In questo caso l’API chiamata è pubblica, è sufficiente sostituire il mio id utente con quello che preferite, assicurarsi di avere nella pagina un elemento HTML con la classe “js-gallery”, jQuery e il plugin Freetile citato prima.
Progetti futuri
Adesso che ho un identità più efficace in rete ed un sito web che mi rappresenta meglio posso concentrarmi sulla scrittura di nuovi post: gli argomenti più importanti saranno sempre usabilità, UX design, accessibilità e WordPress.
Voglio inoltre mettere a disposizione una versione alternativa di questo tema WordPress: sono molto soddisfatto del risultato e con le necessarie modifiche potrebbe essere utile a molti.
Lo aggiungerò sulla pagina dedicata a WordPress, che al momento fa da contenitore ai miei temi Stardust ed Exciter. Realizzare il primo tema accessibile per WordPress è stato per me un traguardo importante, ma è giunto il momento di aggiungere qualcosa di nuovo alla collezione.
Dopo questo riepilogo voglio sottolineare ancora una volta quanto sia stato importante puntare ad un obiettivo concreto a breve termine: se avete dei progetti in standby eliminate il superfluo e realizzate l’indispensabile. Ci sarà tempo per lavorare ai miglioramenti in nuove iterazioni, e vi renderete conto che feature irrinunciabili potrebbero essere diventate superflue nel frattempo.
Siamo alla fine. Vi piace il risultato?
Cosa vorreste trovare in un tema WordPress derivato da questo?
I commenti sono qui per voi, o se preferite potete contattarmi direttamente con i vostri feedback.
