Ho rifatto la home del Pastificio di Chiavenna. Non per rubartelo: per farti vedere come puoi farlo tu.

Che cosa ho cambiato, e perché

1. Il fiume, che scorre davvero

   Il titolo più bello del sito, «Dalla Forza del Mera, l’Eccellenza del Grano Saraceno», oggi sta in fondo alla pagina, sopra la foto di Chiavenna sul Mera. L’ho portato subito sotto il nome, e il fiume scorre: una mappa dell’acqua, disegnata a mano sulla foto, dice dove sono il fiume e la cascatella, e si muovono solo quei pixel; il paese, il ponte e le rocce restano fermi. Nessun video, nessun pixel inventato: si spostano quelli che ci sono. È il principio con cui lavoro, «feel, don’t tell»: chi arriva sente il luogo prima di leggere che è un luogo.

2. La prima schermata composta come il marchio

   In alto la foto, dove nel marchio MORO c’è il sole con la spiga, a tutta altezza e coi colori riportati più vicino al vero (la foto di oggi ha la saturazione spinta di una cartolina); poi il frontone rosso, lo stesso cuneo che sta sopra la scritta (preso dai tracciati del loro file, non ridisegnato); sotto il tetto, il nome, grande come la scritta del marchio. Nient’altro: il motto, le due righe e i tasti stanno alla schermata dopo. Il giallo del sole è l’unico colore dei tasti, col contorno nero come nel marchio, e in ogni schermata ce n’è uno solo: «Acquista online».

3. La storia, disegnata dalla loro penna

   Nella pagina Azienda ci sono due disegni a penna, i caseggiati Moro e il pastificio di oggi. Qui si disegnano mentre passano le date (il 1868, gli anni ’60, il 2016 dell’IGP, l’impresa storica), tratto per tratto: ho calcolato dal disegno stesso quando compare ogni tratto d’inchiostro, e la pagina li fa nascere uno dopo l’altro, come sotto la penna. Il primo per il mulino, il secondo dagli anni ’60 in poi. Sotto, le sale del mulino da scorrere col dito.

4. Il chicco che diventa pizzocchero, e si compra

   La sezione che vende. Le loro foto di studio sono tutte su bianco, quindi su un palco bianco, coi bordi sciolti e i soggetti portati alla stessa misura, possono entrare una sull’altra come una tendina: scorrendo, i chicchi di grano saraceno sulla verza diventano la farina integrale nella sessola, poi i pizzoccheri, il piatto, e alla fine la scatola gialla, col tasto per comprarla. Ogni frase viene dal sito di oggi (la home, la pagina Prodotti, le schede), tranne quella del piatto, che descrive la loro foto; le indicazioni come «Fonte di fibre» restano come le scrive il produttore, accanto al prodotto a cui si riferiscono.

5. Stasera si cucina

   Le cinque ricette della home, con chi le ha firmate e il formato con cui si cucinano, che porta alla sua scheda. Si scorrono col pollice: oggi sono un carosello che va da solo.

6. Google che sa che cosa vende

   Il titolo dice quello che la gente cerca (pastificio, Chiavenna, Pizzoccheri della Valtellina IGP, grano saraceno), la descrizione non mostra più le barre rovesciate, i dati strutturati dicono chi è il pastificio, dal 1868, dove sta e quali sono le cinque famiglie; ogni immagine ha la sua descrizione, c’è un solo titolo principale e gli altri sono in ordine, e il link condiviso mostra il Mera.

7. La velocità

   Le foto nelle misure che servono a ogni schermo, i due caratteri del sito (Libre Baskerville e Open Sans, quelli che hai scelto tu) serviti dal sito stesso invece che da Google Fonts, nessuna libreria presa da altri siti. L’unica cosa che la pagina manda fuori è la misura anonima delle visite che uso io, senza cookie, dopo che la pagina è pronta. Il confronto non è alla pari su tutto: l’anteprima non ha l’inglese, il modulo dei contatti, le schede prodotto né Analytics. Se servono si rimettono, e il conto si rifà con loro.

Tre cose, intanto, si sistemano già domani sul sito di oggi, senza aspettare il resto: il titolo della home è «MORO Pasta (IT)», e non dice né pastificio, né pizzoccheri, né Chiavenna; la descrizione per Google mostra le barre rovesciate («nell\'innovazione»); e il tasto delle ricette dice «Come si prerara».