Ho fatto una cosa nuova, si chiama Guido

14 settembre 2014
Argomenti:

Che cosa ho imparato lavorando al nuovo sito di Francesca Zampone

Quando Francesca mi ha scritto per rifare il suo vecchio blog – che potete vedere ancora per qualche giorno online qui – io ero in viaggio da qualche parte sulla costa del Pacifico degli Stati Uniti, e lei il suo blog non sapeva se chiuderlo oppure rifarlo da capo, rimetterlo a nuovo e dargli una seconda possibilità. Abbiamo iniziato a lavorarci insieme verso la metà di luglio, e per me è stato molto divertente e molto istruttivo.

Nonostante sia un sito relativamente semplice – quattro pagine e un blog che riparte da una ventina di articoli – per farlo a regola d’arte ho dovuto affrontare un po’ di questioni tecniche che non potevo più permettermi di rimandare, cambiare ancora (e molto) il mio modo di lavorare, e in generale ho avuto l’opportunità di migliorare e di imparare molte cose nuove e che mi aiuteranno non poco per i prossimi lavori.

Oltre a questo, Francesca è stata un’ottima cliente: ha molto chiaro il suo brand personale, ha lavorato da sé – e secondo me molto bene – ai testi, ha usato Basecamp per coordinarci senza fare una piega, siamo riusciti a contenere la comunicazione via mail al minimo indispensabile, e le nostre tre – nel senso di tre di numero – riunioni sono durate mai più di un’ora e sono sempre state produttive e risolutive.

Qui ci sono le cose che ho imparato e su cui ho riflettuto lavorando al suo sito – e un pratico indice per chi non ha tempo da perdere. È un articolo lungo e un po’ più tecnico del solito, ma non posso farci niente: questa volta è andata così – e credo che non sarà l’ultima.

Identità visiva

Io e Francesca abbiamo lavorato insieme alla sua identità visiva. Ci siamo trovati e io le ho fatto un sacco di domande, e poi le ho chiesto di farmi vedere un po’ di cose che le piacevano. Lei mi ha detto «il post punk, la new wave e le cose di Peter Saville, soprattutto la copertina di Movement».

Sono tutte cose che piacciono anche a me, quindi intenderci non è stato un grosso problema: molto bianco – che a me piace – nessun problema con gli spazi vuoti, molta sintesi, essenzialità, un rosso come colore distintivo. Ho cercato di creare un sistema coerente di elementi ricorrenti e riutilizzabili, e un linguaggio visivo chiaro: il rosso porta in evidenza e guida, l’unità funzionale minima di ogni post è formata da titolo-riassunto-immagine ed è ripresa ovunque necessario, i rapporti di forza tra le informazioni sono espressi giocando sul peso dei font – che non vuol dire necessariamente aumentarlo, ma variarlo per creare un contrasto – e sugli spazi vuoti, a seconda del contesto. L’obiettivo era rendere impossibile confondersi o perdersi, e spero di esserci riuscito.

Per la tipografia – dopo un po’ di prove – ho scelto il Minion Pro di Adobe per i testi – avevo bisogno di un serif raffinato che però non passasse il tempo a farsi notare – e il Proxima Nova di Mark Simonson per i titoli  – avevo bisogno di un sans serif che fosse figo ma non troppo algido né respingente. Sulle foto – su cui mi dilungo nel prossimo paragrafo –eravamo d’accordo, invece sul bianco e nero ho deciso io: a colori erano troppo imprevedibili e troppo poco in linea con l’identità di Francesca.

La foto grande con i tag in evidenza è un’idea di Enrica: è una cosa che a me da solo non sarebbe venuta in mente, perché è una cosa non strettamente necessaria e non strettamente legata alle esigenze dei contenuti – che sono le cose più importanti per me – e per questo motivo è lontana dal mio sguardo, se non dai miei gusti – perché poi quando l’ho vista finita mi è subito piaciuta. Sono stato più volte sul punto di togliere i tag dalla foto, perché decidere di tenerli ha introdotto un livello di complessità non previsto e che non mi aspettavo, ma poi ho deciso che era effettivamente troppo bella e troppo efficace per farlo.

