Oggi ho intenzione di presentarvi l'approccio di Adobe al responsive web design; Layout fluido in Dreamweaver CS6. Questi nuovi strumenti consentono ai progettisti di costruire visivamente i loro layout reattivi, in primo luogo mobili, mentre Dreamweaver gestisce tutti i calcoli flessibili in background. Diamo un'occhiata…
Lasciami iniziare facendoti un piccolo segreto; Adoro interruzioni. Mi piace quando arriva qualcosa di nuovo che sfida tutto ciò che pensavamo fosse vero, lo lega in una pallina e lo dà sul marciapiede. Questa è una di quelle volte e la adoro. Lo amo.
L'interruzione è stata "Responsive Web Design" e "Mobile First" che sono stati presentati per la prima volta a un ignaro settore web nel 2010. Pensateci, i concetti di Mobile First e Responsive Design non erano realmente sul vostro radar fino a un anno circa fa. Quindi, si è verificata un'interruzione.
Prima di entrare nelle nuove funzionalità di Dreamweaver CS6 che rispondono a questi due concetti, penso che sia importante capire cosa è successo e come questa interruzione abbia portato a questa serie di tutorial.
Tutto è iniziato per me circa due anni fa. Stavo parlando ad un evento Adobe Education Leaders presso il quartier generale di Adobe a San Jose e stavo parlando di come gli educatori dovevano svegliarsi e iniziare a spostare attivamente quello che poi chiamavo design e sviluppo "Multischermo" nelle loro aule.
La mia epifania su questo era accaduta nel novembre 2009, in tutti i posti, sul sedile posteriore di un taxi che attraversava Pechino. Quando sono salito in cabina, si è acceso uno schermo sul retro del sedile anteriore e ho potuto interagire con il contenuto. Per molti aspetti non era altro che un tablet fissato al sedile con il contenuto alimentato in modalità wireless nel dispositivo. Questo è il momento in cui ho veramente capito il potere dei dispositivi mobili, perché la mia prima reazione è stata: "Questo è il tipo di materiale che i miei studenti creano".
Nello stesso periodo in cui stavo girando intorno a Pechino, nel novembre 2009, Luke Wroblewski stava riflettendo sul suo blog sullo sviluppo di una prima strategia mobile quando si trattava di web design. Pochi mesi dopo la sua riflessione è esplosa sulla scena quando la sua presentazione Mobile First è stata postata su Linked IN Tech Talks nel maggio del 2010. Questo collegamento video è stato rapidamente trasmesso alla comunità con un "Devi controllare questo." La premessa era semplice: dimentica desktop, persone. Progetta innanzitutto la versione mobile del sito, quindi inizia a pensare al desktop.
Ciò ha capovolto l'intero processo del web design, lo ha rovesciato e riorganizzato le sue molecole. Ecco la cosa: aveva senso.
Durante la progettazione per dispositivi mobili, la migliore prassi comune era creare una versione mobile del sito per garantire la coerenza dell'esperienza. Questo disegno era solitamente una versione compatta del sito desktop. Se Flash era coinvolto, significava anche numerose versioni del progetto rivolte a una varietà di lettori e dispositivi Flash Light. Un solo viaggio verso l'ormai abbandonato Device Central è stato sufficiente a convincermi che questo non era un ottimo modo per fare le cose. L'intero flusso di lavoro mobile era così complicato e complesso che non potei fare a meno di pensare che quello che stavamo cercando di fare era usare un martello in una situazione in cui un cacciavite era l'approccio migliore. La mia domanda più frequente quando ho a che fare con questo è stato quello di esclamare: deve esserci un modo migliore per farlo.
A quanto pare, c'era.
Nel maggio del 2010, Ethan Marcotte ha pubblicato un articolo piuttosto interessante su Alistapart. Intitolato Design Responsive, la premessa era, ancora una volta, piuttosto semplice: il contenuto dovrebbe adattarsi ai media che lo mostrano, piuttosto che il contrario.
Questa idea aveva anche senso ed è ancora in risonanza fino ad oggi.
Le cose hanno davvero preso il sopravvento nel 2011. Sia Ethan che Luke stanno facendo i loro casi con successo, l'HTML 5 sta guadagnando terreno nel settore e poi, il terremoto. Un paio di settimane dopo la conferenza annuale degli utenti, Adobe Max, Adobe ha perso la sua bomba. Annunciano che Adobe sta abbandonando lo sviluppo mobile sulla piattaforma Flash. Per mettere questo annuncio nel contesto, considera questo: la conferenza Max del 2010 ha avuto un'enfasi così forte su Flash mobile che stavano distribuendo gratuitamente i Blackberry, i droidi e Google TV abilitati per Flash ai partecipanti.
Non ho trovato sorprendente il fatto che Adobe si stesse ritirando, ma la reazione del settore andava da "il mondo sta finendo" a "non l'ho mai usato lo stesso, quindi qual è il problema". Quello che Adobe non ha fatto è stato uccidere Flash perché Apple lo odiava. Ha ucciso Flash nello spazio mobile perché, anche loro si erano resi conto: doveva esserci un modo migliore per farlo, e sia Luca che Ethan stavano mostrando come.
Ciò che ha davvero attirato la mia attenzione è stato che Adobe ha reso molto chiaro, dopo che le macerie hanno smesso di rimbalzare, che si stava spostando su HTML 5 o, come lo chiamavano ora, The Expressive Web. Edge, introdotto nell'agosto 2011, è una risposta. Il nuovo amore di Adobe per HTML è evidente con un nuovo sito che è un grande abbraccio di HTML e Dreamweaver CS6, che ha colpito le strade all'inizio di quest'anno, sta anche iniziando la migrazione in quella direzione.
Una delle aggiunte davvero fantastiche a Dreamweaver CS6 è Fluid Grids, che, in un certo senso, usa simultaneamente gli approcci di Ethan e Luca per progettare pagine web. Se stai appena iniziando ad esplorare i concetti di Mobile First e Responsive Design, allora un ottimo punto di partenza è Fluid Grid Layouts perché, come editor visuale, Dreamweaver ti permette di vedere cosa stai facendo e come cambiare il ripple CSS da uno smartphone , attraverso un tablet e atterrare sul desktop.
Quando ho iniziato a scavare in questa nuova funzione, ho sentito che Fluid Grid Layouts era una gemma nascosta. Dopo aver trascorso un po 'di tempo avvolgendo la mia mente attorno a loro, ho richiamato quell'entusiasmo. Non ho potuto fare a meno di sentire che questo è un lavoro in corso. È stato più un ottimo primo tentativo piuttosto che una solida aggiunta alla formazione e sospetto che sarà una funzionalità di Dreamweaver CS6 che viene regolarmente aggiornata tramite Creative Cloud.
Dreamweaver ti consente di vedere cosa stai facendo e in che modo le modifiche al CSS si propagano da uno smartphone, su un tablet e atterrano sul desktop
I layout di Fluid Grid sono chiaramente basati sul responsive Web Design di Ethan Marcotte (il libro e l'articolo che ha portato al libro). Questa funzione consente di specificare tre griglie fluide: una per desktop, tablet e desktop. Ogni griglia può avere da 2 a 24 colonne; una larghezza di gronda comune tra le colonne e si può specificare la larghezza della griglia dovrebbe diffondersi su ogni schermo.
Quindi aggiungi elementi div della griglia di layout fluido per costruire la tua pagina nel layout mobile. (Mobile First) Il prossimo passo ricade nella categoria dei "brillanti": puoi ridimensionare gli elementi in ciascuno dei layout, farli scattare sulla griglia e spostare facilmente i singoli elementi per sederti accanto e giocare piacevolmente l'uno con l'altro. Questa operazione viene eseguita in visualizzazione Progettazione o in Live view e, soprattutto, Dreamweaver calcola automaticamente la larghezza percentuale di elementi e margini con quattro cifre decimali.
Questo calcolo è basato sulla formula di Ethan di target / context = result. Un buon esempio di questo sarebbe la larghezza della colonna. Supponiamo che tu abbia una larghezza di pagina di 1232 pixel e tu decidi che ogni colonna dovrebbe avere una larghezza di 350 pixel. Per ottenere la larghezza della colonna del fluido, dividere 350 (il bersaglio) per 1232 (il Contesto) = 0,28409091. Dovresti quindi spostare i due punti decimali a destra per un risultato di 28.409091. Il calcolo del layout della griglia Fluid di Dreamweaver eliminerà gli ultimi due numeri per un risultato del 28,4090%. Questo calcolo si applica a tutto ciò che ha numeri "rigidi" ad esso allegati come dimensione del carattere, margine, spaziatura e così via.
Il CSS creato da Fluid Grid Layouts usa larghezze e float percentuali, quindi produce layout che si adattano a qualsiasi dimensione dello schermo. Questi stili sono costruiti sulla base di "mobile first" e funzionano anche nei browser che non comprendono le query multimediali. Per quelli di voi nuovi a Responsive Web Design, questa sola funzione è sufficiente per farvi entrare nel gioco.
Essendo un work in progress ci sono, naturalmente, "problemi".
Ad esempio, Dreamweaver non ha un modo immediatamente evidente di mostrare quale media query controlla una particolare regola di stile. Puoi capirlo abbastanza velocemente, ma all'inizio è un po 'frustrante. Un altro è uno che alcuni utenti di Dreamweaver hanno sottolineato: la funzione non supporta gli elementi di nidificazione per creare layout più complessi. Altre caratteristiche mancanti includono l'impossibilità di usare le classi invece degli ID e sarebbe piuttosto bello usare elementi semantici come intestazione
o footer
.
Ci sono anche alcuni "raggiri" nel processo che mordono gli incauti e un paio di ipotesi fatte sulla larghezza dello schermo mobile sono un po 'larghe. Tratterò molti di questi nel corso di questa serie.
Tuttavia, i layout di griglia fluida di Dreamweaver dovrebbero fare appello a coloro che iniziano a entrare nel gioco RWD.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!