Quando si sta per iniziare un nuovo progetto la prima domanda che ci poniamo è: responsive o non responsive? E’ un quesito che merita le giuste valutazioni e che è bene porsi di volta in volta. In fondo un progetto responsive non ha a che fare solo lo sviluppo ma si riferisce ad un processo completo, che deve tenere in considerazione una straordinaria varietà di dispositivi in ogni momento della progettazione: dall’idea iniziale fino alla realizzazione finale.
Il flusso di lavoro non è quasi mai lineare ed ognuno si crea il suo personale modo lavoro, tuttavia la costruzione di prototipi, mockup e wireframe, dovrebbe essere sempre parte integrante del processo.
Fino ad oggi abbiamo creato i nostri wireframe con Photoshop, Keynote, o altri software adatti alla grafica, ma il grosso limite di questo metodo è la staticità: non vengono simulate le interazioni, non ci sono effetti dinamici ed il flusso di navigazione non è rappresentato al meglio.
In un progetto responsive, inoltre, si dovrebbero creare dei wireframe per ogni risoluzione supportata il che renderebbe il procedimento ancora più lungo e innaturale perché la nostra area di lavoro non è un documento statico bensì il browser.
Perché quindi non creare i nostri wireframe in HTML trasformandoli quindi in veri e propri prototipi? In questo modo si risparmia del tempo anche nello sviluppo e possiamo mostrare al cliente una struttura funzionale con tanto di interazioni reali. E non è finita qui: sarà possibile fare anche dei test di usabilità con questi wireframe. Niente male eh?
Gli strumenti per un’ottima prototipizzazione
La realizzazione di questi prototipi non richiede tecniche particolari: ci basta il nostro editor HTML preferito ed il solito markup semantico e qualche stile CSS. Non abbiamo bisogno di layout complessi, non ci servono componenti grafiche definitive. Bastano pochi stili per concretizzare la nostra idea ed avere del materiale sul quale poter fare delle valutazioni più accurate anche in base ad eventuali briefing con il cliente.
Proprio per questi motivi, qualcuno ha pensato bene di facilitarci la vita creando alcuni strumenti pronti all’uso che possiamo inserire nella nostra cassetta degli attrezzi. Eccone alcuni:
Sicuramente il più famoso fra tutti è Bootstrap ma anche 320 and Up è un ottimo punto di partenza. Reputo Foundation 3, tuttavia, il più adatto perché più semplice nell’utilizzo ed il più ricco in termini di componenti utili nella progettazione, quali ad esempio finestre modali, lightbox, interfacce a tab, slider e molto altro.
Andando sul sito ufficiale di Foundation 3 e selezionando l’opzione “Customize Foundation” è possibile creare la propria “build” configurandola in base alle proprie esigenze: il pacchetto scaricato conterrà soltanto le componenti selezionate e, a scelta, alcune pagine già create con dei layout dimostrativi.
Il vantaggio maggiore è che utilizzando le componenti strutturali che Fundation 3 mette a disposizione i nostri wireframe saranno già ottimizzati per molteplici risoluzioni, rendendo la prototipizzazione veloce e snella, a patto però di progettare partendo dai dispositivi con gli schermi più piccoli a quelli con gli schermi più grandi.
Responsive è metodo!
Non è importante lo strumento ma il metodo utilizzato: realizzare un sito “responsive” è più di una semplice tecnica di sviluppo come molti pensano. Si tratta di un flusso di lavoro che richiede una costante attenzione ai dispositivi supportati in ogni sua fase, prima fra tutte la prototipizzazione.
Creare dei wireframe funzionali consente di individuare eventuali criticità in breve tempo, senza contare la possibilità di evidenziare al cliente le indubbie qualità di un layout responsive già nelle primissime fasi del progetto.
Certo, è possibile creare dei wireframe statici su un progetto responsive ma ne vale davvero la pena? Il cambiamento non è così semplice ma facendoci l’abitudine tutta la progettazione di un sito web diventa più più omogenea e meno dispersiva.
Se vi siete già avvicinati al RWD il prossimo passo è entrare in una nuova fase cambiando il vostro modo di pensare al web, diventando completamente responsive.
