Ho fatto una cosa nuova, si chiama Guido

20 novembre 2014
Argomenti:

L’insegna del macellaio

L’altro giorno ho messo online il nuovo sito di Villa Home Collection, un’azienda che fa mobili e complementi d’arredo secondo me molto belli. Questa qui è la – ormai solita – lunghissima e dettagliatissima trattazione del perché e del percome, e di cosa ho imparato – con una polemica iniziale che questa volta ho deciso di non evitare.

La polemica che questa volta ho deciso di non evitare.

C’è questa frase di Bruno Munari che a me piace tanto:

È necessario oggi, in una civiltà che sta diventando di massa, che l’artista scenda del suo piedistallo e si degni di progettare l’insegna del macellaio (se la sa fare).

Da quando l’ho letta ci penso ogni volta che passo davanti a un negozio e ha un’insegna brutta – e capita spesso che un negozio abbia un’insegna brutta, almeno dalle mie parti. Da quando faccio siti internet ci penso anche ogni volta che capito sul sito di un negozio, di un’azienda, di un professionista o di un’organizzazione, ed è un sito brutto, sciatto e difficile da usare – e mi capita spesso, soprattutto ultimamente che io e Enrica stiamo cercando mobili per arredare casa.

Ovviamente in questi casi la colpa non è di chi ha commissionato il sito, ma di chi l’ha fatto – don’t blame the victim, come si dice.

Perché se uno va da un web designer e gli chiede di fargli un sito riceve in cambio un sito brutto, sciatto, difficile da usare e che in sostanza non serve a niente?

Perché se uno poi chiede conto del cattivo lavoro a chi l’ha fatto gli viene risposto: «il cliente lo voleva così»?

Perché se uno va a comprare un’auto dicendo che la vuole senza freni loro non gliela vendono, un’auto senza freni, e se invece uno va a comprare un sito dicendo che lo vuole in flash (!), o senza indirizzo, numero di telefono e orari di apertura, o tutto scritto grigio chiaro su fondo bianco, o con le foto dei prodotti tutte brutte e sgranate un sito così gli viene venduto senza battere ciglio?

Perché noi web designer decidiamo di sottrarci al nostro ruolo di progettisti e di professionisti e ci accontentiamo di essere puri esecutori della volontà altrui – anche se quella volontà è sbagliata, poco informata e basata su presupposti altrettanto sbagliati e poco informati?

Perché non abbiamo mai imparato a fare l’insegna del macellaio, e anzi se il macellaio viene a chiederci di fargli l’insegna o ce ne andiamo via un po’ schifati – perché siamo creativi, che schifo i macellai – o abbozziamo sbuffando e facciamo un lavoro fatto male, giusto per guadagnare due soldi?

Io non lo so perché, ma quando è stato il mio turno l’insegna del macellaio ho provato a farla facendo il meglio che so fare.

La storia

Luca Villa mi ha scritto una mattina di fine maggio o di inizio giugno – ora non mi ricordo bene – dopo aver ricevuto i miei contatti da un’amica: aveva bisogno di rifare il sito della sua azienda, che fa mobili e complementi d’arredo in legno, e che lavora in provincia di Milano, quasi in Brianza. Il sito che avevano non andava più bene, perché era in flash e quindi era invisibile da telefoni e tablet.

Visto che il sito era in flash i prodotti non avevano una pagina per uno, e quindi non avevano una URL per uno, e quindi per loro era sostanzialmente impossibile fare marketing o comunicazione o pubblicità online: Luca avrebbe voluto fare delle cose con AdWords, ad esempio, ma non poteva perché tutti i prodotti del sito avevano la stessa URL, e – molto banalmente – era impossibile avere delle landing page dedicate.

Visto che il sito era in flash, tutti i testi in realtà erano immagini – o una cosa del genere – e quindi sostanzialmente impossibili da indicizzare dai motori di ricerca, e anche le immagini non è che fossero davvero immagini, ma qualcos’altro – devo ammetterlo, io non ho mai davvero capito bene di cosa sono fatti i siti in flash.

Oltre a questo, ovviamente per loro non c’era modo di gestire il sito in autonomia. Ogni volta che c’era da aggiungere un prodotto o una notizia l’unico modo per farlo era contattare chi aveva fatto il sito, e chiedere che venisse modificato.

