TPI – Design system e mobile first

Carlo Frinolli
Introduzione
di Carlo Frinolli

Il processo di Co-Design

Carlo Frinolli
di Genni Piccirilli

TPI – Senza giri di parole

Carlo Frinolli
di Claudia De Medio

Bedrock, la nostra salsa per WordPress

Carlo Frinolli
di Carlo Frinolli

Aiutaci a migliorare TPI

Carlo Frinolli
di Natalia Molchanova
di lettura
Introduzione
TPI – Design system e mobile first

Il lavoro con TPI è stato un’esperienza importante e gratificante perché l’unione dei due team ha fatto sì che siamo stati in grado di mettere a punto un progetto che rispecchi le esigenze redazionali e i bisogni degli utenti del giornale stesso.

Scoprire le esigenze della redazione e dei lettori del quotidiano partendo dai pain point

Siamo partiti all’inizio del 2016 occupandoci dell’assistenza tecnica del vecchio sito. Già allora la piattaforma non soddisfaceva più – né tecnicamente e né dal lato dell’interfaccia utente – i bisogni della redazione e degli utenti della testata online. La frequenza di pubblicazione e la natura degli articoli stessi era cambiata (gli utenti si erano già spostati a leggere più dai dispositivi mobili che sul desktop); al giornale serviva un nuovo approccio, uno strumento più adatto agli utenti: la redazione da una parte e i lettori dall’altra.

Ed è stata proprio questa fase di assistenza tecnica sul vecchio sito, durante la quale abbiamo affiancato la redazione, che si è rivelata strategica per il redesign del nuovo progetto web di The Post Internazionale. Abbiamo avuto il tempo per capire le esigenze, i bisogni, le difficoltà e le problematiche ricorrenti nel flusso di lavoro. Dalle modifiche duplicate su due temi diversi alle esigenze nell’ambito gestione dell’advertising abbiamo potuto confrontarci con i bisogni reali degli utenti per decidere di intraprendere un nuovo percorso.

Un quotidiano “Mobile First”

Questa mattina, mentre la redazione preparava i primi post reali eravamo in stretto contatto con alcuni giornalisti. Il primo feedback che abbiamo raccolto è stato illuminante per loro e per il loro futuro.

L’articolo di Londra l’ho scritto dal cellulare, mentre ero ancora a letto.

Al di là della giusta pigrizia mattiniera, questo apre per TPI una fase pienamente mobile first. Da questa versione chiunque dei loro giornalisti potrà pubblicare con l’immediatezza di un tweet direttamente un articolo sulla piattaforma da far apparire sul sito.

TPI è online

Il risultato lo vedete online, una piattaforma potente, modulare e scalabile che si poggia sul Content Management System WordPress personalizzato nella versione che usiamo da tempo, Bedrock, e unito all’interfaccia unificata e pienamente mobile first basata sul nostro tema Glitch. Abbiamo messo a disposizione della redazione uno strumento modulare e flessibile per la composizione delle pagine e degli articoli che ottimizza i tempi di pubblicazione, fondamentali per un giornale online.

Capitolo 1
TPI – Design system e mobile first

Il processo di Co-Design

Siamo una Experience Design Agency, progettiamo strategie, servizi ed eventi multicanale mettendo al centro le persone. Individuare gli attori di un progetto e il contesto in cui agiscono ci permette di realizzare soluzioni aderenti alle loro esigenze.
È così che progettiamo esperienze di qualità.

Alla scoperta dei bisogni delle persone

Permettere alle persone di partecipare al processo di Co-Design vuol dire progettare in base ai reali bisogni degli utenti creando prodotti o servizi digitali efficaci e usabili, incrementando il senso di soddisfazione durante il loro utilizzo.

Nel corso del workshop abbiamo utilizzato le pratiche di co-design come approccio strategico per ascoltare, osservare, discutere e indagare perché è attraverso la partecipazione delle persone al progetto che si arriva a un risultato finale efficace.

Discovery Workshop: Facilitazione della comprensione del Brand

Siamo partiti dalla personificazione del Brand per arrivare all’idea di successo di TPI – un giornale fresco, chiaro, obiettivo, trasparente ed empatico, in cui gli elementi distintivi sono caratterizzati dall’ambizione dei soci e dalla chiarezza e accessibilità dei contenuti che hanno reso TPI un giornale online italiano specializzato nell’attualità internazionale, senza giri di parole.

