Ecco perché un vero Sviluppatore non usa i Page Builder

Questo articolo nasce in risposta alla frustrazione accumulata a seguito di una storia professionale autentica. Una di quelle accadute nei giorni più confusionari in cui potesse capitare, nel bel mezzo del mio più remunerativo lavoro.

In fondo quando hai una miriade di cose da fare e a cui pensare capita che ti possa sfuggire quel classico: “si, ok, te lo aggiusto io dopo, tanto si tratta di rendere un bordo trasparente in CSS, massimo un minuto e l’ho sistemato!”. Male, fai che questo non accada mai e sopratutto assicurati di non dover mai mettere mano ad un sito creato completamente con l’uso del visual composer.

All’interno di questo articolo troverai le spiegazioni dettagliate per le quali non ritengo utile e tantomeno professionale richiedere l’aiuto di strumenti come i vari page builder o del famosissimo Visual Composer; ovvero di quelle soluzioni che promettono un “semplice” drag’n drop per la creazione di un tema WordPress.

Oltre a questo troverai anche proposte e soluzioni mirate a permetterti di sostituire questi elementi e iniziare ad essere un vero sviluppatore WordPress, uno di quelli seri insomma 😉

Facciamo le dovute premesse

Iniziamo con il dire due cose che a molti potranno sembrare banali ma che ho capito non esserlo dopo averle discusse con parecchi clienti.

La prima cosa da fissare bene in mente è che se vi fanno un sito usando un page builder, beh, il livello di professonalità, di conoscenza del web e di WordPress nello specifico è veramente bassino. Questo perchè nessun professionista che si trovi a creare un design da zero parte già da un canvas zeppo di funzionalità, widget, framework e ammennicoli vari che si portano inevitabilmente dietro i page builder grafici.

Piuttosto un vero professionista studia le esigenze del cliente e costruisce al meglio il MINIMO PRODOTTO OTTIMIZZATO (Minimum Viable Product o MVP), concentrandosi sugli aspetti chiave del progetto. Questo è un metodo di validazione dell’idea che cerchiamo di seguire sempre più spesso e si chiama Lean Startup, mutuato da un libro, ormai famosissimo e che ti consiglio di leggere, Lean Startup di Eric Ries.

Già partire da temi premium multi-purpose per me è follia, figuratevi quando nel backend di un sito di ricette mi ritrovo il widget da inserire in una griglia da 12 elementi (ma che me ne farò mai di tutti quegli elementi in linea?!?!) per mostrare grafici a barre?! Probabilmente qualcuno un’utilità ce la troverà pure, io sinceramente preferisco ottimizzare le risorse finchè non sento la necessità di andare oltre.

Altro elemento di disturbo è quello di impilare sempre più risorse una sull’altra.

In informatica parliamo di stack, ovvero di veri e propri piani sui quali si costruisce un’applicazione, e se contiamo quelli del nostro sito già possiamo notare che il nostro tema è costruito con le funzioni di WordPress che a sua volta poggia su LAMP (OS Linux, Server Apache, DB MySQL e linguaggio PHP).

Normalmente il nostro tema avrà, a sua volta, almeno 3 dipendenze tra framework CSS e JS, questo senza considerare la probabile componente custom. Ricorda sempre che un page builder porta con se ulteriori dipendenze e il tuo tema ne diventerà schiavo; parliamo di aggiornamenti continui, aumento dei possibili bug e dei problemi di compatibilità tra tutte queste tecnologie che state mescolando su più piani diversi.

Ora magari stai pensando: “Si ma anche se il tema lo costruisco io sarò comunque dipendente da qualche script o libreria”.

Verissimo.

La differenza è tutta nel fatto che puoi scegliere tecnologie e framework molto meno dispersivi e ottimizzati a dovere se messi a confronto con un tema costruito su un page builder qualsiasi. A onor del vero devo riconoscere gli sforzi di Beaver Builder e di Divi in tal senso, nel restare piuttosto aderenti alle logiche del framework WordPress.