Il lavoro sui contenuti

Ho iniziato a lavorare sul sito all’inizio di luglio – nel frattempo mi ero sposato, ero partito per il viaggio di nozze ed ero inspiegabilmente riuscito a sopravvivere a due voli intercontinentali – e la prima cosa che ho fatto è stata mettermi a studiare i contenuti.

Ho deciso di usare WordPress come CMS, sia perché è quello che conosco meglio, sia perché secondo me un sito-di-prodotto-senza-ecommerce rientra tra le cose che con WordPress si possono fare bene senza dover perdere un sacco di tempo a scrivere da zero un sacco di funzionalità. Allora ho messo su un’installazione di test e ho iniziato a strutturare i contenuti basandomi su quelli che avevo a disposizione: il sito esistente e i cataloghi dei prodotti.

Volevo che i contenuti avessero la struttura più dettagliata e più granulare possibile, e quindi ho iniziato a farmi un sacco di domande: che cosa sono questi prodotti? Come sono fatti? Se dovessi descriverli nel dettaglio che cosa direi? Che cosa sta già comunicando l’azienda sui prodotti? E come?

La decisione migliore che ho preso in questa fase è stata quella di lavorare ai contenuti concentrandomi solo sui contenuti, sulle loro caratteristiche e sulla loro struttura, e rimandando ogni ragionamento sull’identità visiva e sul layout del sito. Secondo me è stata un’ottima idea, perché lavorando in questo modo sono riuscito a costruire la struttura dei contenuti in modo completamente agnostico: i contenuti sono stati liberi di esprimere la loro struttura nel modo più spontaneo e naturale possibile, e il layout che ho fatto dopo ne è stato una semplice conseguenza.

Mi sono reso conto praticamente subito che c’era bisogno di creare un tipo di contenuto personalizzato e alcune tassonomie personalizzate: un prodotto non è un post, e raggruppare i prodotti per categorie e tag sarebbe stata solo una approssimazione per difetto – e una enorme dimostrazione di pigrizia. Non avevo mai costruito contenuti e tassonomie personalizzate prima, ma ho scoperto che farlo non è particolarmente difficile: ho usato la documentazione ufficiale di WordPress e due ottimi post trovati su Smashing Magazine come guida, e in qualche giorno questa parte del lavoro era fatta.

Per il tipo di contenuto la scelta è stata scontata: Prodotto, perché di prodotti si parla. Per le tassonomie, dopo un po’ di riflessioni ci siamo decisi per Collezioni e Designer. Raggruppare i prodotti per dimensioni era impossibile – troppo irregolari; idem per i colori: banalmente non avevamo né tutte le foto necessarie per associare un prodotto alla sua variante di colore, né le possibilità di fotografare tutto di nuovo, e abbiamo deciso di lasciar perdere.

Decidere come descrivere ogni prodotto è stato un po’ più complesso: di sicuro un’immagine e una descrizione, ma oltre a questo? Infilare tutte le informazioni disponibili dentro la descrizione non mi sembrava una buona idea, così ho deciso di isolare come elementi indipendenti – oltre alla collezione e al designer – anche eventuali altre immagini del prodotto, le dimensioni disponibili e i colori.

Per creare questi tre campi personalizzati ho usato Advanced Custom Fields: non sono un fan dei plugin, ma questo è davvero ben fatto, ha un buona documentazione e un’ottimo supporto. È stato particolarmente utile perché da un lato ha consentito a me di risparmiare un sacco di tempo, dall’altro mi ha aiutato a mettere a disposizione dei miei clienti un’interfaccia semplice da usare per assegnare i colori e le dimensioni, e per associare a ogni prodotto oltre all’immagine in evidenza tutte le altre eventuali immagini alternative.

Il lavoro sulle immagini

Lavorare con le immagini è stato – come mi aspettavo – piuttosto complesso, specialmente per un sito di mobili e complementi d’arredo, in cui le immagini sono assolutamente fondamentali: devono essere belle, molte e di qualità, e allo stesso tempo non devono penalizzare i tempi di caricamento delle pagine – specialmente su dispositivi mobili.