Per questo abbiamo adottato alcune tecniche di facilitazione nel Discovery Workshop che hanno permesso a tutta la redazione non solo di esprimere desideri sul loro nuovo giornale, ma anche di spiegarci come si vedono e che idea di futuro hanno.

Le esigenze operative della redazione: velocità, semplicità e modularità

Nella seconda fase abbiamo indagato le esigenze operative e quotidiane della redazione per progettare sulle loro necessità il loro strumento di lavoro rinnovato: il backend. Anche in questo caso per noi è stato fondamentale comprendere le esigenze della routine lavorativa della redazione per permettergli di stare sempre sul pezzo della notizia senza privarli della libertà e agilità compositiva grazie alla modularità del layout.

I risultati del Workshop

Dopo aver utilizzato tanti post-it e pennarelli, è iniziata la fase di analisi. Abbiamo intrecciato bisogni e insight con un lavoro di benchmarking e ricerca utente per ipotizzare contesti di utilizzo, progettare flussi di navigazione e definire mood ed interazioni utente.

TPI – Senza giri di parole

Rebranding Web // 2017

Co-Design ~ Experience Design ~ Front-end
Il cliente

Color palette & Tipografia


La tipografia rinnovata di The Post Internazionale unisce lo stile classico del Times con quello moderno del Proxima Nova Alt e rispecchia così a pieno l’indole della redazione.

Il Times, carattere tenace e resistente al tempo,  si è contraddistinto – dal suo debutto nel 1932 – per la sua leggibilità, la sua personalità sofisticata e solida. Al classicheggiante Times si contrappone il Proxima Nova Alt, un carattere semplice e versatile, spesso indicato come Helvetica del web. La sua grande varietà di pesi ci ha permesso di giocare, combinando stili diversi per conferire dinamicità ai testi.

Anche la color palette di TPI si è rinnovata con l’introduzione di una versione più brillante del rosso – che aveva definito il marchio in passato – che rende la veste grafica più vivace. La combinazione di diverse tonalità di grigio completa la gamma di colori e infonde un mood accattivante e moderno, ma nello stesso momento pulito e semplice che non distoglie l’attenzione dai contenuti.

Color palette & Tipografia

Design System


Abbiamo progettato un design system in cui i widget sono gli atomi, i componenti base dell’interfaccia utente. Sono piccoli blocchi che codificano la resa grafica di funzioni ed interazioni. Sono composizioni che distinguono e delineano tipi di contenuti.

Per TPI abbiamo definito diversi widget per conferire continuità visiva alla moltitudine dei contenuti presenti sul sito.

La sfida principale è stata quella di trasmettere l’anima di TPI attraverso un layout dinamico e flessibile. Le griglie modulari sono sempre state qualità peculiare dei quotidiani cartacei per attribuire peso a headline, articoli e contenuti correlati nel rispetto dei vincoli della stampa tipografica.

L’interfaccia utente di TPI ha accolto questa sfida traslando le griglie tipografiche in ambiente digitale conferendo un aspetto omogeneo che all’occorrenza gestisce i contenuti con fluidità dando alla redazione la facilità di ricombinare gli elementi grafici e testuali secondo le necessità editoriali.

Design System & Modularità

Focus


Abbiamo progettato una homepage dinamica per assicurare un servizio editoriale sempre più veloce, tempestivo e di qualità.

In base alle esigenze giornalistiche, la redazione può scegliere tra
3 aperture diverse:

 

  1. Breaking News”, griglia a 12 colonne che sfrutta tutta la larghezza dello schermo per dare risalto ad articoli importanti con enorme impatto comunicativo sull’utente.
  2. Breaking News con correlati”, griglia a 9 + 3 colonne per collegare alla breaking news importanti articoli di approfondimento.
  3. Main News”, griglia a 9 + 3 colonne per mettere in evidenza una news primaria e una secondaria.

La nuova struttura e grafica di TPI dà inoltre maggiore rilievo ai reportage dall’estero, alle interviste e alle opinioni della redazione e dei collaboratori, sparsi per il mondo. Lo sfondo chiaro del sito viene interrotto da questi contenuti tramite colori e foto che ne esaltano il contenuto.