In generale questo è un punto su cui so di dover lavorare molto se voglio diventare un Web Designer davvero completo: ampliare il mio sguardo, allenarmi ad uscire dal mio gusto strettamente inteso, imparare a non tenere in considerazione unicamente la funzionalità, la praticità e l’usabilità quando immagino un layout, acquisire sguardi diversi dal mio. Il mio primo passo in questa direzione è stata la decisione di spendere un sacco di soldi in riviste, poi si vedrà.

Le foto sono difficili

Avere delle belle foto sul proprio sito è una cosa figa, ma lavorare bene con le foto è una cosa piuttosto difficile. Se uno vuole lavorare bene con le foto deve tenere in considerazione un bel po’ di cose.

Servono belle foto, di grandi dimensioni e di alta qualità

Fondamentalmente perché se fai sul serio e il tuo sito è uno strumento di lavoro a disposizione di un professionista non puoi usare foto brutte, scelte male e di cattiva qualità, altrimenti ci fai una pessima figura: uno sul tuo sito ci si sente a disagio, e tu ne esci sciatto, frettoloso e poco curato.

Solo che recuperare delle belle foto non è facilissimo, specialmente se la persona con cui lavori – è il caso di Francesca, ma in realtà è una cosa che ai miei clienti capita abbastanza spesso – non ha accesso a risorse professionali a cui attingere. D’accordo, c’è Unsplash e altri siti del genere che mettono a disposizione foto di alta qualità da usare liberamente, ma il fatto che in giro ci siano delle belle foto che uno può anche usare liberamente non significa che poi uno sappia effettivamente come farlo o cosa farsene.

Appunto: non è che tutti sanno come si fa a lavorare per bene con le foto

Ad esempio, una delle prime cose che ho chiesto a Francesca quando abbiamo deciso di lavorare insieme è stata questa: tu hai un programma per modificare le foto, e se ce l’hai lo vuoi usare? Lei è stata molto sincera e mi ha detto che lei un programma così non ce l’ha, che non ha nemmeno intenzione di averlo o di imparare a usarlo e che in generale per lei questa cosa delle foto doveva essere il più semplice possibile da gestire, che non voleva che diventasse un problema o una complicazione.

In giro ci sono un sacco di persone come Francesca, che hanno un sito ma non hanno Photoshop o cose del genere, che magari non hanno nemmeno un computer in grado di far girare quei programmi come si deve e che in generale preferiscono dedicarsi ad altro – scrivere i post, scegliere delle belle foto, andare a passeggiare lungo il fiume – invece di passare il tempo a ritagliare e modificare le foto per il loro sito.

Questo però non significa che il loro sito non debba avere foto, o che debbano essere brutte o gestite male. Dopo aver parlato con Francesca mi sono messo lì e nel giro di qualche giorno – qualche giorno tremendo di passione, dolore e enorme sfiducia nelle mie capacità, va detto – ho inserito nel tema di WordPress che stavo preparando per lei una funzionalità che:

  1. Applica a tutte le foto che vengono caricate – nel momento in cui vengono caricate – una compressione lossless, cioè che non ne altera la qualità.
  2. Applica anche una leggera compressione lossy, che riduce un po’ la qualità, ma non abbastanza perché uno se ne accorga davvero.
  3. Taglia le foto in una serie di formati diversi, studiati per adattarsi nel migliore dei modi possibili al modo in cui cambia il layout quando si usano dispositivi diversi – tipo telefoni o tablet – su questo poi torniamo meglio dopo.
  4. Infine – e questa è la mia preferita – crea una copia dei vari formati e converte le foto in bianco e nero, ma senza sovrascrivere le foto originali. Avrei preferito farlo in CSS, e ci ho anche provato, ma sia la proprietà background-blend-mode sia filter mi davano problemi, e sono stato costretto a percorrere questa strada.