Prima di tutto abbiamo dovuto risolvere un problema di qualità delle immagini: alcune di quelle disponibili non andavano bene – troppo piccole, troppo poco definite – e c’è stato bisogno di chiedere al fotografo che le aveva scattate di andare a cercare nei suoi archivi le versioni ad alta risoluzione: in alcuni casi abbiamo dovuto rinunciare, ma un po’ di giri di WeTransfer dopo la situazione era decisamente migliorata. Non tutti i prodotti hanno immagini alternative oltre all’immagine principale, e non sempre ci sono foto di tutte le varianti di colore e di materiale, ma tutte le foto che abbiamo caricato sono di buona qualità, e in generale c’è già una base solida su cui costruire.

Poi ho dovuto capire come fare in modo che il sito avesse comunque buone prestazioni anche con tutte quelle immagini.

Per l’immagine in evidenza di ogni prodotto prima ho creato una serie di dimensioni personalizzate per le immagini – una volta definite ci pensa WordPress a crearle ogni volta che se ne carica una – poi ho usato Picturefill – e in particolare l’attributo srcset – per delegare al browser la scelta dell’immagine migliore a seconda delle dimensioni dello schermo.

Tutte le altre immagini sono in realtà immagini di sfondo, e ho usato Lazy Load per fare in modo che venissero caricate soltanto dopo tutti gli altri contenuti, e solo quando stanno per diventare visibili. Banalmente, se un’immagine è sotto il fold, non viene caricata fino a quando non sta per superarlo. In questo modo – grazie anche a un po’ di caching – i tempi di caricamento delle pagine sono davvero bassi. La homepage – che ha 69 immagini di prodotto – mostra i primi contenuti dopo circa 400 millisecondi e finisce di caricare dopo circa un secondo e venti. Una pagina di prodotto – che a seconda delle condizioni può avere un’immagine principale un po’ pesante – mostra i primi contenuti dopo circa 350 millisecondi e finisce di caricare dopo circa due.

L’obiettivo in questo caso non è tanto finire di caricare il prima possibile – le immagini sono pur sempre immagini, e per quanto compresse sono comunque una risorsa esterna che deve essere trovata, letta e caricata – ma dare a chi naviga la sensazione che il sito risponda in tempi brevissimi. Specialmente nel caso di un sito di prodotto – o di un ecommerce – questa è una cosa fondamentale: con un tempo medio su pagina di tre secondi e l’attenzione che cade dopo un solo secondo non c’è letteralmente tempo da perdere.

Un’altra cosa su cui mi sono concentrato a lungo è stata l’interazione che consente di vedere le immagini alternative del prodotto. Su schermi abbastanza larghi – diciamo dagli 11″ in su – non mi è sembrato il caso di reinventare la ruota, e ho fatto esattamente quello che fanno tutti: c’è una griglia di immagini alternative, cliccando l’immagine scelta sostituisce quella in evidenza. Facile e pulito – ma per forza in jQuery, quindi ho tenuto comunque un fallback: se JavaScript è disabilitato, cliccando l’immagine si apre nelle sue dimensioni originali.

Su schermi più piccoli invece replicare la stessa esperienza non aveva senso. Prima di tutto perché le immagini alternative finiscono necessariamente sotto – o sopra – quella in evidenza, e non è detto che chi fa tap poi noti anche l’esito dell’interazione, che invece su schermi più grandi è evidente. Poi perché l’esecuzione del JavaScript necessario allo scambio dell’immagine pesa non poco sulle performance, e i test fatti su dispositivi un po’ datati, con poca RAM e connettività debole hanno dato pessimi risultati.

Quello che ho fatto a questo punto è stato decidere di accantonare completamente il paradigma desktop e pensare a quello che volevo ottenere. Volevo che fosse chiaro che c’erano altre immagini oltre a quella principale – quindi semplicemente mostrarle tutte una sotto l’altra non era una scelta percorribile, il rischio di scivolarci sopra con lo sguardo e passare oltre era troppo alto. Volevo anche che il passaggio da anteprima a immagine completa fosse il più rapido possibile – quindi, appunto, ho escluso scambi e sostituzioni, e anche eventuali animazioni durante il passaggio.

