Oggi ho apportato un piccolissimo cambiamento al sito: ho aggiornato la favicon, ovvero l’iconcina che vedi nei tab del browser (e nei preferiti, se hai salvato l’indirizzo).1Se continui a vedere la precedente molto probabilmente dovrai vuotare la cache.
Se stai visitando il sito da un computer desktop senza uno schermo ad altissima risoluzione è molto probabile tu possa vederla un po’ più brutta e sgranata perché, nonostante siamo nel nostro massimo splendore tecnologico, le favicon vengono ancora visualizzate dalla maggior parte dei browser alla stessa risoluzione che si usava agli albori di Internet, ovvero 16 x 16 pixel:
Poi in realtà la situazione è – ovviamente – più complessa: puoi disegnare e inserire nel codice delle pagine differenti dimensioni per l’icona e ogni browser sceglie quella che preferisce. Nel mio caso sull’iPad, la cui risoluzione del display è decisamente superiore a 1080p, posso avere la soddisfazione di vederla a 32×322Ma, nonostante io abbia inserito l’apposita dimensione di 32×32, Chrome preferisce prendere quella da 64×64 e ridimensionarsela; come ho detto ognuno fa quello che gli pare, in totale anarchia… :); sul Mac, col suo sfigato monitor da povery in Full HD, no.
Il logo originale da cui sono partito è questo (qui c’è un articolo dedicato):
Ho deciso di cambiare colore, scegliendo un lime vibrante e quasi fosforescente, anche perché quello giallo lo utilizzo altrove. Come bonus qui ci sono tutti i test (a 16×16 pixel) che ho effettuato per arrivare a qualcosa che lo ricordasse almeno lontanamente:
L’ideale sarebbe stato creare un’immagine di tipo ICO perché questo formato consente di inserire tutte le diverse dimensioni in un unico file ma – indovina un po’ – c’è sempre un browser scemo che non è capace di interpretarlo correttamente (in questo caso Safari: ha sempre avuto grossi problemi con la trasparenza delle immagini ICO e aggiungeva degli angoli neri intorno al cerchio). Così alla fine ho realizzato svariate PNG e adesso ogni navigatore si prende quella che vuole.
Poi ho dovuto naturalmente litigare anche con WordPress, perché gestisce le favicon a modo suo (e non permette di usare dimensioni multiple: vuole un’immagine grande e poi la ridimensiona, male, lui), per cui è stato necessario mettere mano anche al PHP. Adesso comunque dovrebbe funzionare tutto.
Il risultato è migliore del precedente pallino grigio? Sì, no, boh… Di sicuro è più coerente, visto che il sito si chiama Lemonskin (letteralmente “scorza di limone”) e non Puntinogrigio.
Non era un cambiamento necessario o importante, ma alla lunga quella sorta di piccolo bersaglio per freccette monocromatico, che resisteva sin dalla nascita del sito, mi aveva stancato. :)
One more thing…
Ne ho anche approfittato per aggiungere il loghetto del sito al menu laterale e, già che c’ero, l’ho reso (insieme al campo di ricerca) un pochino più dinamico: adesso ci segue mentre leggiamo la pagina, ed è indipendente dalla trasparenza degli elementi sottostanti.3È un sistema per agevolare la lettura e ridurre le distrazioni: quando il cursore del mouse non si trova sulla barra laterale, questa diventa meno visibile (ma soltanto sui computer desktop).
Cambia anche la velocità di rotazione a seconda di dove ci troviamo (pagina principale o all’interno di un articolo4Nel secondo caso possiamo cliccarlo e tornare alla home.).
Piccoli effetti ottici
Se osservi per qualche secondo la rotazione del loghetto in home page e poi ci passi il mouse sopra, noterai che pian piano rallenterà fino a fermarsi, diventando grigio. Cliccandoci sopra non succede niente, perché ti trovi già nella pagina iniziale, e quindi ho inserito questo piccolo effetto per sottolinearlo.
Tuttavia, nel momento stesso in cui si ferma, sembra cominciare a ruotare pianissimo nella direzione opposta. Non lo fa naturalmente, è immobile; ma il nostro cervello si fa fregare. :)
Poi come al solito mi sono fatto un po’ prendere la mano e ho cambiato tutto il tema del sito.
Così, perché mi andava… :)