Focus
Responsive Intro

Mobile first


La nuova interfaccia utente è stata studiata per adattarsi meglio alle esigenze dei lettori e agli schermi dei propri dispositivi mobili come tablet e smartphone. La pubblicità, pur essendo importante per garantire il servizio gratuito e di qualità, è stata progettata in modo che non sia troppo invasiva o che interrompa il flusso delle informazioni.

Mobile First
Capitolo 3
TPI – Design system e mobile first

Bedrock, la nostra salsa per WordPress

È un software le cui linee guida di sviluppo sono piuttosto lasche e permette di fare “porcherie” facilmente. Ma poi…

Era metà del 2014.

All’ennesimo progetto aperto con WordPress in cui cercavo un modo furbo per non dover committare tutto il suo core dentro il repository Git e combattevo con la possibilità di deployare in maniera furba i nostri progetti, mi imbatto in questo sito. Giuro, appena visto quasi piango.

Il suo nome richiama alla famiglia Flintstones e la cosa mi garbava. Ma facciamo un passo indietro.

I problemi più comuni prima di Bedrock

Cominciare un nuovo progetto con WordPress vanilla aveva il difetto di dover ripetere molte volte lo stesso tipo di operazioni: ad esempio utilizzando serialmente plugin base comuni a molti progetti – sia benedetto Advanced Custom Field Pro, ma di questo parlerò un’altra volta – ci trovavamo sempre a copia-incollare centinaia di file. Non avevamo trovato (ancora) un modo furbo per gestire le dipendenze sui plugin.

Inoltre avere degli ambienti di sviluppo locale, staging e produzione implicava avere in .gitignore il file wp-config.php (ovvero quello in cui ci sono le configurazioni di connessione al db).
Infine l’aggiornamento di plugin e core avveniva sempre pericolosamente.

Visto che core e plugin risultavano sotto versionamento, la possibilità di incorrere in conflitti e altre gioie di Git era piuttosto alta, oltre ad avere spesso installazioni datate di plugin e WordPress stesso. Dal momento che WP è una delle piattaforme consumer più usate al mondo è anche una delle più prese di mira per tentare di bucarle, gli aggiornamenti sono un fattore cruciale per tutti.

I benefici più grandi per noi(s3)

Innanzitutto possiamo ora essere sicuri di alcune cose.

Abbiamo configurazioni separate per diversi ambienti di sviluppo e questo è ovviamente molto bene. Inoltre abbiamo guadagnato una gestione di variabili d’ambiente (quali ad esempio configurazioni di connessione al database) in un file .env e non dentro lo stesso file di configurazione wp-config.php. Implica che ognuno di noi può avere l’ambiente locale che preferisce – pur secondo certe best practice – ma non impedisce od ostacola gli altri.

Altra apparentemente piccola ma significativa differenza: le cartelle di configurazione di Bedrock non sono esposte al webserver.

La gestione delle dipendenze è gestita da Composer (uno standard de-facto per lo sviluppo PHP come packet manager) e permette anche l’uso di sorgenti private, quindi plugin sviluppati internamente oppure versioni premium ma conservate in un git repository privato. Quindi aggiorni una versione di un plugin, sistemi i file di compose dei progetti, fai girare lo script di update e tutti i siti sono aggiornati.

MAI. PIÙ. SENZA.

Qui di seguito riporto uno screenshot comparativo che i più nerd apprezzeranno.

Facciamolo (capi)strano.

Fin qui però non abbiamo ancora risolto l’annoso problema di portare i siti in staging, pre-produzione, produzione etc. senza addannarsi l’anima. In altre parole non avevamo ancora superato il problema del rapporto conflittuale con FTP. Rapporto particolarmente complicato tutte le volte che le modifiche sono massive o allo stesso modo puntuali.

  • Problema 1. Devo modificare una cosa in produzione, sono tentato di modificare il file direttamente lì e mi dimentico di riportare la modifica su Git. Pratica sporca, usata spesso, ma superabile. Avevamo trovato ad esempio git-ftp che risolve in parte il problema. Ma non era sufficiente.
  • Problema 2. Devo spostare velocemente il tutto da un ambiente di staging a quello di produzione con poco più di un comando, lo devo fare iterativamente perché devo testare le modifiche prima di rompere tutto.

