Il responsive design è la nostra migliore soluzione al fenomeno del web ubiquitario. Internet è accessibile da persone ovunque su innumerevoli dispositivi incredibilmente variabili e le pagine sensibili forniscono un modo facile e funzionale per spiegare queste differenze.
Oggi faremo un passo indietro rispetto alle discussioni sulle domande dei media e sul gergo tecnico e concentreremo gli aspetti fondamentali su come le tecniche reattive influenzano il processo di progettazione. Quali punti importanti devi tenere a mente quando ti avvicini a un progetto di web design reattivo? Continuate a leggere per scoprirlo.
Il design è più del CSS
Ultimamente si è discusso molto sulle tecniche coinvolte nella progettazione reattiva da un punto di vista tecnico: media query, larghezze percentuali, ecc. Tuttavia, una volta padronanza dei trucchi CSS per l'implementazione di un design reattivo, ci si trova di fronte a un ostacolo più grande: il vero design.
"È abbastanza difficile realizzare un design professionale quando ti preoccupi di un singolo formato, quanto più difficile sarà per il responsive design ??Sembra un compito scoraggiante, no? Stai cercando di creare un'esperienza coesiva e coerente, perfetta per quasi tutte le dimensioni dello schermo. È abbastanza difficile realizzare un design professionale quando ti preoccupi di un singolo formato, quanto più difficile sarà per il responsive design?
Questo è un motivo chiave per l'esitazione di molti progettisti ad adottare il responsive design come pratica predefinita. L'obiezione più frequente che sento sia dai progettisti che dai loro clienti è che il design reattivo sembra un'impresa piuttosto impegnativa nel tempo. I progettisti sono costretti a cercare di giustificare un aumento dei prezzi o di mangiare ore in nome della produzione di un lavoro di qualità.
Fortunatamente, da un punto di vista dei CSS, progetti come Skeleton hanno davvero ridotto l'impegno nel programmare il tempo. Ciò non significa che tu sei fuori dai guai, tuttavia, come designer, dovrai comunque concentrarti sulla creazione di un'esperienza solida per ogni utente e ciò significa investire un pensiero serio su come il processo di progettazione cambia alla luce di questa nuova metodologia . Diamo un'occhiata ad alcune delle considerazioni principali da tenere a mente.
Photoshop non lo taglierà
Con un design reattivo, la progettazione nel browser non è più una moda passeggera, è una necessità. Puoi definire alcune idee in Photoshop per vedere come il sito dovrebbe guardare diverse larghezze, e farlo potrebbe anche fornire risultati più ricchi, ma la semplice verità è che Photoshop non può replicare il tipo di effetto dinamico che è indicativo di risposta design.
"Progettare nel browser non è più una moda passeggera, è una necessità."Quando parli di un singolo design che si evolve con le dimensioni della finestra del browser, il modo migliore per farlo è dare un calcio ai pneumatici e vederli in azione nel browser.
Non vederlo come un bias di Photoshop, non devi e non devi abbandonare l'uso di immagini, trame, ecc. Che sono state create in Photoshop, Fireworks o altri software di grafica. Tuttavia, metterli insieme in un rapido mockup è probabile che sarà meglio raggiunto attraverso le implementazioni del browser live piuttosto che le anteprime statiche.
Tieni presente che i tuoi prototipi possono ancora essere prodotti a bassa fedeltà, indipendentemente dal fatto che tu voglia iniziare con un wireframe di base o un design dall'aspetto abbastanza finito. La chiave qui è che hai qualcosa di vivo che ti permette di testare le varie evoluzioni in modo da poter risolvere i problemi mentre sorgono invece di sprecare ore preziose su un'idea fondamentalmente errata.
Drammaticamente diverso
A volte ridimensionare un disegno in giù è semplice come far scorrere gli elementi da più colonne in una singola colonna sovrapposta. Se il tuo progetto è diviso in bei pezzi, questa potrebbe essere la strada da percorrere.
Tuttavia, ricorda che dispositivi radicalmente diversi possono richiedere design estremamente diversi. È spesso il caso che una soluzione davvero migliore possa essere fornita attraverso un notevole cambiamento nel modo in cui funziona la pagina. Per vedere cosa intendo, considera il design di El Sendero del Cacao qui sotto.
Come potete vedere, le versioni grandi e piccole del design differiscono un po '. La chiave qui è che sembrano ancora due versioni dello stesso sito, il che significa che la coerenza del marchio è rimasta al punto. Il progettista ha semplicemente deciso che la versione mobile funzionava meglio con un tocco visivo notevolmente inferiore rispetto alla versione completa.
Tieni presente che "diverso" non significa sempre completo e completo abbandono. La tua versione mobile non deve essere noiosa e prevedibile. Il punto qui non è quello di togliere tutto, ma di prendere in considerazione in modo critico tutte le diverse dimensioni della chiave che hai scelto come target e come migliorare l'esperienza per ognuno ripensando i fondamenti del design.
Cosa è assolutamente essenziale?
Uno dei componenti principali della transizione del tuo design attraverso varie fasi è quello di indirizzare i componenti assolutamente vitali del design e dare loro la massima priorità.
Come abbiamo visto nell'esempio precedente, sicuramente non sarà sempre il caso che la tua versione per dispositivi mobili conterrà tutto ciò che farà il tuo desktop design full-size. Il trucco è quindi quello di prendere in considerazione tutto ciò che tu e il tuo cliente avete in programma di includere e creare una gerarchia di importanza in modo da poter tagliare il non necessario per le versioni più piccole.
Vediamo questo principio al lavoro nel sito di Stephen Carver qui sotto.
Nota come il design non è stato solo ridimensionato ma effettivamente ridimensionato per la versione mobile. Alcuni dei contenuti sono stati considerati essenziali mentre altri contenuti sono più "belli da avere" quando c'è spazio disponibile sullo schermo.
L'esempio più ovvio di questo è nell'area di navigazione.Si noti come la versione più grande del design contenga piccole intestazioni secondarie per ogni elemento di navigazione. Questi aiutano l'utente a comprendere meglio lo schema di navigazione. Sulla versione piccola, tuttavia, questi sono stati spogliati per salvare spazio.
Mentre analizzi il tuo design per elementi essenziali, la sperimentazione è la chiave. Prova a togliere vari componenti per giudicare se l'usabilità ne soffre o meno. Nota che queste decisioni devono essere prese ad ogni intervallo, non solo il più piccolo e il più grande.
Tocca? Clic
Un altro punto importante da ricordare in quanto le scale di progettazione è che lo stato attuale dell'informatica è suddiviso in due diverse categorie: i dispositivi di input basati sul tocco e quelli che utilizzano un cursore. Naturalmente, l'assunto sicuro (per ora) è che le dimensioni più grandi della finestra del browser tendono a corrispondere a computer desktop o notebook, mentre le dimensioni inferiori della finestra del browser di solito indicano un'interfaccia touch-based.
Queste sono creature molto diverse e farai bene a ricordare che mentre strutturi i tuoi disegni perché la direzione in cui ti conduce questa conoscenza potrebbe essere un po 'controintuitivo.
Ad esempio, anche se tendiamo a pensare al sito mobile come a una versione ridotta del sito desktop, è spesso il caso che gli elementi aumentino di dimensioni a causa della differenza tra toccare e fare clic. Un elemento di navigazione che sembra perfettamente accessibile con un mouse e un cursore potrebbe essere quasi impossibile da raggiungere con precisione con il dispositivo di input grande e grezzo che è l'indice umano.
La cosa importante da ricordare qui è testare come un matto. È troppo facile progettare su un desktop e quindi ridimensionare la finestra del browser per dare un'occhiata a quella versione mobile. Questo semplicemente non ti dice tutta la storia. È necessario mettere le mani sul disegno di dimensioni ridotte prima di chiamarlo buono.
È tutto nel mezzo
Una cosa di fondamentale importanza che ti viene in mente per quanto riguarda la progettazione reattiva è che si tratta di qualcosa di più delle dimensioni dello schermo: riguarda le dimensioni della finestra del browser. Solo perché qualcuno ha un MacBook da 13 pollici non significa che la loro finestra del browser sia quella dimensione. Spesso accade che gli utenti aprano e utilizzino le finestre del browser molto meno dello schermo intero.
Il takeaway qui è che non sei fuori dai guai dopo aver testato alcune dimensioni della finestra preimpostate. Ridimensiona la finestra del browser e osserva come il design risponde a ogni piccolo passo. L'argomento standard è che gli utenti non designer non eseguono mai questa azione, e questo è corretto, ma useranno le finestre del browser in una serie infinita di dimensioni imprevedibili e la bellezza del design reattivo è che puoi facilmente assicurarti che il tuo progetto sembrerà perfetto in tutti loro.
Prendi in considerazione la prima rotta del cellulare
In definitiva, come pianifichi i tuoi responsive design dipende da te. Tuttavia, ci sono molti argomenti validi per entrare a far parte della folla mobile-first.
A partire dalla versione mobile, ti assicuriamo che non stai semplicemente servendo una versione scadente del design originale per i tuoi utenti mobili. Garantisce inoltre che tu pensi davvero attraverso le specifiche di ogni piccolo pezzo di contenuto.
Sopra abbiamo affermato che è necessario pettinare il proprio design e mirare agli elementi assolutamente essenziali, questo è un processo molto più semplice se in realtà si inizia solo con gli elementi essenziali. Con questa tecnica puoi aumentare in modo proattivo il tuo disegno man mano che le dimensioni della pagina aumentano anziché diminuire quando le dimensioni della pagina diminuiscono. Ciò segue il concetto di miglioramento progressivo, che inizia con una solida base funzionale e offre miglioramenti laddove possibile.
Un altro vantaggio del mobile è che spesso è possibile evitare il caricamento di elementi non necessari su dispositivi più piccoli che non li useranno. Progetti come 320 e Up hanno lo scopo di aiutarti a ridurre al minimo le risorse caricate dalla versione ridotta del tuo progetto.
Conclusione
Il punto di questo articolo è stato quello di farti smettere di pensare alla porzione di backend del responsive design abbastanza a lungo da considerare le ramificazioni di questa tecnica su ciò che l'utente vede. Molto più importante della media query sintassi è il risultato finale di come il tuo design si evolve da un punto di vista visivo e funzionale per soddisfare le esigenze dell'utente.
Ricorda che è necessario progredire attivamente nel design del browser, non solo in un'applicazione di progettazione statica. È inoltre necessario stabilire una gerarchia concreta degli elementi più importanti del design per assicurarsi che i pezzi del puzzle siano presenti e funzionino perfettamente per ogni dimensione della finestra. Infine, ricorda che il web design per dispositivi mobili è molto più che una riduzione delle pagine web desktop. Prendi in considerazione la possibilità di utilizzare un primo percorso per dispositivi mobili per garantire che tutti gli utenti ricevano un'esperienza solida.
Crediti immagine: Claudia Regina