Con questa ultima dichiarazione però, non voglio invalidare tutto il discorso precedente ma semplicemente sottolineare che esiste un modo per farlo meglio ed è disponibile a chi non ha conoscenza alcuna di programmazione ed esigenze piuttosto semplici.

Non condanno infatti, chi usa questi strumenti per scopi personali, senza pretesa di perfezione alcuna. Io condanno chi li usa come strumento professionale per costruire siti e landing page da rivendere ai propri clienti.

Avete visto quante librerie e codice JavaScript viene caricato nel backend solo per permettervi tutto quell’inutile drag’n drop e anteprime live?

Prova a immaginare cosa succede nel momento in cui la tua pagina inizia a riempirsi di elementi multimediali, blocchi di testo, call to action (CTA) e animazioni. Se non hai mai avuto il privilegio di provare allora te lo dico io, solo scrollando la pagina dell’editor si può provare la sensazione di cosa era Internet negli anni ’90, la lentezza e la sensaizione di bloat che invade pesantemente l’esperienza utente in ogni suo momento.

page-builder-backend

E ora vienimi a dire che è comodo spostare l’ultimo blocco in cima all’articolo semplicemente trascinandolo! 😀

Il fallimento dell’esperienza utente

Partiamo dall’assunto che sento spesso quando si parla di page builder: “Sono facili da usare e ci puoi fare qualsiasi design, li trovi in tanti temi premium e mi tolgo dalle scatole di dover gestire il cliente pazzo che vuole farsi le modifiche da solo.”

Falso. Falsissimo come la fantascienza di basso livello, alla stregua di Megaforce ma girato peggio.
Ora vi spiegherò perché l’assunto è profondamente sbagliato smontandolo parte per parte.

Primo mito: i Visual Composer sono facili da usare

Su questo punto ci si ricrede in fretta, spesso dopo i primi venti minuti passati sul software, perché nonostante tu sia un adetto e traffichi tutti i giorni con griglie, allineamenti e padding ti accorgerai che non è poi così tutto automatico e ti ritroverai a fare largo uso dei CSS.

Molto spesso sono gli stessi page builder che mettono a disposizione un editor CSS interno ad ogni pagina che inietta codice direttamente nella sezione <head> del tuo sito, consci del fatto che nasceranno sicuramente necessità insoddisfacibili via interfaccia grafica. Come puoi pensare che per un cliente, al quale probabilmente non interesserà nulla capire come funzioni una griglia e sopratutto mettersi ad imparare uno strumento per costruire strutture e inserire nuovi contenuto, questa rappresenti la persona adatta.

L’unico caso in cui penserei di fare un piacere al committente integrando un page builder, sarebbe solo il caso in cui abbia già tutto un sito basato su quello e che lo conosca così a menadito che è quasi lui a spiegare a me come funziona.

Giuro, sia io che il mio collega Andrea, abbiamo sbattuto la testa su siti fatti con i più disparati visual composer e ci siamo ritrovati sempre a dover imparare la loro logica, quasi ripartendo da zero, e abbiamo sprecato tanto tempo a imparare una cosa che diverrà probabilmente obsoleta e inutile in pochissimo tempo.

Perché non impiegare quel tempo ad imparare un minimo a programmare in WordPress combinandolo magari a Genesis o a un quasiasi starter theme?

In questo modo l’esperienza utente che vendiamo al cliente sarà veramente ben fatta e cucita addosso alle sue esigenze, diamo in mano una serie di campi e opzioni da compilare e le sue preoccupazioni saranno solamente a livello contenutistico.

Questa non è una piccola differenza e può segnare lo scarto tra un lavoro ben recepito perché usabile senza fraintendimenti e uno mal recepito perché troppo sovradimensionato.

Secondo mito: puoi fare qualsiasi design usando un Page Builder

