Dariobanfi.it

Nuovo design e restyling a livello di contenuti (Information Architecture) del mio sito basato su WordPress. Attività svolta in autonomia, con l’applicazione delle best practice a me note per la costruzione e ottimizzazione di siti Web.

Progetto pensato per impiegare il minor numero possibile di plug-in (per generare solo le query necessarie) e un tema di partenza di tipo plain , ovvero un framework con il minor numero di stili, quasi spoglio, che lascia spazio alla personalizzazione spinta da parte dei designer. In particolare il framework utilizzato (senza plug-in aggiuntivi) è GeneratePress (che ringrazio!).

Nuovi contenuti e custom post type

Grazie alla migrazione del mio blog storico, raggiungibile finora all’indirizzo Humanitech.it, sono stati trasferiti oltre 1.o00 articoli. Sono state realizzate poi, ex novo, 20 pagine statiche di tipo “istituzionale” e sono state create circa 100 schede progetto (come questa che state leggendo), per descrivere le attività svolte negli anni. Aggiunti, inoltre, post specifici dedicati con endorsement di clienti ed ex clienti.

Per schede progetti ed endorsement sono state utilizzate tecniche per generare Custom Post Type e Advanced Custom Fields, in modo da classificare contenuti con tassonomie ad hoc e consentire l’inserimento di contenuti e dettagli ad hoc, come avviene in regolari schede “catalogo”. Per la navigazione sono stati creati, inoltre, template ad hoc in corrispondenza della tassonomia generata dai CPT.

Un layout unico, con shortcode ad hoc

Il layout di questo sito è stato realizzato ad hoc, con numerosissime personalizzazioni, basate su blocchi dinamici di contenuto ottenuti attraverso shortcode generati da codice e trattati in un child-theme personale.

Alcuni esempi di shortcode: 1) la timeline con le schede progetti per singole categorie (esempio “copywriting”) inserite nelle pagine statiche che descrivono la tipologia di attività (“Copywriting“); 2) la timeline dei progetti nel Portfolio generale; 3) blocchi con le mie competenze e specializzazioni (impaginate con un accordion generato via Javascript+CSS) nella pagina “Chi sono“; 4) tutti i blocchi di dati per singolo progetto, che includono ACF e un rendering personalizzato con icone grafiche per singola categoria progetto; ecc.

Oltre ai blocchi dinamici di contenuto, il sito è stato ridisegnato per intero nei suoi fogli di stile (CSS) rispetto al framework di base. Disegnato inizialmente per versione mobile, il sito completamente responsive, offre microcontenuti e menu diversi a seconda del media (desktop, tablet e telefono) utilizzato.

Attenzione a sicurezza e performance

Molto curato anche l’aspetto legato alle performance. Oltre alla scelta di un hosting specializzato su WordPress, sono stati curati: 1) peso delle immagini; 2) caricamento progressivo dei viewport (con lazy loading delle immagini); posizionamento, dove possibile, degli script (JS e CSS) esterni nel footer o unicamente nelle pagine che li richiedono; 3) introduzione di sistemi di caching a più livelli (server, browser ecc.); 4) attivazione di una CDN; 5) minificazione di HTML, JS e CSS.

Per quanto riguarda la sicurezza sono stati usate soluzioni standard: attivazione di un certificato SSL e redirection del sito su https; attivazione di tool Antispam e di un Firewall; installazione di un sistema anti-DDOS (con Google ReCaptcha); inserimento script su server per protezione da attacchi via robot (i principali conosciuti); definizione meccanismi di alert per avvisare in caso di attacchi o altri pericoli.

Integrazione con strumenti SEO e Analytics

Infine la SEO. Oltre all’installazione e configurazione di un plug-in ad hoc, sono state generate mappe xml del sito, poi trasmesse alla Serach Console di Google. I testi, le immagini (nome del file e alt tag) e i permalink relativi alle pagine e ai progetti creati ex novo sono stati pensati e costruiti in ottica SEO. Infine sono stati ridirezionati gli oltre 1.000 articoli sul dominio del vecchio blog verso questo sito, per non perdere i premi nelle SERP guadagnati nel tempo da Humanitech.

---

Questo intero sito è stato costruito in circa due mesi, un po’ di giorno, un po’ di notte :-). Si è trattato di un investimento importante e al tempo stesso di un esperimento, pensato per crescere professionalmente e migliorarmi dal punto di vista tecnico nella costruzione di soluzioni complesse, rese al pubblico però in maniera semplificata. Si è reso necessario per migliorare la visibilità sulle mie competenze e tenere traccia di un percorso professionale, che andrà avanti nel tempo. Infine è stato pensato come progetto per riaprire uno spazio di scrittura, il mio blog, che in qualche modo mi mancava da tempo, e come spazio per testare (divertendomi) miglioramenti continui a livello SEO e tecnici (come mostrano le due immagini, con dati da Screaming Frog e Google Speed Insights).