Tuffiamoci nel responsive prototyping con Foundation

Un framework leggero#section1

Foundation è un framework front-end che vi può aiutare a creare cose rapidamente. L’abbiamo realizzato in ZURB, come ossatura e punto d’avvio generale per i nostri progetti interni e per quelli dei nostri clienti. Non solo include una griglia responsive a 12 colonne, annidabili, che gli dà molto potere sul layout, ma predefinisce con semplici stili altri elementi e costrutti comuni: la navigazione, le tab, i pulsanti, la tipografia, le form e altro ancora, così che possiate passare subito al codice senza preoccuparvi inizialmente del CSS personalizzato.

Quasi sicuramente avrete già usato o visto dei framework prima d’ora, ma Foundation è un po’ diverso: è pensato per essere sovrascritto. Con i framework front-end si rischia “l’omologazione”: i siti sembrano tutti uguali perché sono stati creati con lo stesso framework.

Nei nostri esempi, useremo gli stili di base di Foundation. Si noti tuttavia che questi stili non si prestano al design finale di un sito ed è intenzionale: Foundation vi porterà fino al 90% del percorso, ma per il restante 10% dovrete tirare fuori la vostra creatività e il vostro design.

Potrete anche notare che Foundation non è proprio l’ideale come potreste aspettarvi: non è completamente semantico, non è mobile-first. Abbiamo creato Foundation per aiutare le persone ad avviare un progetto in maniera rapida, senza bisogno di altri tool.

Se siete più attratti da un grid system semantico, provate l’appropriatamente definito Semantic Grid System, che usa Less per generare una griglia in cui i dati sono completamente separati dalla visualizzazione. Per un approccio mobile-first, provate 320 and up.

Fare prototipi per divertimento e per profitto#section2

Foundation dà il meglio di sé nel rapid prototyping. Il Prototyping è un metodo potente e raramente messo in pratica, che è ancora più importante adesso che abbiamo così tanti tipi di dispositivi diversi e così tanti modi in cui le persone possono interagire con le cose che progettiamo.

Per il nostro scopo, supponiamo di voler creare un servizio di condivisione di libri, qualcosa che non vi consiglieremmo di portare avanti davvero, considerando l’avanzare dei Kindle e di altri eReader, ma si tratta di un esempio divertente. Cominceremo con l’abbozzare quello che vogliamo, poi realizzeremo un rapido prototipo del front-end per avere un’idea di quella che può essere l’esperienza sui vari dispositivi.

Abbozzare il nostro servizio di condivisione libri BookImpart#section3

Per farci un’idea di come funzionerà il nuovo servizio e per valutare l’esperienza su diversi device, abbiamo bisogno solo di alcune schermate, ossia:

• l’homepage, dove l’utente può scegliere un libro che vorrebbe leggere,
• una schermata del libro per mostrare chi ce l’ha, dove si trova e quello che il proprietario vorrebbe leggere in cambio,
• una dialog box modale che permetta all’utente di scegliere uno dei propri libri da offrire in cambio,
• una comunicazione in homepage che confermi che lo scambio è avvenuto con successo.

Naturalmente, potete vedere i buchi nel prototipo (login, registrazione, aggiunta libri, casi limite come la non-accettazione, etc.), ma prenderemo in considerazione solo questo flusso. Cominceremo, così come facciamo sempre per l’interface design, con degli schizzi.

Su BookImpart iniziamo a creare la homepage con il nome del sito e alcune semplici azioni di login (che non collegheremo al codice che le deve gestire). Le categorie si trovano sul lato sinistro per incoraggiare l’esplorazione sui device dotati di schermi grandi e vi abbiamo messo tre libri che pensiamo interessino ai lettori. Abbiamo usato dei tab per mostrare gli scambi più gettonati, i libri più popolari e i libri di tendenza.

Fig 1. La homepage del nostro sito fittizio. La navigazione a sinistra e una sezione di contenuto principale.