Welcome (back) to Capistrano

Qualche anno prima, quando eravamo pazzi e usavamo solo Drupal, ci eravamo imbattuti nel lavoro degli allora Twinbit che avevano reso Drupal, assieme a Features e un po’ di altri moduli, compatibile con capistrano. Una libreria ruby on rails che permette di eseguire comandi remoti da locale come ad esempio deployare un sito ovvero di rollbackare  la versione quando questa non funziona, senza dover intervenire manualmente su ogni file modificato.

Esiste quindi un concetto di release che viene sparata su un server e che semplicemente viene riprodotta identica.

La stessa cosa, fortunatamente, usiamo da anni anche nel caso di Bedrock che, con l’estensione bedrock-capistrano, ci permette di portare in produzione una nuova release al costo del comando

cap production deploy

che certamente una svolta.

Perché?

Perché tutta la parte di core, di plugin pubblici e proprietari e di temi, viene buildata a partire dai sorgenti. Quindi per ogni release si riscarica il core pulito, i plugin puliti, il tema pushato sul repository e viene costruita una copia carbone del sito soltanto della ultima versione disponibile di tutto questo ben di Dio.

Immaginate lo scenario: cliente chiama perché hanno bucato sito. Può succedere, succederà.

Una volta fatta una verifica di integrità delle parti custom e sanitizzate le parti relative agli upload, basta lanciare una build per ripulire tutto e ricostruirlo.

Tempo stimato 30-80″ circa.

Gli upload, citavo. Ecco questi, assieme ai file di connessione al database e ad altri file che devono essere persistenti rispetto alle build, sono linkati simbolicamente (in nerdese symlinkati) così da evitare di perdersi storico.

Confesso, la prima versione di nois3.it era su WordPress vanilla, il passaggio a Bedrock l’ho fatto direttamente sotto al culo di WordPress e non si è accorto di nulla, fatto solo lo spostamento di tutti gli allegati ai post.

Ma ammettiamo per un secondo che abbiate sbagliato a deployare. Panico, vero? No.

cap production deploy:rollback

Il tempo di un deploy ed è tutto su, se prima funzionava. Caruccio.

I benefici più grandi per i nostri clienti.

La certezza di poter replicare le modifiche su produzione senza intralciare il lavoro. La praticamente totale assenza di down perché “stiamo mettendo online modifiche”. Una volta terminato il deploy, il sistema si preoccupa di linkare sempre la cartella current, quindi una volta aggiornato il webserver, punta automagicamente all’ultima versione della release.

Sicurezza, come scrivono nel loro sito.

Modularità.

Ordine e gestione delle dipendenze.

I treni passeranno in orario… no questo no, però insomma.

Alcuni limiti

Ci sono alcuni limiti, più all’approccio al progetto che altro. A volte sembrano passare per vendor lock-in ma non è affatto così.

In pratica la cosa che più pesa è un server diverso dagli hosting da pochi euro. Serve un accesso SSH, serve una configurazione particolare di Apache o Nginx, servono alcune accortezze che un sistemista medio sa fare senza problemi e che invece l’hosting non può.

Implica quindi un costo più alto e una curva di adozione più ripida.

Posso avere un FTP per lavorarci?

No.

Ma non perché siamo cattivi, ma perché oggettivamente FTP significa lavorare direttamente sul filesystem di produzione nella stragrande maggioranza dei casi e la risposta sarà semplicemente no.
Si può lavorare in più società, più soggetti, più fornitori. Ma si lavora secondo uno standard moderno e condiviso.

Posso avere un FTP per uploadare cose?

Certo, volendo. Ma sei sicuro che serva?

Cosa cambia per i backup?

Nulla quelli li devi fare lo stesso, o meglio tanto: è inutile backuppare tema e plugin. Sono sul composer.json che è committato su un repository. E poi ci sono i file e il database. Meglio, parecchio meglio.

Usare Bedrock? Ce lo fate sapere?

Capitolo 4
TPI – Design system e mobile first

Aiutaci a migliorare TPI

Hai trovato qualcosa che ti è piaciuto o non e che pensi possa essere migliorato?

Lasciaci il tuo feedback

Please, rotate the screen
or view the website on other screen.