Good Ideas

BootStrap e content strategy

Ecco come Twitter Bootstrap rivoluziona lo sviluppo di siti web

Posted by:

|

On:

|

Il frenetico evolversi della tecnologia web non ci permette di avere punti di riferimento e l’aggiornamento costante e la curiosità di sperimentare tutte le nuove opportunità tecnologiche è l’unica soluzione per rimanere al passo con i tempi.

BootStrap e content strategy

Pensavo che il passaggio da html 4 a xhtml fosse una grande rivoluzione. Da quel momento, invece a valanga si sono susseguite novità sempre più rivoluzionarie: suddivisione concettuale presentazione-contenuto-comportamento (css-html-js), l’arrivo del CSS3, la diffusione di jQuery, la morte di Adobe Flash, l’uso delle media query per il design responsive, la nascita del front-end framework Twitter Bootstrap, la definizione di design autentico.

Arrivati a questo punto è giusto fare un esame dello stato dell’arte del web design ed è opportuno rivisitare il modo con cui sviluppiamo le applicazioni web. Non possiamo più accontentarci di produrre siti alla vecchia maniera, pieni di immagini decorative, librerie javascript a quintalate, pagine barocche e vecchie prima di nascere.

Il design autentico ci obbliga a orientare i nostri sforzi nella creazione di design al servizio del contentuto. Tutte le nostre scelte grafiche devono essere fatte con l’intento di migliorare la fruibilità del sito. Il design è dunque uno strumento e non un’opzione estetica.

Dobbiamo pensare ad un design che pone in risalto i testi importanti, suggerisce le azioni che l’utente dovrebbe compiere e toglie tutto il resto. Cambia in sostanza il modo in cui dobbiamo sviluppare il web.

Come si sviluppava un sito prima di oggi

Probabilmente la mia esperienza nel modo di lavorare assomiglia alla vostra. Il cliente vi spiega a grandi linee l’idea che ha in testa e, se siete fortunati, avete anche la lista dei requisiti e delle funzionalità richieste.

Il designer comincia a disegnare con photoshop le bozze grafiche e dopo una serie di feedback con il cliente si raggiunge l’approvazione e si comincia la scrittura del codice html-css-js per poi concludere con la motorizzazione del sito con un linguaggio server-side (php, rails, java, ecc).

Ora mi rendo conto che gran parte del lavoro si concentra sul design grafico con Photoshop e per cercare di ottenere l’ok dal cliente si decora il sito aggiungendo colori, sfondi, immagini a rotta di collo.

Risultato: un capolavoro estetico ma inutile perchè poco usabile, con un basso tasso di conversione e con contenuti che passano in secondo piano.

Come si sviluppa un sito web oggi

L’affermazione del design autentico in accoppiata con Bootstrap deve davvero rivoluzionare il vostro modo di concepire lo sviluppo web.

Photoshop non è più il centro del nostro lavoro, anzi, probabilmente serve solo marginalmente. Gran parte degli sforzi devono essere rivolti al modo in cui si dispone il contenuto sulla pagina, individuando per ogni step cosa è importante che l’utente legga e faccia e rimuovendo tutto il resto.

Il framework di Boostrap in questo senso ci aiuta perchè, riutilizzando i componenti che ci mette a disposizione, riusciremo a ottenere il risultato che desideriamo in brevissimo tempo. Non serve più sviluppare CSS custom e codice javascript: tutto quello che serve viene già fornito dal framework. Dovremo quindi semplicemente sviluppare la parte HTML rimanendo nei binari di Bootstrap.

Il risultato è garantito: fruibilità dei contenuti ottimale, alto tasso di conversione degli utenti, design responsive, design moderno.

Gli step per sviluppare un’applicazione web moderna

  1. ANALISI
    Definire l’obiettivo principale del sito. Uno e uno solo. Orientare il design al soddisfacimento di questo scopo.
    E’ necessario quindi definire un flusso di azioni che l’utente deve compiere per raggiungere l’obiettivo da noi prefissato. Bisogna guidarlo passo a passo, indicando in modo univoco cosa deve fare. Cerchiamo di definire in ogni schermata una sola azione principale ben visibile (call to action) che l’utente dovrà intraprendere. Il resto deve essere considerato “distrazione” e deve essere rimosso. Siate “talebani” e non abbiate paura di rimuovere gli elementi superflui.
  2. MOCKUP
    Il risultato dell’analisi si trasforma in mockup, ovvero bozze grafiche che mettono in evidenza la disposizione del contenuto. Possono essere disegnate a mano su carta o con strumenti online, l’importante è capire come l’utente troverà i contenuti e le azioni che potrà compiere. Serve un’ulteriore analisi per discutere i mockup prodotti, per focalizzare ancora meglio gli obiettivi prefissati e per rimuovere tutto il resto.
  3. HTML
    Sviluppiamo le pagine HTML usando Bootstrap, riprendendo i mockup approvati. Ci si deve concentrare sulla scrittura dell’HTML, tralasciando di personalizzare CSS e javascript, ma usando solamente quelli forniti dal framework. Va beh… se proprio non resistete, passi pure un piccolo ritocchino al foglio di stile, giusto per caricarci nel vedere un design cool.
  4. MOTORIZZAZIONE SERVER-SIDE
    E’ il momento di motorizzarlo con il proprio linguaggio preferito. Personalmente, preferisco usare Ruby on Rails, ma chiaramente i linguaggi in circolazione sono tanti, a ognuno la propria scelta!
  5. TEST
    A questo punto il sito è utilizzabile. I test dovrebbero servirci a capire se effettivamente l’utente si converte, ovvero segue le indicazioni suggerite per giungere alla meta, obiettivo ultimo dell’applicazione.
    Sulla base del feedback ottenuti dai test dovremmo aggiustare il tiro, limando le eventuali imperfezioni/distrazioni emerse.
  6. CARATTERIZZAZIONE
    E’ giunto il momento di caratterizzare il sito. Il giusto logo, colori e font personalizzati è quello che serve per dare all’utente l’idea di un’immagine forte e decisa.

Conclusioni

Questo modus operandi vi premierà in termini di tempo di realizzazione e di successo del sito. Tempi più brevi di sviluppo ci assicurano di mantenere fermo e chiaro l’obiettivo da raggiungere e abbattono i costi. Il sito sarà apprezzato dagli utenti che trovano esattamente quello che stanno cercando.

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *