Share
Il web come lo conosciamo sta cambiando. In passato, i progettisti e gli sviluppatori dovevano occuparsi solo di un mezzo: lo schermo del computer. Negli ultimi anni, tuttavia, sono sorti una pletora di dispositivi completamente abilitati a Internet con decine di forme e capacità diverse, il che significa che ora dobbiamo progettare i nostri siti Web per adattarli comodamente a quante dimensioni, forme e risoluzioni di schermi è possibile forse pensare a.
Il nostro vecchio approccio al layout a larghezza fissa è fuori questione ora. Quindi cosa facciamo? La risposta, mio caro lettore, sta nel responsive web design.
L'idea di Responsive Web Design, un termine coniato da Ethan Marcotte, è che i nostri siti web dovrebbero adattare il loro layout e design per adattarsi a qualsiasi dispositivo che sceglie di visualizzarlo.
Nel suo libro, intitolato appropriatamente "Responsive Web Design", delinea le tre parti in un sito web reattivo:
Perché questo articolo è destinato ai designer non sviluppatori, e poiché non voglio fare un passo avanti sui contenuti di Ethan per quanto riguarda i contenuti, non parlerò di queste tre cose.
Tuttavia, è importante per te, come designer, capire i concetti di base di RWD in modo da progettare meglio i siti web che diventeranno reattivi quando codificati. Consiglio vivamente di leggere questi tre articoli di Ethan: Fluid Grids, Fluid Images e Responsive Web Design.
Se leggi solo uno di questi, fallo l'ultimo, scritto nel maggio dell'anno scorso. La lettura ha cambiato il modo in cui io e sospetto che molti altri come me, vedono Internet. Il lavoro di Ethan è a dir poco geniale, e credo che tutti coloro che guadagnano da vivere dal web dovrebbero essere obbligati a leggere questo articolo.
Se sei un designer, chi solo disegni, il che significa che non sei responsabile per l'HTML e CSS del sito su cui stai lavorando, molto di questo potrebbe semplicemente andare oltre la tua testa. Ci si potrebbe anche chiedere perché esattamente è necessario conoscere Responsive Web Design.
Ho sempre creduto che chiunque stia progettando un sito web dovrebbe essere l'unico a respirare in esso, attraverso HTML e CSS. Capisco che questo non è ovviamente il caso per molti progetti, e rispetterei le capacità di una persona se dovessero scegliere solo mettere insieme il design o solo scrivi il codice.
È importante capire che un sito Web non è l'uno o l'altro, è un connubio tra design e codice, ciascuno dipendente l'uno dall'altro per creare un'esperienza senza soluzione di continuità. Per imparare veramente come progettare un sito web, tu dovere capire come il progetto verrà successivamente implementato in codice, anche se è solo una comprensione rudimentale.
Ti ricorderò di nuovo: questo articolo è per i designer. Nei paragrafi successivi, discuterò esattamente su come, come designer, dovremmo cambiare il modo in cui progettiamo per adattarsi meglio al processo di progettazione del web reattivo.
Anche se non stai progettando per Responsive Web Design, dovresti progettare con una sorta di sistema a griglia. Come sei il designer moderno e istruito, dovresti già avere una comprensione di cosa significa usare una griglia, quindi salterò i pezzi fritti.
Uno dei pilastri di Responsive Web Design è The Fluid Grid. Essenzialmente, significa che la tua griglia, che era tradizionalmente misurata in pixel, dovrebbe ora essere pensata in termini di percentuale della larghezza totale della pagina. La larghezza effettiva calcolata di ogni colonna in un sito Web reattivo cambia ogni volta che la finestra del browser cambia dimensione e non è possibile garantire che sia uguale tra diversi dispositivi.
Questo è il motivo per cui tu dovere utilizzare una griglia durante la progettazione di Responsive Web Design. È una necessità, non una bellezza. tu non può creare un sito Web reattivo senza un progetto basato sulla griglia; è semplicemente fuori questione, non funzionerebbe.
Sapendo che il tuo progetto non avrà la stessa misura di pixel per ogni colonna come nel tuo design comp, ci sono alcune altre misure che dovresti fare per assicurare che la tua griglia si riduca senza problemi.
Prova ad astenersi dall'usare bordi testurizzati nelle tue colonne, come questo:
Questo genere di cose sarebbe difficile da usare per i tuoi sviluppatori in un sito Web reattivo, perché non sarebbero scalabili in modo orizzontale. Se si rende la colonna più larga o più sottile, i bordi testurizzati avrebbero difficoltà.
I gradienti orizzontali sono un altro no-go.
Per la stessa ragione del punto precedente, vale a dire l'incapacità di ridimensionare orizzontalmente, non farlo. Sì, è possibile con le nuove proprietà CSS3, ma se hai come target un pubblico di utenti meno esperti di tecnologia, molti non avranno un browser compatibile e l'effetto sarà inutile.
Se si dispone di uno sfondo con texture in una colonna, assicurarsi che sia uno che può essere affiancato facilmente. Fare: usa grano, grunge, qualunque cosa. Non: utilizzare una fotografia, un'illustrazione o un'immagine altrimenti non recinabile.
Nel ridimensionare il tuo progetto in orizzontale per adattarsi a schermi più piccoli, arriverà un punto in cui il testo sulla pagina sarà semplicemente troppo grande. Certo, quel titolo da 100pt sembra fantastico nel tuo psd, ma semplicemente non funzionerà su uno schermo di iPhone, ad esempio: sarà troppo grande e il testo dovrà avvolgere diverse righe, riducendo l'impatto della tua decisione originale.
Qui lo sviluppatore, utilizzando le query multimediali CSS, regolerà le dimensioni del carattere per adattarsi meglio allo schermo. Questa è una decisione di progettazione, quindi come designer, dovresti avere voce in capitolo, giusto?
Per aiutare lo sviluppatore e per aiutare a mantenere l'integrità del tuo progetto originale, dovresti decidere quale testo sulla pagina deve rimanere costante, cioè mantenere le stesse dimensioni a qualsiasi larghezza dello schermo e quale testo deve essere regolato. Un buon esempio di testo di dimensioni costanti dovrebbe essere la copia del corpo, o piccole intestazioni che fungono da versione più grande della copia del corpo.
Dovresti anche decidere, riguardo al testo che verrà modificato, Come dovrebbe essere regolato.
Ecco il sbagliato modo per farlo: X dovrebbe essere sempre 20 volte più grande di y. Non solo questo sta pensando a un grosso problema per lo sviluppatore, ma non ha molto senso nella tela reattiva, perché stai prendendo in considerazione una costante, un valore che non cambierà mai indipendentemente dalle dimensioni dello schermo. Per RWD, questo è un errore enorme, in quanto non tiene adeguatamente conto della fluidità intrinseca del web.
Ecco il destra modo per farlo: X dovrebbe sempre essere 1,5 volte più grande di y. In questo modo accetta che l'unico vero il che significa che un disegno esce dalla dimensione del font è quanto grande o piccolo il testo viene confrontato con l'altro testo sulla pagina. Un valore costante, come 24pt o 67pt, non ha significato.
Una volta capito tutto, assicurati di trasmettere queste informazioni allo sviluppatore. Questo è l'unico modo per assicurarti che le tue decisioni, come il designer, vengano visualizzate nella pagina web effettiva che gli spettatori caricheranno nel loro browser e si divertiranno.
Il pezzo finale nel puzzle Responsive è Media Queries. Nel caso tu non sia familiare, Media Queries è un modo per applicare le regole CSS alla pagina in base (per i nostri scopi) alla dimensione del browser di visualizzazione.
L'incredibile potenza di questo è che puoi regolare, e in effetti riprogettare, l'intero layout del tuo sito web per adattarlo a un browser più piccolo o più grande rispetto a quello per cui avevi originariamente progettato.
Per progettare al meglio questa eventualità, dovresti iniziare a pensare alle diverse parti del tuo design, come il contenuto principale, la barra laterale, l'intestazione e la navigazione, non come pezzi di un puzzle che devono rimanere nello stesso posto l'uno rispetto all'altro , ma come moduli che può essere riorganizzato, ridimensionato e mescolato senza perdere il loro significato originale.
Ecco un esempio: immagina di progettare un sito Web simile a questo (sono sicuro che hai già lavorato con layout simili):
La parte cruciale di questo esempio è l'identificazione di gruppi di elementi per cui devono stare insieme qualunque disposizione. Ad esempio, tutti i link di navigazione devono stare insieme, perché altrimenti non avrebbero senso. Questo è un modulo, una sezione di informazioni che può essere spostata tra gli altri moduli senza perdere significato.
Costruire il tuo sito con questi moduli in mente rende facile immaginare come il tuo layout si adatterà alle diverse dimensioni del viewport. Per esempio:
Guarda come nonostante i moduli si trovino in luoghi diversi, visualizzano ancora le stesse informazioni dell'originale, solo in una forma più facilmente digeribile dai dispositivi mobili o da altri browser di dimensioni differenti.
Non c'è nulla che tu debba cambiare nel tuo layout per far funzionare questa modularità, è solo un modo diverso di guardare la stessa immagine. Speriamo però che questa nuova prospettiva ti aiuti a prendere decisioni più consapevoli mentre lavori ai tuoi progetti futuri di design.
Come su internet, Responsive Web Design è evolutivo, non rivoluzionario. È semplicemente il naturale passo successivo per il web, non un completo ripensamento di tutto. Come designer, dobbiamo continuamente adattare i nostri flussi di lavoro, e questa volta non è diverso.
Web design reattivo è il futuro, o almeno lo sarà quando sviluppatori e progettisti lo apprezzeranno allo stesso modo. Come web designer e sviluppatori, siamo gli unici con il potere di vedere questo meraviglioso nuovo standard giungere a buon fine. Fallo succedere, per te, per me, per internet in generale!
Accentsconagua