Se non hai mai provato un preprocessore CSS come Sass o un framework CSS come Bootstrap, posso capire che creare griglie e strutture possa sembrare un compito arduo, sopratutto se queste devono essere responsive e devono accogliere ogni tipo di elemento possibile.

Tuttavia non è tramite un page builder che si ottiene la libertà necessaria a creare design specifici perché parecchio lavoro è già fatto e si deve procedere solitamente al contrario, smontando quello che ci si trova stilato e scrivendo la propria parte custom che si adatti a questa struttura.

Dov’è l’applicazione della teoria del foglio bianco? Dove sta la libertà?

Per disegnare un animale puoi tranqullamente partire comprando il libro della savana da colorare all’autogrill ma poi ti limiterai a scegliere tra i soli soggetti che sono stampati lì sopra, mentre sicuramente il tuo animale preferito sarà il procione 🙂

La conoscenza di HTML e CSS devono essere le basi di un web designer e anche la conoscenza della logica del templating (riusare dei blocchi o intere strutture di pagina per contenuti simili o affini), credere di trovare la libertà creativa data dalla conoscenza di questi due linguaggi in un page builder che cerca di “contenerne” l’uso è una pia illusione.

Pensa che neanche il linguaggio CSS alla base dei visual composer è perfetto e per questo in rete si trovano centinaia di CSS tricks/hacks che permettono le più svariate cose. Con una ricerca su Google potrai migliorare e apprendere nuovi modi di realizzare design sorprendenti direttamente con CSS o ancora meglio con Sass e qualche suo mixin.

Pensa anche che un page builder ti può offrire la stessa “user/developer base”, lo stesso ritmo di aggiornamenti, la stessa quantità di materiale formativo e le stesse fonti d’ispirazione?

Terzo mito: tanti temi premium li integrano

Questa parte ovviamente è impossibile da smentire. È verissimo, basta fare un giro sul più grande marketpalce di temi al mondo per accorgersene. Non smentirò questa affermazione ma ti chiedo semplicemente di spiegarmi come mai piacciono a tanti autori di temi.

Ti dirò come la vedo io.

Dal mio punto di vista quando si è costretti a puntare sui volumi di vendita (caso molto comune quando vendiamo temi all’interno di un marketplace), per guadagnare si passa a un modello di produzione seriale e general purpose. Quando si vende un tema per 50 euro non ci si può stare a concentrare su come mettere meglio in mostra i contenuti per determinate categorie e tipologie di sito, meglio scaricare la responsabilità del design sul compratore.

Allora ecco che i temi passano dal contenere “di tutto di più” (WooCommerce, BuddyPress, Events Manager, Portfolio, etc etc) al contenere “più del tutto di più” (WooCommerce e relativi widget per il page builder, Event manager e relativi widget, etc etc) e sarai solo tu a doverti caricare il peso dato dalla complessità di software che probabilmente neanche volevi.

Sei ancora sicuro che risparmierai del tempo usandone uno?

Sotto la scocca di carta c’è un motore di cristallo

La cosa più fastidiosa di questo tipo di design è che spesso si poggia su assurdi impieghi di shortcode misti a griglie CSS del tutto alieni alle logiche comuni e alle buone pratiche. Basta passare alla visualizzazione classica dell’editor di WordPress per vedere i pasticci che lasciano nell’interfaccia. Pensa con queste premesse cosa può diventare il database e che esperienza drammatica porta un cambio di tema, anche solo minimo.

page-builder-editor

Se a questo ci aggiungi anche che hai usato il builder per fare delle personalizzazioni e che probabilmente erano più legate al tema che al plugin, capisci da solo perché considero questo approccio un lock-in piuttosto che una liberazione.

Uno dei più famosi page builder in commercio è addirittura incompatibile con la sua versione precedente, attualmente piena di bug e lasciata a morire senza vero supporto, causando non pochi mal di testa a chi aveva comprato temi ormai obsoleti e che si vede costretta a inventare non so cosa per migrare tutto il proprio contenuto.