Nella schermata del libro (nel nostro prototipo, colleghiamo ogni libro a questa pagina) manteniamo la navigazione e mostriamo in grande la copertina del libro, il titolo e le informazioni. Mostriamo anche un’elenco dei libri che questo utente possiede e che possono essere scambiati per un libro che si sta cercando, così che si sappia quali sono le possibili opzioni e se ce ne sono. Potremmo perfino fare un accordo con il Times per poter caricare sul nostro sito le loro recensioni.

Fig 2. La pagina di ogni singolo libro del nostro servizio, con il libro stesso e quelli con cui può essere scambiato.

Una volta che l’utente seleziona l’azione Swap, usiamo Reveal (un plugin che attiva una finestra di dialogo modale all’interno di Foundation) per mostrare una modale con i libri che gli utenti possono scegliere di scambiare con quello della pagina. Quando l’utente ha scelto, lo portiamo alla pagina di conferma.

Fig 3. Modali come questa sono semplici da realizzare usando Reveal.

Qui mostriamo all’utente cosa stanno dando via e cosa stanno prendendo. Forse dovremmo anche dire come avverrà lo scambio (via posta, di persona, etc.) e dargli un modo per tornare all’homepage.

Fig 4. Un’ultima pagina, la schermata di conferma ed il nostro prototipo è pronto.

In un progetto normale, potremmo dover fare diverse modifiche a questi schizzi, chiedere un feedback al cliente o ai nostri colleghi, ma in questo caso saltiamo questi step. Da questo momento in poi, se volete seguire lo sviluppo di questo codice, scaricate il pacchetto Foundation da foundation.zurb.com. Potete lavorare con il file index.html che vi forniamo e duplicarlo per tutte le pagine aggiuntive.

Programmare i wireframe#section4

Un modo di pensare ai prototipi creati rapidamente è quello dei wireframe programmati. È da un po’ che questa pratica si è diffusa, ma solo recentemente è diventato pratico creare dei wireframe responsive tramite codice.

La griglia che ho menzionato precedentemente gestisce la parte più grossa della nostra prototipizzazione. È larga 12 colonne ed è completamente fluida: tutto è basato sulle percentuali, con specifiche media query per sistemare la visualizzazione per i piccoli device. Un semplice layout potrebbe avere questo aspetto:

<div class="container">
  <div class="row">
    <div class="eight columns">Main Content</div>
    <div class="four columns">Sidebar</div>
  </div>
</div>

Qui il container ha del padding left e right, la riga ha una max-width arbitraria per la leggibilità e le colonne creano un layout di pagina “due terzi/un terzo” Potremmo anche annidare le colonne in questo modo, per creare dei layout più complessi:

<div class="container">
  <div class="row">
    <div class="eight columns">
      <div class="row">
        <div class="two columns">Avatar</div>
        <div class="ten columns">Article Title</div>
      </div>
    </div>
      <div class="four columns">Sidebar</div>
  </div>
</div>

I fanatici dei sistemi a griglie noteranno che non stiamo usando un sistema come semantic.gs per separare completamente i dati dalla visualizzazione, per un paio di motivi: usare un sistema come questo richiede un preprocessore come Sass o Less e noi non andiamo pazzi per il CSS che si ottiene alla fine usando questo approccio. È una buona idea, ma pensando in maniera pragmatica, la sintassi del grid system tradizionale ci sembra ancora l’opzione migliore.

All’interno di questo prototipo useremo anche i pulsanti e le tab di Foundation, così come alcune immagini segnaposto gentilmente offerte dall’eccellente servizio placehold.it. Tornando alla bozza della nostra homepage, abbiamo fatto delle annotazioni per mostrare come vorremmo che fosse programmata:

Fig 5. Abbiamo fatto degli schizzi all’interno per mostrare come suddivideremo il layout usando la griglia di Foundation.

Niente più fermate: ecco come appare il codice.

La nostra homepage è in realtà la pagina più complicata di cui faremo un prototipo ed è piuttosto semplice metterla insieme. La griglia gestisce la maggior parte del layout. Ne abbiamo già visti alcuni esempi, ma guardiamone un altro. Vedete la sezione Top Swaps, una tab verso il fondo?

