Il web design reattivo è diventato una parola d'ordine quasi onnipresente sul web. Prova a cercare #rwd su Twitter per trovare contenuti di parti uguali e spam di Twitter. Questa è una fase comune nella maturazione di una nuova idea. Ricordo quando AJAX era di gran moda; il termine è stato conficcato nel terreno. Ora, poche persone parlano di AJAX, ma le librerie come jQuery sono completamente integrate nel flusso di lavoro di uno sviluppatore.
Questo sembra rispecchiare ciò che sta accadendo al responsive web design. Il termine è ovunque. Una mia amica è nel settore dell'editoria di riviste, recentemente ha partecipato a una conferenza e un editore di una nuova rivista ben nota parlava delle tendenze in arrivo e menzionava il responsive web design. Gli editori potrebbero non essere professionisti del web, ma conoscono le parole d'ordine.
Con l'arrivo del responsive web design, il modo in cui costruiamo i siti web è cambiato. Poiché il termine passa da buzzword a una parte comune di ogni progetto di web design, il modo in cui lavoriamo come professionisti del web deve cambiare. Con questo in mente, dobbiamo stabilire alcune nuove regole di base su come lavoriamo.
Quando qualcuno ti dice di "dare un'occhiata a questo sito reattivo", qual è la prima cosa che fai? Probabilmente ridimensiona la finestra per vedere come cambia il layout. Probabilmente non lo aprirò sul mio telefono e tablet e inizierò a cambiare gli orientamenti o ad avviare i test di velocità della pagina. Scalare il browser e andare avanti con la mia giornata. Questa è la nostra esperienza come designer e sviluppatori, ma non come utenti. Quando visito un sito come utente, non ho pazienza. Non mi interessa se il sito squish bene; Voglio solo la cosa che voglio.
"Squishy" è un ridimensionamento lineare di un sito web. Il sito passa da magro a grasso? Invece del ridimensionamento lineare, il web design reattivo dovrebbe concentrarsi sulla creazione di un nucleo del sito e il caricamento progressivo da lì, in base alle funzionalità. Immagina un sito che doveva essere costruito per un piccolo cellulare con IE7 su una rete EDGE. Dovrebbe essere il tuo sito principale e poi scalare in base alle dimensioni e alle capacità dello schermo.
Il web design reattivo è complicato. È proprio così. Vorrei che ci fosse qualcosa che potrei dire per renderlo facile, ma non c'è. La maggior parte delle persone ha risposto al responsive web design aggiungendo qualcosa ai propri flussi di lavoro, sia che si tratti di un nuovo deliverable o semplicemente di uno sviluppatore e si chiede se il loro design funzionerà in modo reattivo.
Ho un amico che sta lavorando su un sito responsive per un cliente. Sta costruendo il sito in Photoshop in dimensioni desktop. Dopo alcuni prototipi su alcune pagine, voleva mostrare come sarebbe il sito in un tablet e uno smartphone, così ha fatto anche quei modelli. Dopo aver presentato al cliente, le sono state apportate alcune modifiche creative. A questo punto ci sono circa 50 file PSD per questo sito. Le ci vogliono alcuni giorni per rivedere i layout.
Cercare di aggiungere nuovi progetti da solo comporterà un processo lungo e incoerente. Uno dei modi migliori per risolvere questo è la prototipazione dei wireframe e la presentazione di quelli al tuo cliente. Questo ti dà un risultato finale per parlare direttamente al layout del sito senza parlare contemporaneamente del design. Fondazione di ZURB è un ottimo strumento per la costruzione rapida di prototipi.
Tuttavia, aggiungere dei prototipi al flusso di lavoro non sarà sufficiente. Per riuscire a costruire siti reattivi, è necessario adeguarsi, il che ci porta alla regola successiva.
Quando ho iniziato a costruire siti Web, ho utilizzato due strumenti, Photoshop e GoLive. Ora ho almeno sei programmi di cui ho assolutamente bisogno per costruire un sito. Uso ancora Photoshop per la creazione di elementi grafici, ma principalmente disegno nel browser con Sublime Text 2 e utilizzo gli strumenti di sviluppo di Safari per ispezionare elementi sul mio iOS 6. Uso anche il Codekit per compilare CSS e Terminal pre-elaborati per il controllo della versione in Git.
Il web design reattivo significa anche cambiare il modo di progettare. Io uso invece di creare un'intera pagina in Photoshop Tessere stile Samantha Warren per articolare il design visivo. Progettando il marchio visivo e gli elementi dell'interfaccia di un sito al di fuori di un layout reale, puoi comunicare direttamente il design e combinarlo con il layout del prototipo per creare il tuo sito reattivo nel browser.
I preprocessori CSS sono anche di grande aiuto in qualsiasi flusso di lavoro reattivo. Per dirla in parole semplici, i preprocessori possono essere usati per districare alcune delle complicazioni della costruzione di un sito e facilitare gran parte della ripetizione ereditata dal lavorare in CSS. Personalmente preferisco SCSS, ma MENO è un'alternativa migliore per alcuni in quanto ha una barriera di ingresso più bassa e ha una documentazione migliore.
[Il web] dovrebbe essere accessibile da qualsiasi tipo di hardware che possa connettersi a Internet: fisso o mobile, piccolo schermo o grande. - Tim Berners-Lee
HTML e CSS sono intrinsecamente reattivi. Fin dall'inizio del codice HTML, il Web doveva essere abbastanza flessibile da funzionare su qualsiasi hardware con una connessione Internet. Non è stato fino a quando noi, come designer e sviluppatori, abbiamo spostato verso layout fissi che questo è cambiato. Nel tentativo di imporre dimensioni fisse sui siti Web, abbiamo ristretto il Web ai computer desktop.
Il web reattivo è uno che astrae ciò che hai da dire da come lo dici. Prendiamo, ad esempio, il recente passaggio di NPR a un modello di contenuto basato su API. Passando a un'API per fornire contenuti, NPR è stata in grado di gestire la propria raccolta di app e siti in modo coerente. L'unica cosa che cambia è il livello di presentazione.
Questo è ciò che dovrebbe essere il web reattivo. Capire cosa si deve dire, e lasciare che ciò che dici sia guidato da quello. Il design consiste nel soddisfare un'esigenza in un modo visivamente piacevole, ma che funziona anche per soddisfare le esigenze dell'utente.
Questo è ciò di cui si occupa il web reattivo, l'utente - creando siti web che funzionano per le persone che li usano, ma accedono al contenuto. Realizzare siti che possono refactoring per piccoli schermi è solo l'inizio.
Hai già abbracciato il responsive web design? Quali regole per il responsive design vorresti aggiungere? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, dimensione immagine via Shutterstock.