{"id":259,"date":"2012-04-25T16:58:05","date_gmt":"2012-04-25T14:58:05","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/tuffiamoci-nel-responsive-prototyping-con-foundation\/"},"modified":"2012-04-25T16:58:05","modified_gmt":"2012-04-25T14:58:05","slug":"tuffiamoci-nel-responsive-prototyping-con-foundation","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/tuffiamoci-nel-responsive-prototyping-con-foundation\/","title":{"rendered":"Tuffiamoci nel responsive prototyping con Foundation"},"content":{"rendered":"

Ci sono centinaia di dispositivi al momento che possono accedere all’intero web<\/a>, come disse una volta Steve Jobs. Questi device hanno capacit\u00e0 e limiti differenti, cose come lo stile dell’input o la dimensione dello schermo, la risoluzione e la forma. Con tutti questi dispositivi pronti a superare i computer tradizionali per quel che riguarda il traffico web del prossimo anno<\/a>, abbiamo bisogno di tool che ci aiutino a creare in maniera responsive per questi dispositivi.<\/p>\n

Ci sono molti strumenti per accelerare il processo di design del front-end, come Blueprint<\/a> o 960.gs<\/a>, ma, fino ad ora, i tool per la progettazione e lo sviluppo del responsive design che tenessero conto di tutti questi diversi dispositivi e capacit\u00e0 erano pochi e rari. C’\u00e8 320 and Up<\/a> di Andy Clarke e Keith Clarke e Columnal<\/a>, un grid system responsive. Recentemente, Twitter Bootstrap<\/a> \u00e8 diventato responsive.<\/p>\n

Oggi, daremo un’occhiata a come potete tuffarvi nel responsive design utilizzando Foundation<\/a>, un leggero framework front-end che vi aiuta a creare prototipi e siti in produzione in maniera rapida. Se avete evitato il responsive design perch\u00e9 vi sembrava complicato o perch\u00e9 non c’erano tool o perch\u00e9 non eravate sicuri della necessit\u00e0 di adottare questo approccio, allora questo \u00e8 il momento giusto per cominciare!<\/p>\n

\n

Un framework leggero<\/h2>\n

Foundation \u00e8 un framework front-end che vi pu\u00f2 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\u00e0 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\u00ec che possiate passare subito al codice senza preoccuparvi inizialmente del CSS personalizzato.<\/p>\n

Quasi sicuramente avrete gi\u00e0 usato o visto dei framework prima d’ora, ma Foundation \u00e8 un po’ diverso: \u00e8 pensato per essere sovrascritto<\/em>. Con i framework front-end si rischia \u201cl’omologazione\u201d: i siti sembrano tutti uguali perch\u00e9 sono stati creati con lo stesso framework.<\/p>\n

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 \u00e8 intenzionale: Foundation vi porter\u00e0 fino al 90% del percorso, ma per il restante 10% dovrete tirare fuori la vostra creativit\u00e0 e il vostro design.<\/p>\n

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

Se siete pi\u00f9 attratti da un grid system semantico, provate l’appropriatamente definito Semantic Grid System<\/a>, 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.<\/p>\n<\/div>\n

\n

Fare prototipi per divertimento e per profitto<\/h2>\n

Foundation d\u00e0 il meglio di s\u00e9 nel rapid prototyping. Il Prototyping \u00e8 un metodo potente e raramente messo in pratica, che \u00e8 ancora pi\u00f9 importante adesso che abbiamo cos\u00ec tanti tipi di dispositivi diversi e cos\u00ec tanti modi in cui le persone possono interagire con le cose che progettiamo.<\/p>\n

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\u00f2 essere l’esperienza sui vari dispositivi.<\/p>\n<\/div>\n

\n

Abbozzare il nostro servizio di condivisione libri BookImpart<\/h2>\n

Per farci un’idea di come funzioner\u00e0 il nuovo servizio e per valutare l’esperienza su diversi device, abbiamo bisogno solo di alcune schermate, ossia:<\/p>\n