Alla fine ho deciso che la cosa più semplice da fare era mostrare sotto l’immagine principale una griglia di immagini larghe la metà dello spazio disponibile, che si allargano se si fa tap: tre righe di jQuery applicano una nuova classe che fa estendere l’immagine su tutta la larghezza. Se JavaScript non va, le immagini si vedono comunque. Mi sembra una soluzione semplice, minima e senza fronzoli – perfettamente in linea con lo spirito e la cultura di Villa.

Personalizzare l’interfaccia

Luca e Irene – sua moglie, lavorano insieme in azienda – non avevano mai gestito il loro sito internet prima, e per questo motivo l’interfaccia doveva essere il più possibile essenziale e semplice da capire e da usare.

La prima cosa che ho fatto è stata creare da subito un account per accedere al backend con ruolo di Editore, li ho invitati a usarlo per aiutarmi a rivedere i contenuti associati ai vari prodotti e ho chiesto loro tutto il feedback possibile sull’usabilità – e eventuali segnalazioni di problemi, e suggerimenti per migliorarla.

La seconda cosa che ho fatto è stata personalizzare il più possibile l’interfaccia, in modo che non li mettesse in condizione di fare cose sbagliate. Un po’ di lavoro l’ho fatto a mano, personalizzando tutto il microcopy delle schermate, i dati visibili nelle schermate riassuntive, eliminando tutto i comandi inutili dall’editor di testo, ordinando gli elementi della schermata di creazione e modifica prodotto in modo da costruire un flusso di lavoro suggerito e inserendo una dashboard personalizzata per l’accesso rapido alle operazioni più comuni.

Per le cose più invasive invece ho usato un altro plugin, WP Admin UI Customize: che in alcuni punti è un po’ grezzo, ma che consente una personalizzazione totale degli elementi dell’interfaccia.

L’identità visiva

Non c’era nessun graphic designer coinvolto nel progetto, né tantomeno un art director, quindi all’identità visiva del sito ho lavorato io.

L’unico punto fermo era il logo – già usato su tutto il materiale di marketing e commerciale, e quindi da tenere – oltre ovviamente ai contenuti. Parlando con Luca e Irene – mezza giornata da loro da questo punto di vista è stata più utile di qualsiasi ricerca potessi fare – ho capito che la direzione doveva essere una e una sola: essenzialità, semplicità, niente fronzoli, niente che non fosse necessario, nessuna forma slegata da una funzione – ma nemmeno inutile severità. Una semplicità il più possibile raffinata e accogliente, ecco quello di cui c’era bisogno. E tanto bianco.

La prima scelta è stata quella di mettere i contenuti al centro di tutto, di farli risaltare il più possibile, senza orpelli visivi a mettersi di mezzo. C’era il rischio di farli sembrare un po’ nudi, ma secondo me questo rischio è stato evitato grazie alle strutture dei layout – che hanno ritmi verticali molti serrati – alla qualità delle immagini – forse averne di più ambientate avrebbe dato un’ulteriore mano – e al font che ho scelto: l’Omnes Pro, di cui uso i pesi Extra Light, Light e Medium in una scala di grigi che non prevede neri assoluti.

L’Omnes Pro è stata la mia prima scelta, ed è stata anche l’ultima: in mezzo ne ho provati altri tre o quattro, cercando per qualche motivo di usare dei font meno arrotondati e di dare ai prodotti Villa una severità visiva di cui invece sono completamente privi. Al contrario l’Omnes Pro secondo me è perfetto: è sobrio e essenziale, ma la sua lieve stondatura lo sdrammatizza e lo rende secondo me anche un po’ giocoso: tutte caratteristiche che i prodotti Villa secondo me hanno, e che volevo assolutamente comunicare.

Come ho fatto a fare il sito in due lingue

Se uno lavora con WordPress, i siti in due – o più – lingue sono un casino. Ci sono dei plugin, è vero – tra cui WPML, che è a pagamento e secondo molti il migliore – e ne ho provati alcuni: ma appesantivano il database senza rendere necessariamente più facile il lavoro. I contenuti vanno comunque tradotti e inseriti due volte, e il paradigma che sottende la gestione non è affatto intuitivo, ovvio o semplice da capire.

Ad esempio, uno potrebbe aspettarsi di avere un contenuto solo con varie traduzioni – ma è una cosa che i plugin migliori preferiscono non fare, creando contenuti indipendenti per lingue diverse; lo stesso vale per categorie, tag e tassonomie. Oltre a questo, la gestione delle URL è quantomeno complessa e le conseguenze sull’indicizzazione da parte dei motori di ricerca ambigue.