Fig 6. Mettendo le righe all’interno delle nostre tab possiamo facilmente creare questo tipo di layout.

Potremmo usare degli stili personalizzati per creare il layout in quelle entry, ma con Foundation possiamo semplicemente annidare la griglia. Mentre l’intera colonna è una sezione .eight.column, possiamo aggiungere righe in più all’interno del tab container, ciascuna delle quali può contenere altre dodici colonne. Quindi, le nostre entry della lista diventano due colonne, sette colonne e tre colonne da sinistra a destra.

Le tab stesse sono piuttosto semplici. Fare in modo che mostrino contenuto differente non richiede JavaScript (né CSS). La sintassi per i tab è così:

<dl class="nice contained tabs">
  <dd><a href="#top" class="active">Top Swaps</a></dd>
  <dd><a href="#popular">Popular</a></dd>
  <dd><a href="#trending">Trending</a></dd>
</dl>

<ul class="nice tabs-content contained">
  <li class="active" id="topTab">
    Books go here...
  </li>
  <li class="active" id="popularTab">*changed indent here*
    Books go here...
  </li>
  <li class="active" id="trendingTab">*and here*
    Books go here...
  </li>
</ul>

Quando mappiamo i link agli specifici ID nelle tab, come abbiamo mostrato sopra, il JavaScript built-in cambierà tab automaticamente e applicherà le classi corrette. Potremmo anche collegare questa pagina con una tab preselezionata, con index.html#trending, index.html#popular, etc.

Passiamo infine ai pulsanti. In questo prototipo abbiamo fatto in modo che tutto quello che è cliccabile all’interno del nostro prototipo abbia lo stesso colore dei link (blu) e abbiamo rimpicciolito tutto il resto. Per creare i vari pulsanti nel prototipo, creiamo semplicemente delle ancore con una classe “button”. Possiamo poi aggiungere alcune classi per decorarli:

• “nice” dà un po’ di profondità e luminosità, semplicemente per facilitare i click,
• “radius” gli assegna un angolo leggermente arrotondato,
• “round” li arrotonda completamente ai lati.

Nella nostra implementazione:

• “white” rende il pulsante bianco invece che blu elettrico come da default. L’abbiamo usato nell’header e nella sidebar.
• “large” è usato solo nella pagina Book, ma abbiamo usato anche “small” per il pulsante di registrazione.

Risulta molto semplice da scrivere e perfettamente human-readable: è semplice da sovrascrivere per gli eventuali stili. Guardiamo la pagina Book: potete cliccare su una qualsiasi delle thumbnail dei libri sulla homepage per proseguire.

Nella pagina del libro abbiamo mantenuto alcune parti dell’homepage, come l’header e la sidebar. Infatti, l’intero layout per questa pagina è creato utilizzando la griglia, le immagini segnaposto e i pulsanti/testo. Quello che potreste aver notato è che le immagini hanno dimensioni in pixel (fornite da placehold.it), ma non ne siamo molto preoccupati in questo momento: di default, Foundation non permetterà alle immagini di essere più grandi della griglia che li contiene, quindi sono tutte della dimensione adatta al layout che desideriamo.

Se cliccate sulla grande call to action “Swap for This”, vedrete l’unico nuovo elemento su questa pagina: una modale di Reveal. Abbiamo aggiunto dopo il vicino .container questo elemento:

<div id="swapModal" class="reveal-modal">
  <h5>Swap for Neverwhere:</h5>
  <h3>Jason M. is willing to swap Neverwhere for one of these:</h3>
  <ul class="block-grid four-up">
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
  </ul>
  <a href="book.html">Never Mind</a>
  <a class="close-reveal-modal">×</a>
</div>