Tutto quello che deve fare Francesca è andarsi a cercare delle foto ad alta qualità più larghe di 4.000 pixel che si possano usare liberamente – se ne trovano, appunto – e caricarle. A tutto il resto pensa WordPress.

Lavorando in questo modo:

  • Abbiamo comunque sempre a disposizione le foto originali ad alta qualità da cui partire per eventuali modifiche future.
  • Abbiamo comunque sempre a disposizione le foto già tagliate ma a colori, metti caso che uno cambia idea.
  • Non serve Photoshop né nessun tipo di programma per modificare le foto.
  • Il lavoro che deve fare Francesca è ridotto al minimo.

La cosa di cui sono più soddisfatto – cose tecniche a parte, di cui sono comunque molto soddisfatto – è che sono riuscito sia a rendere facili le cose per Francesca – deve solo scegliere le foto e caricarle – sia a garantirle contenuti il più possibile future proof: chiunque deciderà di mettere le mani sul sito in futuro non dovrà rifare tutto il lavoro da capo, ma avrà a disposizione foto grandi, ad alta qualità e a colori da cui partire.

In giro ci sono schermi di ogni tipo

Ci sono telefoni più o meno grandi, con schermi più o meno definiti, ci sono tablet di varie taglie, computer portatili, schermi per computer desktop, e volendo fare i pignoli ci sono anche le tv che si connettono a internet e hanno un browser – ma per fortuna per ora secondo Google Analytics non le usa nessuno, e mi sono preso il lusso di ignorarle.

E poi ci sono gli schermi a doppia densità – come i Retina di Apple – che vuol dire che è come se ogni pixel valesse per due, che vuol dire che in uno spazio largo 400 pixel in realtà di pixel ce ne stanno 800, e questo vuol dire che se tu vuoi che la tua immagine si veda davvero bene ne devi caricare una da 800 pixel, anche se poi lo spazio in realtà è largo 400 pixel – e probabilmente tra un po’ arriveranno quelli a tripla densità, e nel frattempo ci sono anche gli schermi 4k, e tra non molto probabilmente i 5k.

Insomma, è un casino.

Dare la stessa foto a tutti questi dispositivi non ha senso: perché in giro non c’è uno schermo uguale a un altro, e né le dimensioni né le caratteristiche dello schermo di un telefono sono quelle di un monitor da 27″, e perché se è lecito aspettarsi che un monitor da 27″ abbia a disposizione una connessione relativamente veloce per caricare le foto che deve caricare, è altrettanto lecito aspettarsi che un telefono abbia a disposizione una connessione 3G relativamente poco veloce, e quindi che preferirebbe non dover caricare foto inutilmente grosse e pesanti – anche perché poi non saprebbe bene cosa farsene.

Per provare ad affrontare questo problema ho fatto quattro cose:

  1. Ho detto a WordPress di tagliare le foto secondo una serie di misure che ho stabilito seguendo il modo in cui cambia il layout quando si usano dispositivi diversi – tecnicamente si chiamano breakpoint.
  2. Per tenere buoni gli schermi ad alta densità ho detto a WordPress di tagliare le foto anche in modo che fossero di misura doppia: ad esempio 832×800 e 1664×1600, in modo da avere a disposizione le foto da usare per gli schermi a doppia densità.
  3. Ho usato Picturefill per assicurarmi il supporto del nuovo elemento html <picture> – che è utilissimo, ma che ora come ora nessun browser supporta nativamente – e l’ho usato per fare la cosa giusta, cioè distribuire il formato immagine giusto al dispositivo giusto, a seconda delle sue dimensioni e della densità del suo schermo.
  4. Le immagini con i tag in evidenza dei singoli post non sono vere immagini, ma immagini di sfondo: lì il Picturefill non funziona, e ho dovuto per forza usare un po’ di CSS in linea, anche se un po’ di questa cosa mi vergogno.

