Share
I dag skal jeg introdusere deg til Adobes ta på Responsive Web Design; Fluid Layouts i Dreamweaver CS6. Disse nye verktøyene lar designere visuelt bygge sine responsive layouter, mobil først, mens Dreamweaver håndterer alle fleksible beregninger i bakgrunnen. La oss ta en titt…
La meg starte med å la deg inn på en liten hemmelighet; Jeg elsker bare forstyrrelser. Jeg elsker det når noe nytt kommer sammen som utfordrer alt vi trodde var sant, knytter det opp i en liten ball og sparker den ut til fortauet. Dette er en av disse tider, og jeg elsker det. jeg bare elsker det.
Forstyrrelsen var "Responsive Web Design" og "Mobile First" som først ble presentert til en intetanende nettindustri i 2010. Tenk på det, konseptene Mobile First and Responsive Design var virkelig ikke solid på radaren din til et år eller så siden. Deretter skjedde forstyrrelser.
Før jeg kommer inn i de nye funksjonene til Dreamweaver CS6 som svarer på disse to konseptene, tror jeg det er viktig at vi forstår hva som skjedde og hvordan denne forstyrrelsen fører til denne opplæringsserien.
Alt begynte for meg for to år siden. Jeg snakket på en Adobe Education Leaders-hendelse på Adobe HQ i San Jose og snakket om hvordan lærere måtte våkne og begynte aktivt å flytte det jeg så kalte "Multiscreen" -design og utvikling i sine klasserom.
Min epiphany rundt dette hadde skjedd i november 2009 på alle steder, baksetet til en taxi omsorg gjennom Beijing. Da jeg kom inn i hytta, ble en skjerm på baksiden av forsetet opplyst og jeg kunne samhandle med innholdet på den. I mange henseender var det ikke noe mer enn en tablett boltet inn i setet med innholdet trådløst inn i enheten. Det er øyeblikket da jeg virkelig skjønte kraften til mobile enheter, fordi min første reaksjon var: "Dette er slags ting studentene mine skaper."
Omkring samme tid jeg rattlet rundt Beijing, i november 2009 muslimer Luke Wroblewski på bloggen sin om å utvikle en mobil første strategi når det gjaldt webdesign. Noen få måneder senere eksploderte hans musing virkelig på scenen da hans Mobile First-presentasjon ble lagt ut i LinkedIn Tech Talk i mai 2010. Denne videolinken ble raskt levert rundt samfunnet med en "Du må sjekke dette ut." Forutsetningen var enkelt: Glem skrivebordet, folk. Design den mobile versjonen av nettstedet først, og begynn å tenke på skrivebordet.
Dette vendte hele webdesignprosessen opp ned, snudde den innover og omorganiserte molekylene. Her er saken: Det var fornuftig.
Ved utforming for mobil var felles beste praksis å lage en mobilversjon av nettstedet for å sikre konsistens av opplevelsen. Denne utformingen var vanligvis en kompakt versjon av skrivebordssiden. Hvis Flash var involvert, betydde det også en rekke versjoner av prosjektet rettet mot en rekke Flash Light-spillere og enheter. En tur til den nå forlatte Device Central var nok til å overbevise meg om at dette ikke var en fin måte å gjøre ting på. Hele mobil arbeidsflyten var så innviklet og komplisert at jeg ikke kunne hjelpe, men tenk det vi prøvde å gjøre var å bruke en hammer i en situasjon hvor en skrutrekker var den beste tilnærmingen. Mitt mest vanlige spørsmål når det gjelder dette var å utrope: Det må være en bedre måte å gjøre dette på.
Som det viser seg, var det.
I mai 2010 publiserte Ethan Marcotte en ganske interessant artikkel om Alistapart. Rettferdig Responsive Design, var premisset ganske enkelt ganske enkelt: innholdet skulle tilpasse seg media som viste det, snarere enn omvendt.
Denne ideen var også fornuftig og er fortsatt resonerende til denne dagen.
Saker virkelig sparket inn i høyt utstyr i 2011. Både Ethan og Luke lykkes med å gjøre sine tilfeller, HTML 5 får traction i bransjen og deretter jordskjelvet. Et par uker etter at den årlige brukerkonferansen, Adobe Adobe, droppet Adobe sin bombe. De kunngjør at Adobe støtter mobil utvikling på Flash-plattformen. For å sette denne kunngjøringen i kontekst vurdere dette: Max-konferansen 2010 hadde så stor vekt på Flash mobile de var fritt å dele ut Flash-aktiverte Blackberries, Droids og Google TV til deltakerne.
Jeg fant det ikke så overraskende at Adobe støttet seg, men bransjens reaksjon varierte fra "verden slutter" til "aldri brukt det uansett, så hva er big deal". Hva Adobe ikke gjorde var å drepe Flash fordi Apple hatet det. Det drepte Flash i mobilrommet fordi de også hadde innsett: Det må være en bedre måte å gjøre dette på, og både Luke og Ethan viste hvordan.
Det som virkelig tok min oppmerksomhet var at Adobe gjorde det veldig klart, etter at rubble stoppet hoppende, flyttet det over til HTML 5 eller, som de nå kalte det, The Expressive Web big time. Edge, introdusert i august 2011 er ett svar. Adobes nyoppdagede kjærlighet til HTML er tydelig med et nytt nettsted som er en stor stor HTML-bjørnkram og Dreamweaver CS6, som rammet gatene tidligere i år, starter også overføringen i den retningen.
En av de virkelig nifty tilleggene til Dreamweaver CS6 er Fluid Grids, som på en måte samtidig bruker Ethans og Lukes tilnærminger til å designe websider. Hvis du bare begynner å utforske konseptene Mobile First and Responsive Design, så er et flott sted å starte Fluid Grid Layouts fordi, som en visuell editor, kan Dreamweaver du se hva du gjør og hvordan endringer i CSS-krusningen fra en smarttelefon , over en nettbrett og land på skrivebordet.
Da jeg først begynte å grave inn i denne nye funksjonen, følte jeg ærlig at Fluid Grid Layouts var en skjult perle. Etter å ha brukt litt tid på å pakke hodet rundt dem, ringte jeg tilbake den entusiasmen. Jeg kunne ikke hjelpe, men føler at dette er et pågående arbeid. Det var mer som et veldig godt første forsøk i stedet for et solidt tillegg til oppstillingen, og jeg mistenker at det vil bli en Dreamweaver CS6-funksjon som regelmessig oppdateres gjennom Creative Cloud.
Dreamweaver lar deg se hva du gjør og hvordan endringer i CSS-krusningen fra en smarttelefon, over en nettbrett og land på skrivebordet
Fluid Grid-oppsettene er klart basert på Ethan Marcots Responsive Web Design (boken og artikkelen som førte til boken). Med denne funksjonen kan du angi tre væskenett: en for mobil, nettbrett og skrivebordslayout. Hvert nett kan ha 2-24 kolonner; En felles rennbredde mellom kolonnene, og du kan angi hvor bredt rutenettet skal spredes over hver skjerm.
Derefter legger du til divider for væskegitterlayout div for å konstruere siden din i mobillayouten. (Mobile First) Det neste trinnet lander helt i kategorien "strålende" - du kan endre størrelsen på elementene i hvert av layoutene, knipse dem til rutenettet, og flytt deretter enkelt enkeltelementer til å sitte ved siden av og lek sammen med hverandre. Dette gjøres i enten Designvisning eller Livevisning, og best av alt, beregner Dreamweaver automatisk prosentbredden av elementer og marginer til fire desimaler.
Denne beregningen er basert på Ethans formel for mål / kontekst = resultat. Et godt eksempel på dette ville være kolonnebredde. La oss anta at du har en sidebredde på 1232 piksler, og du bestemmer at hver kolonne skal være 350 piksler bred. For å få fluidkolonnebredden deler du 350 (Target) innen 1232 (den Kontekst) = 0,28409091. Du vil da flytte desimal to plasser til høyre for et resultat av 28.409091. Dreamweaver's Fluid Grid layout beregning vil barbere av de to siste tallene for et resultat på 28.4090 prosent. Denne beregningen gjelder for alt som har "harde" nummer knyttet til det, for eksempel skriftstørrelse, margin, polstring og så videre.
CSS laget av Fluid Grid Layouts bruker prosentvis bredde og flyter, så det produserer oppsett som tilpasser seg hvilken som helst skjermstørrelse. Disse stilene er konstruert på grunnlag av "mobil først" og til og med arbeid i nettlesere som ikke forstår medieforespørsler. For de av dere som er nye til Responsive Web Design, er denne ene funksjonen alene nok til å komme deg inn i spillet.
Å være et arbeid pågår er naturligvis "problemer".
For eksempel har Dreamweaver ikke en umiddelbar tydelig måte å vise deg hvilket mediesøk som kontrollerer en bestemt stilregel. Du kan finne ut det ganske raskt, men dette er litt frustrerende først. En annen er en som noen Dreamweaver-brukere har påpekt: Funksjonen støtter ikke nesting-elementer for å skape mer komplekse layouter. Andre manglende funksjoner inkluderer manglende evne til å bruke klasser i stedet for ID og det ville være ganske hyggelig å bruke semantiske elementer som Overskrift eller bunntekst.
Det er også noen få "gotcha" i prosessen som vil bite uønsket, og et par forutsetninger om mobil skjermbredde er litt bred av merket. Jeg skal håndtere mange av disse i løpet av denne serien.
Likevel, Dreamweaver's Fluid Grid Layouts bør appellere til de av dere som begynner å komme inn i RWD-spillet.
Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!
Accentsconagua