Ricorda i bei vecchi tempi? Sai di che giorni sto parlando; i giorni non molto tempo fa quando progettavamo siti web a larghezze fisse. Guardando indietro ora sembrano un tempo così semplice; un momento più felice; un tempo in cui potevo recitare ogni carattere che era disponibile per l'uso online senza pensarci due volte. La verità è che il Responsive Web Design ha cambiato tutto. Il mondo era piatto e ora è rotondo, ero cieco e ora vedo, il web era pixel e ora sono le percentuali.
Con l'introduzione di RWD, è fondamentale che noi, in qualità di designer, evolviamo il nostro flusso di lavoro per soddisfare meglio le esigenze del nuovo web. Molti di noi hanno espresso le nostre frustrazioni su come l'approccio a pixel fissi di Photoshop non sia adatto a progettare i layout fluidi necessari per un sito Web reattivo, ma non sono state offerte alternative utili. Il mondo del web design è alla disperata ricerca di un software su misura che sia stato concepito partendo da zero con in mente il progetto RWD. Prodotti come Adobe Reflow sono un ottimo inizio, poiché dimostrano che Adobe sta almeno lavorando su una soluzione, ma dopo aver trascorso alcune ore con esso durante il fine settimana, posso vedere che ha ancora molta strada da fare prima che diventi un utile aggiunta al mio flusso di lavoro. Con noi in un limbo tra un software preistorico e la promessa di ciò che verrà domani, dovremo creare flussi di lavoro alternativi per ovviare alle carenze del nostro attuale "software di progettazione" introducendo altri strumenti e procedure che aiuteranno a colmare il divario tra pixel fissi e reattività del fluido.
Quanto segue non è in alcun modo un elenco di come i progetti RWD dovrebbero essere affrontati, ma piuttosto come ho adattato il mio flusso di lavoro per adattarlo al nuovo panorama.
Mi sono fermato al confine tra il divario Photoshop / Fireworks / Illustrator in quanto ognuno ha combattuto per la supremazia e ha visto persone innocenti farsi prendere in un fuoco incrociato di pixel. I designer tendono ad avere il loro preferito e preferirebbero morire con una morte lenta e dolorosa piuttosto che ammettere che un altro software ha una caratteristica che potrebbero realmente desiderare. La mia opinione è che dovresti progettare in qualsiasi software che ti permetta di lavorare al meglio e di esplorare rapidamente le tue idee, che si tratti di Photoshop, Powerpoint o Paint.
È quasi irrilevante, a tua scelta, in quanto dovrebbe essere solo un punto di partenza per sperimentare rapidamente diversi layout. Personalmente, preferisco Fireworks perché spicca più delle scatole di ciò che voglio in un software. Cerco di non rimanere fortemente incastrato nei dettagli in questa fase e cerco davvero di prendere alcune decisioni preliminari sul layout e sulla struttura, proprio come alcuni wireframe eleganti.
Tutto ciò che deve essere detto sull'uso di Lorem Ipsum nei mock up del sito è stato detto quindi per favore affidati a me su questo e dove possibile usa i contenuti reali da cui progettare. Dove non è possibile, usa i contenuti degli ultimi anni, scrivi il tuo contenuto o usa i testi per "Candela nel vento" ma non usare Lorem ipsum. Se non utilizzi contenuti reali, sarà difficile vedere in quali punti di interruzione alcuni elementi debbano essere aggiustati.
Questa è solo la larghezza che mi piace iniziare in quanto è vicino a una piccola esperienza desktop, che è quindi facile scalare per schermi più grandi e verso il basso per esperienze tablet / mobile. Alcune persone preferiscono iniziare in maniera più ampia mentre altre preferiscono progettare mobile-first, si tratta solo di ciò che funziona per te.
RWD è interamente basato su contenitori fluidi che crescono e si restringono per riempire l'area disponibile del browser, quindi la progettazione in percentuale anziché in pixel garantisce che i progetti siano proporzionati al browser e richiedano meno punti di interruzione rispetto al progetto basato su pixel equivalente.
Tendo ad avere In-Design aperto in background, così posso facilmente e velocemente scoprire una dimensione percentuale di un elemento basato su pixel. InDesign è ottimo per gestire questo tipo di calcoli e puoi facilmente scoprire quale dimensione un elemento 428px x 333px sarà al 46% della sua larghezza originale, pur mantenendo le sue proporzioni o forse scoprire il 27% di una larghezza del browser di 889px in secondi. I risultati ti vengono comunque assegnati in pixel, quindi puoi tornare al software in cui stai progettando e creare quel contenitore in pixel, sapendo che sarà relativo alla percentuale dell'area di lavoro che hai definito.
Se pensi che io abbia a che fare con l'utilizzo di contenuti reali all'interno dei tuoi progetti, dovresti sentirmi parlare progettazione di stili tipografici in Photoshop (o equivalente). La tipografia avrà un aspetto molto diverso nel browser di quanto non appaia nei soliti pacchetti Adobe, il che significa più lavoro per te che modifichi il design una volta che è stato creato.
Risparmia il mal di testa e usa app come typecast.com per sperimentare e creare i tuoi stili di carattere con. Una volta che sei soddisfatto del layout e dello stile della tua tipografia, puoi esportare l'intero spazio di lavoro come un PNG trasparente da inserire nei tuoi modelli di progettazione. Non è necessario che sul tuo sistema siano installati i font scelti in quanto sarà solo un'immagine, ma non potrai modificarla senza tornare in typecast.
Ormai dovresti avere il tuo design a 1000px di larghezza (o qualsiasi larghezza hai scelto all'inizio) completato con le larghezze dei contenitori che contengono i tuoi vari contenuti tradotti in percentuali. Ora inizierei a creare una griglia su misura che riproduca le larghezze del contenitore che utilizzo all'interno del mio progetto. Quindi, se ho una barra laterale larga al 30% e un'area di contenuto che è il 55% del mio browser con il 5% di padding su entrambi i lati, la mia griglia potrebbe essere simile al 5%, 30%, 5%, 55%, 5%.
Puoi usare app come Gridset per costruire la tua griglia su misura ma, di nuovo, preferisco usare InDesign in quanto puoi raggruppare elementi e ridimensionarli in proporzione l'uno con l'altro.
Ora prendo la mia griglia che ho creato usando InDesign e la incollo in una larghezza di 1600px (o la larghezza massima che vuoi che il tuo sito sia) documento. Quindi inizio a ridimensionare la mia griglia sempre più stretta con incrementi di 100 px fino a 300 px di larghezza. Ad ogni incremento, controllo la larghezza di ogni contenitore di contenuti e mi assicuro che sia ancora abbastanza grande da ospitare il suo contenuto. Quando raggiungo una larghezza che penso rende un contenitore troppo piccolo, ho semplicemente modificato la griglia per adattarla. Quindi se a 800px di larghezza la barra laterale che avevo creato con il 30% della larghezza del browser diventa troppo stretta, potrei aggiungere un ulteriore 10% ad esso, rendendolo ora il 40% della larghezza del mio browser ed essere abbastanza largo da ospitare il contenuto previsto .
La cosa fondamentale da ricordare è che se si ingrandisce un contenitore, è necessario restringere un altro contenitore della stessa quantità per mantenere l'intera larghezza del 100%. Questo è il modo migliore che ho trovato per definire i punti di interruzione (il punto in cui il layout cambierà) poiché si aggiunge un altro punto di interruzione solo quando il contenuto si interrompe e non alla larghezza di un nuovo dispositivo. Questa procedura può richiedere molto tempo, in quanto ti ritroverai con 14 diverse anteprime della tua griglia che crescono da 300px a 1600px di larghezza, ma è il modo migliore che ho trovato per verificare come il tuo design guarderà a diverse larghezze dello schermo prima di entrare sviluppo.
Un'altra opzione è usare uno strumento come Adobe Reflow ciò consente anche di aggiungere contenuto ai contenitori e quindi di trascinare lo spazio di lavoro e vedere la scala degli elementi. Puoi anche determinare i punti di interruzione ridimensionando il tuo spazio di lavoro fino a quando il contenuto si interrompe e semplicemente aggiungendo una query multimediale. Reflow è ancora in beta pubblica e può essere scaricato da Qui .
Dopo aver ridimensionato i tuoi progetti con incrementi di ogni 100 px, avresti identificato alcune larghezze in base alle quali il contenuto si interrompe e rettificato aggiungendo un punto di interruzione. È ora possibile tornare al software in cui sono stati creati i disegni originali e modificare il layout del proprio disegno alle larghezze identificate come punti di interruzione. Ciò significa che finisci per progettare solo 2, 3 o 4 layout diversi (a seconda della complessità della tua griglia e di quanti punti di interruzione hai bisogno) che copriranno tutto da 300px a 1600px.
Se hai seguito questo processo, ora dovresti avere un set di layout che corrisponda ai tuoi punti di rottura, un documento che mostra come la tua griglia è composta da percentuali della larghezza del browser e come si collassa per schermi più piccoli e tutte le tue stili tipografici già creati e testati nel browser. Questo dovrebbe essere un punto molto forte per uno sviluppatore per iniziare a costruire i tuoi progetti in modo accurato e senza dover affrontare la rottura del contenuto a determinate larghezze successive.
Questo processo può sembrare molto lungo ma senza uno strumento specifico interamente creato per RWD, è il modo migliore che ho trovato per testare facilmente il mio layout reattivo usando software non responsivo e comunicare chiaramente le mie idee a uno sviluppatore. Questo non è affatto l'unico modo per affrontare un progetto RWD, ma è il migliore che ho trovato.
Che cosa ha cambiato il design reattivo sul tuo flusso di lavoro? Quali consigli vorresti condividere? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di flusso via Shutterstock.