Non è ancora una soluzione perfetta, ma è buona abbastanza da applicarla, e mi ha dato una grossa mano a migliorare la velocità di caricamento delle pagine, specialmente sui dispositivi mobili, che ora usano immagini che sono allo stesso tempo ben definite e leggere, perché sono tagliate in dimensioni fatte apposta per loro.

Fare un sito veloce

Fare un sito veloce è davvero importante: sia perché avere un sito lento è un pessimo modo di presentarsi, sia perché Google considera la velocità di caricamento delle pagine tra i fattori che influenzano il ranking del sito, sia perché avere un sito veloce è fondamentale per chi usa un dispositivo mobile per navigare – e magari ha poco tempo e una connessione non particolarmente veloce a disposizione.

Il mio obiettivo iniziale era portare il sito di Francesca a ottenere un punteggio di circa 90/100 su PageSpeed, e devo dire che sono abbastanza soddisfatto. La pagina del singolo post – quella che verrà verosimilmente vista di più – ha una valutazione di 94/100 su desktop e di 87/100 su mobile – e restano ancora alcuni interventi da fare per migliorare ulteriormente il rendimento – ma soprattutto inizia a mostrare contenuti dopo circa 600 millisecondi e completa il caricamento in circa 1.5 secondi: che va abbastanza bene, secondo me.

Per riuscire a raggiungere questi risultati ho fatto alcune cose.

  • Ho compresso le immagini e fatto in modo di servire quelle giuste a seconda del dispositivo, come dicevo sopra.
  • Ho iniziato a usare Webfaction (full disclosure: è un link affiliato) per ospitare i siti dei miei clienti che comprano da me anche l’hosting. Ho scelto Webfaction dopo che me l’ha consigliato Nestore una sera a cena: è economico – si parte da 9$ al mese e si sale aumentando memoria, spazio e larghezza di banda – e decisamente veloce. Non ho fatto test approfonditi, ma il tempo di caricamento della singola pagina è migliorato di circa mezzo secondo – che non è poco – e lo stesso vale per il backend. Oltre a questo hanno un’assistenza perfetta e rapidissima e una documentazione incredibilmente ben fatta e dettagliata. L’unico limite di Webfaction – se vogliamo considerarlo un limite – è che è un hosting studiato per essere usato da sviluppatori, e si vede: il pannello di controllo non è particolarmente intuitivo, il design molto spartano e molti concetti avanzati vengono dati per scontati.
  • Il tema di WordPress usa un solo file CSS – compresso con Grunt. Ho eliminato tutte le dipendenza esterne – come ad esempio Font Awesome, lo usavo per le icone e ora uso immagini SVG – e incorporato tutto quello di cui non potevo fare a meno.
  • Il tema di WordPress usa un solo file Javascript – anche lui compresso con Grunt. Gli unici Javascript inseriti direttamente dentro l’HTML sono quello di Google Analytics e quello di Typekit, entrambi caricati in modo asincrono – così come il file esterno – in modo da non intralciare il caricamento dei contenuti.
  • Ho migliorato il caching del browser, partendo da questo modello qui.

Un lavoro un po’ più complesso

Io non è tanto che faccio questo lavoro – ho iniziato seriamente nemmeno due anni fa – e nonostante tutto la mia sensazione è che negli ultimi mesi ci sia stata un’accelerazione, e che fare questo lavoro qui per bene sia diventato un po’ più complesso.