Se hai sentito parlare di Web Semantico sarai tra quelli che in questo momento si stanno chiedendo come faccia un sistema del genere a gestire correttamente i vari tag HTML5 e sopratutto l’aspetto SEO di una pagina con tutti i metadati al posto giusto.

Io me lo sono chiesto e sono andato a cercare nel codice, da buon smanettone, la presenza di qualche segnale incoraggiante. A differenza di alcuni temi che si comportanto come framework e che fanno un buon lavoro di costruzione semantica come Genesis Framework, che di questo aspetto a ragione ne fa un vanto, i temi che integrano i page builder risultano meno specifici.

Dimentica anche tutto ciò che hai imparato sulla gerarchia del DOM perché nel mondo dei page builder tutto è annidabile dentro tutto e la semantica è definita non solo dalla bravura di chi ci ha costruito il tema ma sopratutto dall’utente finale che ignorando questi temi non  potrà fare altro che pasticci…

Vedere nel tema il nome del visual composer con cui ti sei trovato bene la volta precedente non è sinonimo di garanzia, neanche se accompagnato dalla dicitura “SEO Optimized”, perché compreso nel pacchetto dell’utente finale c’è anche la possibilità di corrompere tutta l’ottimizzazione con un paio di drag’n drop di troppo nella pagina sbagliata.

page-builder-html

Una <section> per il menù? Forse era meglio usare un elemento <nav>! Per questo visual builder il web semantico si ferma qui.

Conclusioni

Ora vorrei uscire da questi scenari apocalittici e rientrare nel più comune seminato di tutti i giorni, cercando di capire se conviene come professionista legarsi ad uno di questi software.

Ovviamente la mia risposta la conosci già ma ho visto con i miei occhi “colleghi” vendere siti realizzati in questo modo e voglio darti un consiglio spassionato: se vuoi che i clienti tornino per pagarti altri lavori e non per chiederti “come si fa a infilare il player di SoundCloud che non è disponibile nel menù”, studia qualche framework serio basato sul PHP anzichè affidarti al drag’n drop.

Nel mare di Internet, dove regna l’improvvisazione, il professionista si distingue sopratutto per l’esperienza d’uso che è in grado di proporre al proprio cliente. Lo sforzo in più mettiamocelo volentieri.

E tu? Hai mai provato un page builder? Pensi che sbagli o semplicemente vuoi darmi dei feedback?
Sarò felice di risponderti nel form di commenti più in basso!

Ci si legge a presto da queste parti.

Lascia il tuo Pensiero