Non c’è niente di strano riguardo al contenuto nella nostra modale: è molto semplice, a griglia. La cosa interessante è il modo in cui la chiamiamo: con un ID sulla modale (#swapModal). Possiamo chiamarla assegnando un attributo data ad ogni ancora sulla pagina, in questo caso il pulsante CTA “Swap for This”. Ecco com’è:

<a href="" class="nice large blue radius button" data-reveal-id= »
"swapModal">Swap for This</a>

Reveal, il plugin per le modali che si trova in Foundation, tiene traccia dei data-reveal-id e gli attacca le azioni appropriate al posto nostro. Ci manca solo una semplice pagina per finire: la schermata di conferma. Cliccate su una qualunque delle thumbnail all’interno della modale “Swap” per raggiungere l’ultima pagina del nostro prototipo.

Si tratta di una pagina semplicissima che spiega quello che abbiamo fato e come funzionerà il nostro servizio fittizio di scambio libri. Dal momento che abbiamo così poco contenuto, lo vincoliamo al centro della schermata sui dispositivi più grandi, usando le classi di offset della griglia. Sarebbe così:

<div class="row">
  <div class="seven columns offset-by-two">
    <h3>All set!</h3>
    <p>We've started the swap between you and Jason...</p>
  </div>
</div>

Ogni colonna della griglia può avere un offset che varia tra le due e le dieci colonne sui cui può spostarsi, il che risulta comodo per creare spazio o indentare il layout.

Abbiamo coperto tutti gli elementi che usiamo in questo prototipo, sebbene ciò sia solo una piccola parte di quello che si può fare. Ora, quello che abbiamo fatto va bene per i device più grandi (come i laptop o i desktop), ma a quanto pare ci stiamo perdendo qualcosa…

Gli altri device…#section5

Questo articolo non è incentrato sul mobile-first: se lo fosse stato, avremmo fatto subito le nostre bozze su degli sketchsheet per smartphone o per diverse dimensioni. L’approccio con cui noi abbiamo più familiarità, e che riteniamo essere il più semplice per cominciare a pensare in maniera responsive, consiste nel partire dai dispositivi più grandi per poi passare a quelli più piccoli. Adesso che abbiamo sistemato la parte più grande, diamo un’occhiata a quello che può fare per noi Foundation così com’è.

Fig 7. La homepage prototipo vista su un desktop e su un piccolo device mobile.

Come probabilmente avrete intuito dagli screenshot, il comportamento di default di Foundation consiste nel “linearizzare” la pagina, impilando la griglia in verticale ed impostando la larghezza di ogni colonna al 100%. Nella maggior parte dei casi, questo ci toglie molto lavoro.Le persone sono davvero abituate a fare lo scroll in verticale di una pagina e lo trovano comodo se la larghezza orizzontale è limitata. In alcuni casi, tuttavia, potrebbe non essere l’ideale o perlomeno insufficiente.

Fig 8. Di default, stiamo usando troppo spazio in alto per la navigazione.

Se arrivassimo su questa pagina con uno smartphone, vedremmo molta navigazione prima di raggiungere un solo libro. Le persone hanno la volontà di esplorare un po’ sui piccoli dispositivi, ma più di qualunque altra cosa bramano il contenuto. Possiamo darglielo subito attraverso un paio di “affordance” di Foundation: ordinamento del codice e classi per la visualizzazione su mobile.

Vogliamo che i libri che mostriamo in homepage appaiano per primi e poi mostreremo la navigazione. Dal momento che la pagina è disposta così com’è, abbiamo scritto per prima la navigazione. Quando la pagina cambia il proprio layout per adattarlo ad un piccolo device, sarà prima nella pagina. Dobbiamo scrivere la navigazione per ultima, dopo il contenuto, ma sui grandi dispositivi l’abbiamo a sinistra. Facciamo ciò scrivendo la nav per ultima, ma “tirandola” a sinistra e “spingendo” il contenuto a destra, in questo modo:

<div class="row">
  <!-- pushes this three columns to the right -->
    <div class="nine columns push-three"> 
      Main Content...
    </div>
  <!-- pulls this nine columns to the left -->
    <div class=”three columns pull-nine”> 
      Sidebar...
    </div>
</div>

Adesso abbiamo la navigazione principale dove vogliamo che sia, ma potrebbero ancora esserci degli utenti che vogliono esplorare una categoria come prima azione. Per aiutarli, mettiamo subito un costrutto nav molto più piccolo (una semplice lista di selezione, per quelli che sono i nostri scopi in questo caso), così:

Fig 9. Con alcuni semplici cambiamenti alle classi nel markup possiamo gestire molto meglio il layout per i device più piccoli.

Con la classe .show-on-phones (anche: .hide-on-desktops, .show-on-tablets, etc.,) mostreremo quell’elemento solo sui piccoli device, ossia su qualunque cosa sia più piccola del tablet medio. Le classi di device sono ovviamente qualcosa di arbitrario (Che dimensione ha un tablet? I telefoni sono tutti uguali?) ma con prospettiva pragmatica rendono semplice la gestione.

Un’ultima cosa a cui dovremmo fare attenzione è l’uso della griglia a quattro colonne per piccoli device di Foundation. In alcuni casi, ad esempio questa entry nell’homepage, non vogliamo davvero che tutto semplicemente si “impili”, specialmente non la copertina di un libro in una lista (che probabilmente sarà molto piccola). Attaccheremo la griglia a quattro colonne per i telefoni alle colonne esistenti, in questo modo:

<div class="row">
  <!-- this column will be 2 of the 4 small device columns wide -->
    <div class="four columns phone-two">
      <a href="book.html"><img src="http://placehold.it/300x400" /></a>
      <p><a href="book.html"><strong>Neverwhere</a>
      <br />Neil Gaiman</p>
    </div>
  <!-- this column will be 2 of the 4 small device columns wide -->
    <div class="four columns phone-two">
      <a href="book.html"><img src="http://placehold.it/300x400" /></a>
      <p><a href="book.html"><strong>Good Omens</strong></a>
      <br />Neil Gaiman and Terry Pratchett</p>
    </div>
</div>

Abbiamo implementato questa cosa in alcuni punti all’interno del codice completo, se volete potete controllare. Ora il nostro layout è più conciso e rappresentativo del display che stiamo osservando. Molto meglio.

Copriamo solo parzialmente questo argomento qui: idealmente, dovremmo far passare ogni schermata del nostro prototipo e fare degli aggiustamenti per le varie categorie di dispositivi (l’abbiamo fatto nel codice che potete scaricare). Essere in grado di fare questi rapidi cambiamenti è il motivo per cui fare prototipi programmandoli (o fare prototipi in generale) è così utile. Il nostro servizio di condivisione di libri sta migliorando ad ogni revisione e non stiamo solo osservando delle schermate statiche: possiamo vedere come funziona in realtà e su vari dispositivi, prima di fare commit e mettere il nostro codice in produzione.

Quando lavorate in maniera responsive, assicuratevi di non pensare solamente al layout: c’è di più nel creare un sito o un’app responsive e future-friendly. Ottimizzate i vostri media (caricamento di immagini e video). Potete inviare diversi file dal back-end o usare qualcosa come le immagini responsive di Scott Jehl. Anche l’articolo sulle immagini responsive di Mat Marquis val bene una lettura.

Ricordatevi che i dispositivi touch non hanno uno stato hover. Ricordatevi delle differenze nelle intenzioni degli utenti a seconda del device che stanno usando. Avete già sentito queste cose, ma adesso sono più critiche che mai.

Fate subito prototipi e fateli spesso e ovunque#section6

I vostri prodotti e i vostri siti saranno migliori se farete dei prototipi prima ed in maniera più rapida, così come per quanti più device potete. Foundation è stato creato per aiutarvi a fare ciò e la recente ondata di strumenti simili è estremamente rincuorante. Nei prossimi cinque anni, i device saranno lo scopo del gioco e non stiamo parlando solo della dimensione dello schermo o del browser. Cambieranno le interfacce, l’input e il modo in cui useremo il web. Dobbiamo prepararci già adesso.

Illustrazioni: {carlok}