La mia sensazione, per essere più preciso, è che se mettersi su da soli un sito con WordPress fino a un po’ di tempo fa magari non dava sempre risultati eccelsi ma più o meno alla fine poteva andare, ora invece a far da soli è difficile ottenere risultati anche minimi – e la gestione delle immagini e le performance sono solo due degli esempi possibili. Siamo in mezzo a una fase di transizione, secondo me, e mancano le soluzioni semplici e le ricette pronte che c’erano e andavano bene fino a poco tempo fa: magari tra qualche mese o qualche anno ne avremo di nuove – di buone pratiche, di prassi rodate, di modi di lavorare efficaci e consolidati che possono usare tutti – ma io ora non ne vedo.

Ad esempio, lavorando al sito di Francesca ho capito una volta per tutte che in questo momento per fare bene il mio mestiere non posso preoccuparmi solo di come funziona il sito per chi lo usa e di che aspetto ha – frontend, si chiama – ma devo essere in grado di tenere sotto controllo un po’ tutto: quello che succede sul server, quello che fa e che non fa WordPress, quello che fa e che non fa il tema di WordPress che sto scrivendo, quello che succede sui dispositivi di chi apre il sito, quanto il sito è veloce, quali sono le cose che possono andare storte, e come, e come risolverle, e quanto gli strumenti che sto usando mi consentono di tenere tutto questo sotto controllo senza impazzire.

Come fa uno che fa da sé e non è un Web Designer a non tenere conto di tutte queste cose e ottenere comunque un buon risultato? Non fa, secondo me.

E anche chi invece fa siti di mestiere, ci sono cose che magari fino a un po’ di tempo fa uno poteva anche evitare di fare, volendo, e che invece secondo me ora uno deve fare per forza:

  • usare un preprocessore per il CSS – io uso SASS – perché usare un preprocessore rende il lavoro più rapido e meglio organizzato, il modo di lavorare più efficiente, il sito più facile da mantenere, e ci consente di risparmiare tempo utile da dedicare ad altro;
  • dedicare molto tempo e attenzione a come si gestiscono le immagini – ne ho scritto nei dettagli qui sopra – e sono convinto che sia compito di ogni buon Web Designer avere cura dei suoi clienti, preoccuparsi per loro e cercare di creare per loro un ambiente di lavoro che gli consenta di gestire le immagini nel modo giusto senza impazzire. Così come secondo me è importante che chi usa un sito senza essere un Web Designer acquisti un po’ di consapevolezza di queste cose, perché ignorarle e basta non si può, e a proposito di schermi ad alta densità non serve cercare lontano: ci sono un sacco di iPhone 4 in giro;
  • dedicare molto tempo e attenzione alla velocità del sito perché per i motivi che ho detto qui sopra adesso anche mezzo secondo fa la differenza, e anche perché lentamente si crea un nuovo standard di velocità, qualcosa che le persone si aspettano, e se non si riesce a rientrare in questo standard allora non si fa bene il proprio lavoro e non si è più professionali, e si perdono clienti;
  • automatizzare tutte le operazioni automatizzabili usando un task manager come Grunt, perché l’alternativa è fare tutto a mano e perdere tempo utile che si potrebbe dedicare ad altro, e farsi intimidire dal fatto che sembra una cosa difficile non ha senso: io ho letto questo tutorial e in mezzo pomeriggio avevo iniziato.

Io ho sempre pensato che la tecnologia e gli strumenti fossero un mezzo e non un fine, e continuo a pensarlo, secondo me è davvero così. Quello di cui ultimamente sono meno sicuro è che in questo periodo sia ancora possibile far tutto da soli – che sia davvero possibile ignorare la tecnologia e gli strumenti, e ottenere comunque buoni risultati.

Ti va di iscriverti alla mia newsletter?

Più o meno una volta al mese scrivo una lettera ai miei amici, dove parlo di fatti miei, delle cose che faccio e delle cose che penso. Se vuoi scrivo anche a te, e diventiamo amici: basta che scrivi il tuo indirizzo email qui sotto, e clicchi sul pulsante.

Se ti iscrivi accetti le cose sulla privacy.