Sviluppo sito WordPress con Bedrock, Sage e Trellis

Il nostro sito web non poteva che essere il primo elemento del portfolio. Essendo un progetto interno, ci siamo concessi una grande libertà creativa, affrontando la progettazione e lo sviluppo in un modo completamente nuovo. Volevamo creare un sito che fosse veloce, scalabile e facile da gestire, ma che al contempo rappresentasse pienamente chi siamo e cosa facciamo.

Per questo motivo abbiamo scelto WordPress, aggiungendo però un tocco speciale: il Roots Stack, un ecosistema di strumenti avanzati che ha rivoluzionato il nostro approccio al progetto.

La situazione di partenza

Come si dice, le scarpe del calzolaio sono sempre rotte, e il nostro vecchio sito non faceva eccezione. Creato in fretta e furia con Elementor, presentava performance scadenti e una qualità generale lontana da ciò che WebTea rappresenta. Non rifletteva né la nostra professionalità né il nostro potenziale.

Abbiamo quindi intrapreso un completo processo di restyling, che ha coinvolto:

• Logo
• Tone of voice
• Social media
• Sito web

Per il sito, abbiamo definito tre requisiti fondamentali:

1. Semplicità
2. Velocità
3. Scalabilità

Dietro queste parole chiave, però, c’è un lavoro enorme. Dire “voglio un sito snello e veloce” è facile; realizzarlo, molto meno.

La progettazione

Abbiamo iniziato con una lavagna bianca e discusso ogni dettaglio: sezione per sezione, componente per componente, pixel per pixel.
Le prime quattro settimane sono state dedicate esclusivamente alla raccolta di idee, appunti e requisiti. Pur trattandosi di un progetto interno, il tempo è stato limitato, ma siamo riusciti a definire con precisione i seguenti elementi:

• Low-fidelity wireframe per la progettazione successiva.
• Elenco dei componenti da progettare e includere nel nostro UI kit.
• Performance budget specifico per ogni layout.
• Requisiti di accessibilità, con comportamenti dettagliati per ogni componente in diverse situazioni.

La parte di UX research, mockup, wireframe e UI kit è stata curata da Estephany, mentre Manuel si è concentrato sull’analisi dei dati, la validazione delle ricerche e l’ottimizzazione dei mockup per agevolare lo sviluppo.

La soluzione tecnologica

Parallelamente alla fase di progettazione, Manuel ha analizzato diverse opzioni tecnologiche:

1. WordPress Headless per il backend, con Next.js per il frontend.
2. Strapi come CMS e Angular per il frontend.
3. Sito statico realizzato interamente con Next.js.

Dopo una valutazione attenta, la scelta è ricaduta sul Roots Stack per i seguenti motivi:

• WordPress offre semplicità nella gestione dei contenuti, fondamentale per Estephany.
• Bedrock garantisce una struttura organizzata e sicura per il progetto.
• Sage consente di creare temi personalizzati e modulari, ottimizzando lo sviluppo.
• Trellis semplifica il deploy e la gestione degli ambienti di sviluppo..

Perché lo stack Roots?

La scelta dello stack Roots non è stata casuale. Si tratta di un ecosistema progettato per sviluppatori che vogliono creare siti WordPress moderni, performanti e modulari, e ci ha permesso di raggiungere esattamente i nostri obiettivi. Ecco come ogni componente ha contribuito al progetto:

Bedrock

Bedrock è una versione migliorata di WordPress che utilizza una struttura dei file moderna e sicura. Grazie a Bedrock, abbiamo potuto:

• Organizzare il codice in modo chiaro e scalabile.
• Gestire le dipendenze con Composer, evitando conflitti di plugin.
• Rafforzare la sicurezza, separando il core di WordPress dai file specifici del progetto.

Acorn

Acorn ha introdotto uno stile di sviluppo PHP simile a Laravel, rendendo il codice più leggibile e mantenibile. Questo ci ha aiutato a:

• Sviluppare rapidamente funzionalità personalizzate.
• Utilizzare middleware, eventi e dependency injection per un approccio più pulito ed elegante.

Bud

Bud è uno strumento di build, paragonabile a Webpack ma ottimizzato per lo sviluppo WordPress. Con Bud abbiamo:

• Ottimizzato CSS e JavaScript per migliorare i tempi di caricamento.
• Utilizzato il supporto nativo per ESModules e PostCSS.
• Reso il processo di build più veloce e configurabile.

Sage

Sage ci ha permesso di costruire un tema WordPress personalizzato, sfruttando tecnologie come Blade per i template e Tailwind CSS per lo stile. Questo ha reso lo sviluppo front-end:

• Rapido ed efficiente grazie all’approccio utility-first di Tailwind CSS, che ci ha consentito di scrivere meno codice CSS personalizzato mantenendo un design coerente.
• Facilmente mantenibile, con uno stile modulare che elimina conflitti e semplifica l’aggiornamento del design.
• Altamente personalizzabile, poiché Tailwind CSS offre la possibilità di creare un design su misura senza partire da zero.

Grazie all’integrazione di Tailwind CSS in Sage, siamo riusciti a ottimizzare il tempo dedicato alla creazione del design e a mantenere la qualità visiva del sito.

Radicle

Radicle è stato cruciale per mantenere il progetto ben organizzato. Ha permesso di:

• Gestire configurazioni specifiche per ambienti di sviluppo, staging e produzione.
• Minimizzare errori durante il deploy grazie alla chiarezza delle configurazioni.

Trellis

Infine, Trellis ha reso il deploy e la gestione degli ambienti un gioco da ragazzi. Con Trellis abbiamo:

• Creato ambienti di sviluppo identici alla produzione, riducendo problemi di compatibilità.
• Implementato un deploy automatizzato via Ansible, risparmiando tempo e prevenendo errori manuali.
• Garantito un’ottimizzazione del server per prestazioni elevate.

Questo sito si trova su un Droplet di Digital Ocean da 5€ al mese e le performance sono ottime.

Quello che stavamo cercando

L’integrazione dello stack Roots, unita all’uso di Tailwind CSS e delle tecnologie moderne, ha soddisfatto pienamente i tre requisiti chiave che ci eravamo prefissati per il nostro sito:

• Semplicità: Grazie a Bedrock, Sage e Trellis, abbiamo mantenuto un’architettura chiara e pulita, semplificando la gestione del progetto e la manutenzione del sito.
• Velocità: L’uso di Bud per ottimizzare gli asset e il design minimale basato su Tailwind CSS ha garantito tempi di caricamento rapidi, migliorando l’esperienza utente e le performance SEO.
• Scalabilità: La modularità di Sage, unita alla flessibilità di Bedrock e Trellis, ci permette di aggiungere nuove funzionalità o adattare il sito a esigenze future senza compromettere la stabilità o la qualità del codice.

Tutto ciò ha reso il nostro sito non solo un biglietto da visita per WebTea, ma anche una prova tangibile del nostro approccio allo sviluppo: moderno, efficiente e orientato ai risultati.

Risultati ottenuti

Il nuovo sito di WebTea è un esempio concreto di come l’approccio giusto e le tecnologie moderne possano fare la differenza. Ecco i risultati principali:

• Performance eccellenti: Punteggio di 90+ su Google PageSpeed sia per desktop che per mobile.
• Tempi di caricamento ridotti: Meno di 1,5 secondi per le pagine principali, migliorando sia l’esperienza utente (a tendere ci aspettiamo di vedere risultati ottimi anche lato SEO).
• Accessibilità migliorata: Un sito progettato per essere inclusivo, conforme agli standard WCAG.
• Gestione semplificata: Grazie a Roots Stack, il sito è facile da mantenere e aggiornare, risparmiando tempo e risorse.

Il nuovo sito rappresenta al meglio chi siamo e cosa facciamo, diventando non solo un punto di riferimento per i nostri clienti, ma anche una dimostrazione tangibile delle nostre competenze.

Hai bisogno di un sito moderno e performante?

Se anche tu cerchi un sito web veloce, scalabile e semplice da gestire, con un design moderno e tecnologie all’avanguardia, WebTea è qui per aiutarti. Contattaci oggi stesso per una consulenza personalizzata e scopri come possiamo realizzare il sito perfetto per le tue esigenze!