Contenuto
- Progettare per l'ignoto
- Un approccio pragmatico al design
- Diventare indipendenti dal layout
- Codifica progressivamente
- Immergersi nel mark-up
Sembra che tutti stiano parlando di responsive web design in questi giorni, e con una buona ragione; Poiché il numero di dispositivi abilitati per il Web continua a crescere, ciascuno con capacità e caratteristiche diverse, non è più sensato creare siti web a larghezza fissa.
La verità è che non lo è mai stato. Eppure, fino ad ora era considerata una best practice progettare esperienze che formassero una serie di presupposti, che si riferissero alla risoluzione dello schermo, alla larghezza di banda o al metodo di input. Se hai mai progettato un sito web con una larghezza di 960 px, solo per visualizzarlo sul piccolo schermo del netbook di un amico (e sì, sto scrivendo per un'esperienza dolorosa qui), capirai perché questo non è stato un approccio particolarmente intelligente. Ora, con smartphone e tablet gettati nel mix, è chiaro che i nostri metodi tradizionali non sono più adatti allo scopo.
Per fortuna, l'avvento delle query multimediali CSS e il crescente riconoscimento che il Web è un mezzo a sé stante, significa che stiamo iniziando ad abbracciare la vera natura della piattaforma, accettando che la sua universalità è un punto di forza, non una debolezza.
Nei prossimi cinque giorni, ti guiderò attraverso una tecnica che riconosce questo fatto: web design reattivo. Sviluppato da Ethan Marcotte, questo combina layout fluidi, immagini flessibili e query multimediali per aiutarci a creare siti che si adattano con grazia a qualsiasi ambiente incontrano.
Dimostrerò questo approccio mostrandoti come creare una semplice galleria multimediale. Nei miei esempi, creerò un piccolo sito web per documentare un recente viaggio su strada che ho intrapreso negli Stati Uniti, ma sentiti libero di personalizzare il codice e il design in base alle tue esigenze.
Progettare per l'ignoto
Gran parte di questo tutorial sarà incentrato sull'aspetto di sviluppo del responsive design. Ma prima di addentrarci nel codice, prendiamoci un momento per pensare a come potremmo progettare un sito web che teoricamente potrebbe avere layout infiniti.
Ora sono fortunato perché posso progettare interfacce e sviluppare il codice di frontend che li renda reali. Questa non è un'abilità unica, ovviamente, se lavori per te stesso, probabilmente sei lo stesso. Ma è certamente vantaggioso capire in che modo i contenuti possono adattarsi e ridursi quando si creano progetti fluidi.
Lavoro anche come parte di un team più ampio in cui il mio ruolo è più specializzato. In un tale ambiente, il visual designer può concentrarsi esclusivamente sulla traduzione di wireframe in composizioni attraenti e coinvolgenti (firmate, pixel perfette). E non è insolito che gli sviluppatori si trovino separatamente, traducendo questi layout in markup e CSS snelli ed efficienti.
Tuttavia, tali flussi di lavoro lineari e separati si interrompono rapidamente una volta che iniziamo a valutare come i progetti si adatteranno ai diversi ambienti. Tanto quanto qualsiasi nuovo strumento o tecnologia, dovremmo anche considerare modalità di lavoro più collaborative e agili. Molti dei problemi più complicati riscontrati durante la progettazione di siti Web reattivi possono essere risolti semplicemente attraverso la conversazione, la sperimentazione e l'iterazione.
Un approccio pragmatico al design
Questo non vuol dire che non ci sia spazio per i progettisti di pensare a come un progetto può funzionare al di fuori dei confini di un particolare dispositivo.
In Clearleft, iniziamo il design visivo dalla prospettiva del desktop. Iniziamo definendo un linguaggio di design e un'estetica visiva generali, spesso basando le esplorazioni iniziali su un contenuto centrale. Ad esempio, se stiamo progettando un sito di cibo, inizieremo con una pagina di ricette; per un sito di notizie, una pagina di storia.
Non solo questa è una pagina importante del sito, ma probabilmente include abbastanza contenuti strutturati per permetterci di costruire una tavolozza tipografica. Penseremo anche a come il layout potrebbe adattarsi, anche se in questa fase è solo nella parte posteriore della nostra mente.
Un modo utile per sottoporre a stress test un progetto è prendere una pagina di questo tipo e adattarla a uno schermo più stretto (~ 320 px di larghezza). Probabilmente scoprirai che alcuni aspetti del design dovranno essere ripensati affinché funzionino a questa larghezza. Ecco alcuni esempi:
- Tipografia: I titoli di grandi dimensioni possono funzionare bene su layout più ampi, ma su schermi più piccoli possono occupare molto spazio verticale e quindi richiedere uno scorrimento aggiuntivo. Man mano che le lunghezze delle linee cambiano, dovresti considerare anche l'altezza delle linee e altri trattamenti tipografici.
- Collegamenti: Come funzionerà il tuo design sui dispositivi touchscreen? Anche se non abbiamo ancora un modo semplice per rilevarli (nel senso che dovremmo tenere in considerazione il tocco in tutti gli aspetti del nostro design), progettare per uno schermo più stretto può darci l'opportunità di pensare alle aree target per i collegamenti e altri elementi interattivi . Le linee guida di iOS raccomandano che siano almeno 44 pixel / punti quadrati, che è una buona cifra a cui mirare.
- Navigazione: Questo sarà probabilmente il componente più imbarazzante di qualsiasi design reattivo, soprattutto se il tuo sito ha molte sezioni e una gerarchia profonda. Brad Frost ha scritto un riepilogo di alcuni diversi approcci alla navigazione attualmente presi in considerazione.
- Contenuto superfluo: Alcuni contenuti non sono richiesti? Gli altri contenuti devono essere visualizzati solo in determinati scenari? Non sono favorevole a nascondere i contenuti in base al dispositivo utilizzato da un utente, ma tecniche come il caricamento condizionale (che esamineremo più avanti questa settimana) possono aiutarci a offrire pagine più piccole che caricano solo contenuti complementari quando necessario.
La progettazione di due layout contrastanti rafforza l'idea che un design si adatterà, mentre risolverà i potenziali trucchi sin dall'inizio. Anche se questo suona come un raddoppio del lavoro, tieni presente che non stiamo progettando ogni pagina con una precisione pixel perfetta. Invece, ci stiamo concentrando sulla creazione di un linguaggio di progettazione scalabile, uno che si evolverà non appena iniziamo a implementarlo nel codice e uno basato su singoli moduli e componenti.
Diventare indipendenti dal layout
Non sorprende che, per un settore che storicamente ha trattato il web come la stampa, i layout a larghezza fissa hanno permeato molti dei risultati che produciamo. Quando iniziamo a progettare per un mezzo adattabile, vengono presi in considerazione nuovi approcci che ci consentono di risolvere problemi e comunicare idee pur riconoscendo la natura fluida del mezzo. Ecco alcuni dei miei preferiti:
- Diagrammi di descrizione della pagina: Mentre i wireframe possono spesso implicare il layout (e quindi assumere un certo tipo di dispositivo), i diagrammi di descrizione della pagina rimuovono questo presupposto e descrivono invece i singoli componenti, disposti nel documento in termini di priorità.
- Piastrelle stile: Quando comunichiamo idee di design con i clienti, possiamo trovarci a presentare "dipinti di siti web". Se non stiamo attenti, i clienti chiederanno giustamente di vedere concetti che dimostrano come apparirà un design anche su altri dispositivi. Questo può costringerci a una situazione insostenibile di produzione di più pagine per più dispositivi. Samantha Warren ha pensato a questo problema e ha inventato delle tessere di stile. Questi si collocano da qualche parte tra un mood board (ma meno vago) e composizioni completamente realizzate (ma meno precise) e ci aiutano a comunicare la tipografia, gli stili dei pulsanti e i trattamenti delle testate. Incoraggiano anche un livello più maturo di discussione con i nostri clienti.
- Mobilita gioco di design: Questo esercizio può funzionare molto bene durante i workshop di progettazione collaborativa. In questo esercizio, tutti annotano su Post-it gli elementi che possono apparire su una determinata pagina. Questi vengono poi attaccati al muro in ordine di importanza, come se apparissero linearizzati su un telefono cellulare. La discussione che ne risulta può generare alcune conclusioni sorprendenti. Ad esempio, potresti renderti conto che la navigazione non è il componente più importante della pagina. Questo potrebbe seguire il design, dove un collegamento di salto nella parte superiore della pagina si collega alla navigazione nel piè di pagina.
Ovviamente c'è ancora spazio per gli strumenti che stiamo già utilizzando, ma quando progettiamo un sito web in termini generali, dobbiamo tenere presente che il layout non è più noto.
Codifica progressivamente
Per fortuna, non dobbiamo preoccuparci del design visivo nell'esempio su cui stiamo lavorando poiché il duro lavoro è stato fatto per noi! Invece, possiamo concentrarci sulla codifica del nostro design in un sito Web completamente reattivo.
Un'altra cosa prima di iniziare. È importante ricordare un principio fondante del mezzo con cui stiamo lavorando: l'universalità. Ciò significa non solo costruire per i dispositivi abilitati al web di oggi, ma anche garantire la compatibilità con quelli di ieri e di domani. John Allsopp ha descritto perché questo principio è importante nel suo post The Next 6 Billion:
"I prossimi sei miliardi sono bambini nelle zone rurali dell'India, Africa, Cina, dove l'accesso all'energia e alle reti può essere intermittente. È qualcuno a Sumatra in una scatola di Wintel vecchia di dieci anni. Sono persone che parlano centinaia di lingue diverse, con dozzine di lingue diverse. sistemi di scrittura. Sono le persone che sono le prime nella loro famiglia a essere in grado di leggere e scrivere. È il 20% delle persone in tutto il mondo che non sa leggere o scrivere.’
Possiamo tracciare la nostra comprensione del web guardando le diverse mode (in mancanza di una parola migliore) che hanno preso piede nella nostra professione: standard web, accessibilità, JavaScript discreto ... sono tutte varianti sullo stesso tema: miglioramento progressivo. Lo stesso vale per il responsive web design. Per costruire un file veramente sito web reattivo consiste nel creare un sito che non sia solo retrocompatibile, ma anche compatibile con il futuro.
Immergersi nel mark-up
Ok, basta con il preambolo, è ora di aprire un editor di testo.Il nostro designer ci ha fornito un design orientato al desktop ed è stato così gentile da fornire esempi di come questo potrebbe apparire anche in una visualizzazione più ristretta.
Potrebbe essere allettante codificarli separatamente, ma suggerirò un approccio diverso. Posizionando i componenti separati - o modelli - che compongono il design su una singola pagina, possiamo creare un portfolio di modelli. Questo ci consente di sviluppare componenti al di fuori dei confini di qualsiasi layout di pagina e ci darà qualcosa a cui fare riferimento in seguito per qualsiasi test di regressione. Vediamo il markup iniziale su alcuni dispositivi diversi:
Visualizza il nostro portafoglio di modelli con markup
Be ', che sia dannato: abbiamo già un sito web reattivo! Il nostro contenuto si sta adattando ai confini di ogni dispositivo, sia che si tratti di un nuovo iPad di fantasia o di un feature phone scartato. Funziona anche in un browser di solo testo come Lynx.
Grazie ai principi di base dell'universalità, il web è reattivo per impostazione predefinita. È fantastico, ma significa anche che qualsiasi cosa faremo al codice d'ora in poi potrebbe compromettere questa adattabilità nativa.
Domani: Procederemo con cautela e inizieremo ad applicare il primo aspetto del responsive design: tipografia e griglie fluide.
