Share
A meno che non siate completamente nuovi nel settore, o viviate sotto una roccia nelle lontane terre di un altro pianeta, avrete sentito parlare del design reattivo. Anche se non lo comprendi pienamente, è destinato a essere qualcosa che avrai incontrato o interagito in un modo o nell'altro.
In breve, il web design reattivo è l'arte di progettare siti Web per una moltitudine di dimensioni e dispositivi dello schermo, in modo tale che vi sia un'esperienza ottimale per ogni utente in ogni dimensione possibile.
Il web design reattivo è al suo meglio quando è indipendente dal dispositivo; dove non stai mirando a progettare per determinate risoluzioni o dimensioni, ad esempio solo per le dimensioni di iPhone o iPad. Dovresti invece mirare a progettare tenendo in considerazione il contenuto e il design e come questo contenuto scorre e si adatta ai vari ambienti che potrebbero essere visti o utilizzati in.
In passato, per accedere a Internet, dovevi provare un computer (di solito molto grande), con i suoni familiari del modem mentre si collegava. Ora, però, puoi accedere a Internet tramite computer, laptop, telefoni cellulari, smartphone, tablet, televisori, console di gioco - l'elenco sembra quasi infinito.
Responsive Web Design, scritto da Ethan Marcotte e pubblicato da A Book Apart, è una brillante introduzione ai principi del responsive Web Design. Ora, da un lato questa è una grande notizia. Più che mai, possiamo essere connessi a Internet in qualsiasi momento o luogo che potremmo desiderare. Mentre questo è dato per scontato, per molti è anche necessario. E con necessità e accessi ci viene spesso presentata con impazienza e necessità di lavorare e lavorare rapidamente.
A causa di siti Web reattivi che diventano molto più mainstream, anche il pubblico in generale (quindi tutti al di fuori del settore web e delle industrie creative) si sono quasi aspettati di vederlo mentre navigano sul web. Quindi, tutto sommato, il web design reattivo è sicuramente una grande cosa.
Lavorare con un design reattivo non è privo di sfide. Prima di tutto, ci sono una moltitudine di dispositivi e dimensioni dello schermo che dobbiamo soddisfare. Dagli schermi da grandi a grandi, da piccoli a medi (e tutto il resto) c'è molto da pensare. E siccome sono sicuro che sai già essere uno sviluppatore, lavorare con il responsive design dal lato tecnico delle cose può anche trasformarsi in un incubo ed essere estremamente difficile da gestire.
Il sito web mediaqueri.es offre molte ispirazioni per alcuni progetti web reattivi di alto livello. Come in ogni progetto, le cose principali su cui devi pensare con il responsive web design sono i contenuti del sito web, il modo in cui questo contenuto si inserisce nel design e il modo in cui il contenuto scorre da una pagina all'altra. Devi vedere come i diversi elementi di design che hai lavorato insieme e assicurarti che tutto sia coerente e coerente.
La differenza con il web design reattivo è che devi anche pensare a come tutto questo funzioni da una dimensione all'altra, indipendentemente dalla larghezza o dall'altezza. Devi riflettere attentamente su come tutto questo si traduce in uno schermo più piccolo o più grande e in che modo tutti gli elementi di design, il flusso di contenuti e tutto il resto funzionano. È necessario mantenere l'esperienza coerente, indipendentemente dalle dimensioni del sito web.
Noi, come designer e sviluppatori in un settore così frenetico, siamo abbastanza fortunati. Lavoriamo su alcuni progetti sorprendenti e di solito lavoriamo sempre in prima linea sulle nuove tecnologie emergenti. Lavorare con il responsive web design è solo una di quelle cose entusiasmanti che possiamo fare, ma con ciò, arriva un prezzo.
Il Greenbelt Festival è un grande esempio di responsive web design. Schermate fornite per gentile concessione di mediaqueri.es. Ripensa a
All'inizio di qualsiasi progetto di design dovresti cercare di stabilire esattamente che cosa vuole che il tuo cliente desideri ottenere dal progetto e che cosa si aspettano che i risultati siano. Gestire le aspettative del cliente può essere una cosa difficile da fare, ma è importante che tu continui a farlo per assicurarti che i tuoi clienti comprendano pienamente il tuo processo.
Un bellissimo esempio di responsive web design in azione può essere visto sul sito web di Modern Green Home. Schermate fornite per gentile concessione di mediaqueri.es. Quando si tratta di web design reattivo, e in particolare se sono venuti da te con una di queste parole d'ordine, devi provare e aiutare a educare i tuoi clienti Molto spesso queste parole d'ordine sono state ascoltate di passaggio, o sono state rappresentate in modo errato, e spetta a te assicurarti che il tuo cliente abbia una corretta comprensione della materia.
Ad esempio, a volte potresti persino ottenere potenziali clienti che vengono da te dicendo che volevano un sito web che funzionasse su "iPhone e iPad". In questo caso, direi "Bene, va benissimo - ma ciò che sarebbe bello è che possiamo concentrarci sulla creazione di un sito web perfettamente reattivo su cui lavorare qualunque dispositivo e non solo essere limitato a quei due. "Questo è un grande rompighiaccio sull'argomento ed è qualcosa che lascia molto aperto per voi per spiegare ulteriormente nelle fasi di pianificazione.
Se il tuo cliente capisce correttamente il responsive design, allora immagino che saranno più felici con il progetto.
Il sito Web Stuff & Nonsense è un ottimo esempio di responsive web design, introducendo anche illustrazioni diverse a differenti dimensioni dello schermo. Schermate fornite per gentile concessione di mediaqueri.es. Se si prende il tempo per educare correttamente il cliente, può funzionare solo a tuo favore. Ad esempio, nel mio lavoro, cerco sempre di garantire che i miei clienti si sentano come se stessi lavorando con loro, piuttosto che semplicemente per loro. Questo aiuta ad alleggerire il processo di lavoro con i tuoi clienti durante la progettazione del web reattivo.
Va tutto bene e sto parlando del motivo per cui è importante educare i clienti e raccontarti cose che potresti già sapere sul responsive web design. Ora per il nocciolo duro, dove posso dirvi i modi migliori per progettare siti web reattivi.
Il grande malcontento è ben noto per le loro interviste, e il loro sito web è un grande esempio di design di riviste sul web, oltre ad essere un brillante esempio di responsive web design. Schermate fornite per gentile concessione di mediaqueri.es. E la risposta? Beh, sfortunatamente non ce n'è davvero uno corretto! Mi dispiace se non è quello che stavi cercando, ma come probabilmente capirai con il tuo sviluppo e la codifica, i processi di tutti sono diversi e nessuno sembra lavorare nello stesso modo. Questo, a modo suo, è grande perché significa che possiamo sempre trovare nuovi modi di lavorare.
Tuttavia, non ti preoccupare, ti darò alcuni suggerimenti per la progettazione di siti web reattivi che dovresti essere in grado di mettere in atto abbastanza facilmente. Sentiti libero di scegliere e scegliere tra tutti questi, oltre a combinarli dove pensi che potrebbe essere appropriato. Anche sperimentare! Prova un sacco di modi diversi per progettare siti web reattivi e vedere cosa si adatta tu migliore.
Creare un mockup per un sito a larghezza statica in Photoshop (o qualsiasi altro software di grafica) era il modo in cui la maggior parte delle persone progettava siti Web e, per alcuni, lo è ancora. Va assolutamente bene! Se hai dimestichezza con l'utilizzo di un'app grafica per progettare l'aspetto del tuo sito Web, allora va bene.
Il sito Web UX di Londra 2013 è un bellissimo esempio di design che va dal piccolo al grande con grazia. Schermate fornite per gentile concessione di mediaqueri.es. Ma non provare a progettare un mockup per ogni singola risoluzione o larghezza; diventeresti pazzo ed essere lì per un tempo molto lungo. Invece, ripensare all'articolo di wireframing. Pensa a come abbiamo guardato il flusso di contenuti per quei wireframe e come abbiamo deciso che tutto dovrebbe andare insieme. Prova a tradurlo nei tuoi progetti e pensa a come questi elementi scorreranno e si muoveranno quando le dimensioni dello schermo cambiano.
Alcuni di questi cambiamenti saranno importanti, e per quelli quindi potrebbe essere opportuno creare un piccolo mockup per mostrarlo, ma per qualsiasi altra modifica, come ad esempio l'adattamento del testo, allora mi limiterei a guardare questo tipo di cose nel browser una volta iniziata la codifica dei prototipi. Se preferisci progettare un mockup per tutte le principali fasi del tuo design, allora con tutti i mezzi, fai pure attenzione al tempo che questo aggiungerà al tuo progetto.
Ora, per un po 'di polemiche. Potresti aver sentito parlare del tutto
Il sito WWF è un magnifico esempio di web design che funziona anche in modo brillante. Schermate fornite per gentile concessione di mediaqueri.es. Progettare nel browser è quando si passa da uno stage wireframe (se lo si è fatto) direttamente nel browser per avviare la fase di progettazione, piuttosto che lavorare con qualsiasi software di grafica. Se usi molti strumenti online per aiutarti a creare diversi elementi della tua struttura di progettazione (come creare griglie o perfezionare la tua tipografia), allora può funzionare molto bene.
Tuttavia, molti designer possono sentirsi come se faticano a progettare nel browser, in particolare se sono più un designer che un programmatore. La ragione di questo è perché sentono che limita la loro creatività un po 'di più, rendendo più difficile per loro sentirsi in grado di inventare idee creative, uniche e visivamente emozionanti.
The Next Web riesce a visualizzare i contenuti in un modo facile da digerire e da seguire, anche su schermi piccoli. Schermate fornite per gentile concessione di mediaqueri.es. Ma come sviluppatore, molto probabilmente ti sentirai estremamente a tuo agio nell'usare il codice e quindi potrebbe essere una buona idea giocare con il tentativo di progettare nel browser e vedere quali risultati ti vengono in mente.
Questo è probabilmente il mio preferito. decidere nel browser significa che puoi fare un po 'di lavoro nel software di grafica e un po' nel browser. Personalmente, penso che non si possa ottenere un risultato migliore di come un progetto funzionerà finché non sarà nel browser stesso. La tipografia sarà sempre diversa nelle app grafiche rispetto al browser, ed è molto più facile creare prototipi e scorrere rapidamente attraverso le fasi di progettazione quando ci si trova nel browser (anche se tutto ciò potrebbe cambiare con l'introduzione di applicazioni come
Il sito Web di Microsoft utilizza abilmente il contenuto in movimento e le immagini ritagliate in base alle dimensioni del viewport. Schermate fornite per gentile concessione di mediaqueri.es. Lavorare con una combinazione di prototipi e lavoro basato su browser significa che puoi dare molta flessibilità al tuo design e alle decisioni che devi prendere. La chiave di questo termine "decidere nel browser", però, è con la prima parola. Sebbene nel software di grafica possano essere prese molte importanti decisioni creative, il browser è il punto in cui è possibile effettuare la scelta finale.
Quando lavoro in questo modo, trovo che spesso finisco con un misto di mockups, librerie di pattern progettati (in software di grafica e HTML e CSS) e prototipi completi di HTML e CSS. Una miscela è grande e mostra l'evoluzione del sito web dall'inizio fino a quello che, si spera, sta iniziando a diventare un sito web completo.
Per prima cosa, se non hai ancora imparato dai miei articoli nella sezione "Prima di iniziare" - sempre, sempre, inizia sempre a lavorare sul contenuto dei tuoi progetti, in primo luogo. Tutto ciò significa è assicurarsi che tu stia lavorando con contenuti reali e il contenuto che è destinato a essere utilizzato sul sito web che stai progettando.
Philip House è un ottimo esempio di come è possibile spostare e spostare i layout quando si lavora con progetti web reattivi. Schermate fornite per gentile concessione di mediaqueri.es. In secondo luogo, se si lavora in mobilità (a partire da layout più piccoli) o desktop-down (a partire da layout desktop a larghezza intera) dipende interamente da voi. Ci sono molti dibattiti online, ma in realtà questa è la tua decisione da prendere. Se ti senti più creativo andando da una dimensione più grande a una più piccola, anche se la costruisci nel modo opposto, allora va bene. Come sta facendo il contrario e passando dal piccolo al grande!
Concludiamo le cose con alcune risorse utili. Ci sono così tanti strumenti là fuori che possono aiutarti quando stai progettando siti web reattivi, dai uno sguardo:
Accentsconagua