Allora ho fatto un po’ di ricerca, e ho letto la documentazione di Google sulla gestione dei siti multilingua. Leggendola mi si sono chiarite le idee: era abbastanza evidente che dal loro punto di vista a ogni lingua doveva sostanzialmente corrispondere un sito indipendente – almeno dal punto di vista esterno. Google consiglia di tenere le lingue su URL diverse e chiare, sconsiglia il redirect automatico in base alla lingua del browser, e usa come unico strumento per stabilire la lingua del sito la lingua in cui sono scritti i contenuti.

Lavorare per assecondare i desideri di Google non è quello che faccio, ma incasinare l’indicizzazione di un sito che veniva rifatto perché quello vecchio non veniva indicizzato non mi sembrava una buona idea. Allora ho deciso di procedere nella direzione una lingua = un sito, e ho cercato di capire se potevo comunque semplificare il lavoro per i miei clienti.

Facendo un po’ di ricerca ho visto che Google consiglia di tentare la strada dell’installazione multisito: si crea un’installazione centrale di WordPress che ha un network di siti figli, in cui a una lingua corrisponde un sito – ed esistono anche plugin che tengono sincronizzati i contenuti. Ho provato, ma anche in questo caso non ero soddisfatto: di nuovo c’era bisogno di caricare i contenuti due volte, di nuovo tutto era sostanzialmente duplicato, e a fronte di un miglioramento dell’indicizzazione NON POTEVO CONDIVIDERE LA MEDIA LIBRARY. Quindi le immagini andavano caricate due volte – una vera assurdità, che decisamente non valeva lo sforzo di mantenere un’installazione multisito.

Allora mi sono stufato, e ho fatto la cosa più ovvia: due installazioni indipendenti, due siti indipendenti, la versione inglese su /en – col tema ovviamente tradotto – e una sacco di vantaggi: ogni sito ha il suo spazio web e il suo database dedicati, ad esempio, quindi i due siti sono più veloci. Poi: Google è più contento, l’indicizzazione è a posto, l’eventuale lavoro SEO pure, e la gestione è sostanzialmente identica a quella che si avrebbe usando un plugin o un installazione multisito. Per rendere le cose più semplici ai miei clienti ho creato un link che dal backend di un sito porta al backend dell’altro, e viceversa. Oltre a questo, per chi naviga sul sito ogni prodotto è linkato alla versione corrispondente di ogni lingua, e c’è nel menu di navigazione un link alla homepage del sito dell’altra lingua.

Perché non ci sono i prezzi

Alla fine ci sono finito anche io: ho fatto un sito di prodotto di un’azienda italiana senza i prezzi dei prodotti. Non è stata una scelta semplice, è stata una scelta che abbiamo discusso e che ha le sue ragioni:

  • Villa non vende ai clienti finali, ma ai negozi. So che la differenza tra queste due categorie è sempre più sfumata, e so che è una differenza che molti di noi non percepiscono più, ma per ora per loro la regola vale, e insieme a questa regola ne vale un’altra: ogni negozio può fare il suo prezzo, quindi mostrare anche solo dei prezzi indicativi sarebbe stato fuorviante. Se io dico che un prodotto costa 100 e in negozio lo trovo a 150 o a 80, chi è che mi sta fregando?
  • Villa vende in tutto il mondo: i prezzi variano molto a seconda della distanza, degli eventuali dazi, delle tasse e della percezione: un prodotto di design italiano a Singapore ha un prezzo decisamente diverso da quello che ha in Italia. Di nuovo: se mostro prezzi indicativi e poi in negozio ne trovo altri, chi è che mi sta fregando?
  • Se metto i prezzi e poi non vendo online, che senso ha? Soprattutto perché l’elenco dei clienti è così variabile che non è nemmeno possibile dire: vai a comprare lì. E poi, di nuovo: anche se ti mando a comprare lì, a che prezzo lo compri? Chi ti sta fregando?
  • Una soluzione potrebbe essere vendere online e stabilire prezzi fissi: ma significa mettere mano a un modello di business sano e funzionante. Chi se la sente di farlo a cuor leggero?

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.