10 Responses to “Ecco perché un vero Sviluppatore non usa i Page Builder”

  1. Marilisa

    Articolo eccellente! Provengo da altri linguaggi di programmazione e da poco sto approcciando ai linguaggi web ma, concordo con te che il codice che esce da un CASE non rispettoso del motore (nel nostro caso WP), come potrebbe essere un visual composer, è molto spesso ampolloso, ridondante e… naturalmente poco flessibile.

    Rispondi
    • Eugenio Petulla'

      Grazie mille per i complimenti Marilisa, a volte la via facile attrae di più.

      Concordo a pieno con te, un professionista deve sapere che non si possono sacrificere certi aspetti in cambio di interfacce DragAndDrop.

      Rispondi
  2. Silvia Bordignon

    Ciao Eugenio, con questo articolo mi hai colpita e affondata =)
    Purtroppo sono una di quelle persone che cercano sempre degli strumenti per rendere la composizione della pagina più semplice e utilizzo spessissimo il visual composer per wp.
    Dobbiamo ammettere però che poter inserire alcune immagini o altri elementi interattivi con pochi click è davvero molto utile e purtroppo anche alcuni clienti iniziano a chiedere questo genere di strumenti per poter “gestire” i contenuti del sito.
    Per uscire da questa mia brutta dipendenza dai visual composer, cosa mi consiglieresti?
    Mi farebbe davvero molto piacere scambiare qualche opinione con te (approposito, quando verranno completati i corsi su Wp presenti nella scuola per sviluppatori?)
    Aspetto con ansia una tua reply
    ciao
    Silvia =)

    Rispondi
    • Andrea Barghigiani

      Ciao Silvia, intanto rispondo io al posto di Eugenio che sicuramente verrà a breve ad aggiungere la sua opinione. Partiamo subito parlando del corso Apprendi il PHP con WordPress del quale mi sento moolto responsabile.

      Sto portando avanti il progetto proprio in questi giorni e desidero concluderlo entro metà mese, ti assicuro che il corso sta diventando sempre più completo e non sto passando il tempo a dormire. Allo stesso tempo questo tipo di corso non ti permetterà di creare i tuoi temi e modificare tutto quello che desideri di una pagina generata da WordPress (questo sarà trattato maggiormente su un altro corso), ma con le conoscenze presenti nel corso e quelle di HTML e CSS sarai in grado di modificare gran parte delle implementazioni richieste.

      Per quanto riguarda invece il discorso su “che cosa dare al cliente” diciamo che qua dobbiamo aprire un sacco di parentesi e anche reindirizzare la discussione su altri aspetti. Comprendo la difficoltà di farlo capire ma, in fin dei conti, chi è il cliente per permettersi di modificare un layout studiato per tale scopo? Perché dovrebbe utilizzare colori, forme e strutture che non sono naturali del tipo di pagina?

      Spero tu capisca che queste domande vogliono essere provocatorie non tanto per te ma perché anche noi lottiamo quotidianamente su questi aspetti e facciamo una grande fatica a far comprendere questi aspetti ai nostri clienti. Se qualcuno ci chiama per un determinato lavoro è perché desidera i nostri servizi e le nostre competenze, se va a modificare le strutture che abbiamo impostato perché mai ha bisogno di noi?

      All’interno dei nostri corsi io porto sempre l’esempio: ma perché le persone non si mettono a dare consigli a un dottore mentre nel nostro lavoro sono tutti web designer ed esperti di UX?

      La risposta principale e maggiormente condivisa è quella che l’errore è nostro e che dobbiamo imparare a descrivere meglio il valore aggiunto che il nostro cliente otterrà lavorando con noi piuttosto che con il cugino. Ripeto, non voglio risultarti antepatico con questa mia espressività e spero che tu non ti arrabbi con me per quanto detto.

      Se vuoi un consiglio spassionato, noi lavoriamo con la libreria CMB2 che permette di creare delle pagine di backend completamente personalizzate per il tipo di dato che deve essere inserito. Per esempio, se un mio cliente ha bisogno di un CPT ricetta noi gli creiamo tutti i campi che ci richiede e solo quelli, se vuoi aggiungere banner o altre immagini potrà utilizzare il classico editor presente in WordPress ma niente di più.

      Allo stesso tempo ci sono clienti un po’ più “duri” ai quali, se proprio non possiamo fare a meno di evitarli o a convincerli, gli proproniamo l’acquisto di Divi (come diceva lo stesso Eugenio) e di utilizzare quello solo per le landing page di cui avrà bisogno per promuovere determinati servizi o prodotti.

      Torneremo sicuramente a parlare di questi argomenti ma intanto spero di averti fatto capire che usare questi strumenti per qualsiasi pagina di un sito web è un problema sia SEO che di prestazioni; ma se siamo in grado di limitare il loro utilizzo per pagine specifiche allora forse si può sempre salvare qualcosa.

      Non mi odiare, ma anzi, continua pure ad arricchire questa conversazione che sono sicuro possono nascere degli spunti interessanti 🙂

      Rispondi
      • Silvia

        Ciao Andrea e grazie per la risposta. Devo dire che mi stai facendo riflettere tanto sugli errori che commetto con i clienti e anche nell’approccio con wordpress. Forse bisognerebbe parlarne ancora tanto per evitare di lavorar male e proporre anche strumenti che forse sono superflui anche al cliente finale.
        Ora rimango in fase di riflessione ma non mancheranno altri miei interventi
        Grazie ancora
        Silvia

        Rispondi
        • Andrea Barghigiani

          Ciao di nuovo Silvia e grazie per non esserti arrabbiata con me 😀

          Riconosco che gli aspetti trattati sono molti e richiedono una riflessione, ricorda che noi siamo sempre qua o su skillsAndMore per aiutarti a chiarire i tuoi dubbi quindi non esitare a riproporre i tuoi dubbi perché siamo sempre pronti a nuovi confronti.

          Buon proseguimento e a presto,
          Andrea

          Rispondi
  3. James

    Salve,

    questo articolo ha colpito anche me, purtroppo utilizzo page builder per i siti i cui contenuti saranno gestiti dal cliente, tipo creazioni di nuove pagine. Se io utilizzo un sistema griglie, dove in una pagina wordpress devo scrivere codice html (div) per richiamare e varie classi, per il cliente che deve aggiungere una nuova pagina diventa difficile.

    Cosa consigliate in questo caso ?

    Rispondi
    • Andrea Barghigiani

      Ciao James,
      noi utilizziamo con immenso piacere la libreria CMB2 che ci permette di creare delle aree ad hoc per i nostri clienti per l’inserimento di determinate informazioni che andranno a popolare la pagina. L’uso è molto intuitivo dato che segue la logica WordPress e le modifiche da fare alle pagine riguardano soltanto l’inserimento del codice necessario per prendere le informazioni dal database.

      Prova a dare una letta a questo vecchio articolo di Daniele che a breve verrà ripreso e approfondito dal nuovo blog di skillsAndMore.

      Rispondi
  4. Eugenio

    Ciao! Grazie per le interessanti osservazioni condivise. Ti chiedo un grande piacere: immagina una persona che abbia buona e consolidata confidenza con CSS, ma scarsissima con HTML e nulla con PHP. Questa persona ha sempre lavorato editando con CSS i contenuti che venivano inseriti nella varie pagine tramite Visual Composer, e che quindi davano la possibilità di creare una struttura schematica dei contenuti per poi modificare qualsiasi stile tramite CSS.

    Ora: sto lavorando a un progetto nel quale, giustamente, nessun tipo di composer è previsto, io sono colui che ha la responsabilità di creare i contenuti delle pagine “statiche” quali landing pages e pagine promozionali all’interno di un e-commerce.

    Qual’è il metodo più veloce, facile e intuitivo per poter “ricreare” uno schema nella sezione di modifica della pagina wordpress, nel quale io possa inoltre assegnare le classi css, sulla falsa riga di ciò che VC mi permette di fare “automaticamente”. (Il tutto usando solamente l’editor base di wordpress o comunque con aggiunte che non facciano storcere il naso ai bravissimi tecnici che stanno seguendo l’infrastruttura del sito).

    E’ cruciale per me, spero possiate aiutarmi.

    Rispondi
    • Andrea Barghigiani

      Ciao Eugenio,
      la via più semplice che conosco sarebbe quella di utilizzare un plugin come ACF che permette di creare delle aree di inserimento contenuto all’interno di un editor WordPress in modo da aiutarti maggiormente nella creazione delle varie sezioni.

      Ovviamente dovrai chiedere agli sviluppatori di integrare i nuovi campi all’interno della pagina dedicata, ma a parte questo ACF offre un’intuitiva soluzione per andare a creare i campi che desideri e magari ripeterli. Sicuramente non avrai un feedback per il look&feel come viene offerto da VC ma allo stesso tempo avrai pieno controllo sul codice generato e nella semantica delle tue pagine.

      Spero di averti aiutato e non esitare a continuare questa interessante conversazione.

      Rispondi