Share
Vandaag ga ik je voorstellen aan de manier waarop Adobe reageert op Responsive Web Design; Vloeiende lay-outs in Dreamweaver CS6. Met deze nieuwe tools kunnen ontwerpers visueel hun responsieve lay-outs bouwen, eerst mobiel, terwijl Dreamweaver alle flexibele berekeningen op de achtergrond verwerkt. Laten we kijken…
Laat me beginnen door je een klein geheim te vertellen; Ik hou gewoon van disruptie. Ik vind het geweldig als er iets nieuws komt dat alles wat we dachten dat waar was, uitdaagt, in een klein balletje vastbindt en het naar de stoep leidt. Dit is een van die tijden en ik vind het geweldig. Ik hou er gewoon van.
De storing was "Responsive Web Design" en "Mobile First", die voor het eerst werden gepresenteerd aan een nietsvermoedende web-industrie in 2010. Denk erover na, de concepten van Mobile First en Responsive Design waren pas een jaar of korter op uw radar. geleden. Toen gebeurde er disruptie.
Voordat ik inga op de nieuwe functies van Dreamweaver CS6 die op deze twee concepten reageren, vind ik het belangrijk dat we begrijpen wat er is gebeurd en hoe deze verstoring tot deze tutorialserie heeft geleid.
Het begon allemaal ongeveer twee jaar geleden voor mij. Ik sprak op een Adobe Education Leaders-evenement op het Adobe-hoofdkwartier in San Jose en had het over de manier waarop docenten wakker moesten worden en begonnen met het actief verplaatsen van wat ik toen "Multiscreen" ontwerp en ontwikkeling in hun klaslokalen noemde..
Mijn epifanie hieromtrent vond plaats in november 2009, in alle plaatsen, op de achterbank van een taxi die door Beijing reed. Toen ik in de cabine stapte, lichtte een scherm op de achterkant van de voorstoel op en kon ik de inhoud erop bedienen. In veel opzichten was het niets meer dan een tablet die in de stoel werd geschroefd en de inhoud draadloos in het apparaat werd ingevoerd. Op dat moment realiseerde ik me echt de kracht van mobiele apparaten, want mijn eerste reactie was: "Dit is het soort dingen dat mijn studenten maken."
Rond dezelfde tijd rammelde ik rond Beijing, in november 2009 zat Luke Wroblewski mijmerend over zijn blog over het ontwikkelen van een eerste mobiele strategie als het ging om webdesign. Een paar maanden later explodeerde zijn mijmering echt ter plekke toen zijn Mobile First-presentatie in mei 2010 werd geplaatst op Linked IN Tech Talks. Deze videolink werd snel door de gemeenschap overgebracht met een "Je moet dit nagaan." Het uitgangspunt was eenvoudig: vergeet het bureaublad, mensen. Ontwerp eerst de mobiele versie van de site en begin dan met nadenken over de desktop.
Hierdoor is het hele webontwerpproces ondersteboven gekeerd, binnenstebuiten gekeerd en de moleculen opnieuw gerangschikt. Hier is het ding: het was logisch.
Bij het ontwerpen voor mobiel was het gebruikelijk om een mobiele versie van de site te maken om de consistentie van de ervaring te waarborgen. Dit ontwerp was meestal een compacte versie van de desktopsite. Als Flash hierbij betrokken was, betekende dit ook verschillende versies van het project gericht op verschillende Flash Light-spelers en -apparaten. Eén reis naar het nu verlaten Device Central was genoeg om me ervan te overtuigen dat dit geen geweldige manier was om dingen te doen. De hele mobiele workflow was zo ingewikkeld en complex dat ik niet anders kon dan denken dat we probeerden een hamer te gebruiken in een situatie waarin een schroevendraaier de beste aanpak was. Mijn meest voorkomende vraag bij het omgaan met dit was om uit te roepen: er moet een betere manier zijn om dit te doen.
Het bleek dat er was.
In mei 2010 publiceerde Ethan Marcotte een vrij interessant artikel over Alistapart. Beantwoord Responsive Design, het uitgangspunt was, nogmaals, vrij eenvoudig: inhoud moet zich aanpassen aan de media die het weergeven, in plaats van andersom.
Dit idee was ook logisch en resoneert nog steeds aan deze dag.
In 2011 is alles echt in een stroomversnelling geraakt. Zowel Ethan als Luke maken met succes hun cases, HTML 5 wint aan kracht in de industrie en vervolgens de aardbeving. Een paar weken na zijn jaarlijkse gebruikersconferentie, Adobe Max, liet Adobe zijn bom vallen. Ze kondigen aan dat Adobe de ontwikkeling van mobiele apparaten op het Flash-platform niet zal redden. Om deze aankondiging in context te plaatsen, moet u dit beschouwen: de 2010 Max-conferentie heeft zo'n grote nadruk gelegd op Flash-mobiel dat ze gratis Flash-compatibele Blackberries, Droids en Google TV uitdelen aan de aanwezigen.
Ik vond het helemaal niet zo verrassend dat Adobe terugdeinsde, maar de reactie van de industrie varieerde van 'de wereld eindigt' tot 'ik heb het toch nooit gebruikt, dus wat is het probleem'. Wat Adobe niet deed, was Flash doden omdat Apple er een hekel aan had. Het heeft Flash in de mobiele ruimte gedood omdat ook zij beseften: er moet een betere manier zijn om dit te doen, en zowel Luke als Ethan toonden hoe.
Wat me opviel was dat Adobe het heel duidelijk maakte, nadat het puin stopte met stuiteren, het overging naar HTML 5 of, zoals ze het nu noemden, The Expressive Web, veel tijd. Edge, geïntroduceerd in augustus 2011 is een reactie. Adobe's nieuw gevonden liefde voor HTML is duidelijk met een nieuwe site die één grote grote HTML-beer-knuffel is en Dreamweaver CS6, die eerder dit jaar de straat opkwam, ook de migratie in die richting begint.
Een van de echt handige toevoegingen aan Dreamweaver CS6 zijn Fluid Grids, die op een bepaalde manier tegelijkertijd Ethan's en Luke's benaderingen gebruiken bij het ontwerpen van webpagina's. Als u net begint met het verkennen van de concepten Mobile First en Responsive Design, dan is een goede plaats om te beginnen Fluid Grid Layouts omdat Dreamweaver u als visuele editor laat zien wat u aan het doen bent en hoe veranderingen in de CSS-rimpel vanaf een smartphone plaatsvinden , over een tablet en land op het bureaublad.
Toen ik me voor het eerst begon te verdiepen in deze nieuwe functie, voelde ik eerlijk gezegd dat Fluid Grid Layouts een verborgen juweeltje waren. Na wat tijd te hebben doorgebracht met het omwikkelen van mijn hoofd draaide ik dat enthousiasme terug. Ik kon het niet helpen, maar voelde dat dit een werk in uitvoering is. Het was eerder een goede eerste poging dan een solide toevoeging aan de opstelling en ik vermoed dat het een Dreamweaver CS6-functie zal zijn die regelmatig wordt bijgewerkt via de Creative Cloud..
Met Dreamweaver kunt u zien wat u doet en hoe wijzigingen in de CSS-rimpel van een smartphone via een tablet en op het bureaublad terechtkomen
De lay-outs van Fluid Grid zijn duidelijk gebaseerd op het Responsive Web Design van Ethan Marcotte (het boek en het artikel dat tot het boek leidde). Met deze functie kunt u drie vloeistofrasters specificeren: één voor mobiel, tablet en desktoplay-outs. Elk raster kan 2-24 kolommen hebben; een gemeenschappelijke gootbreedte tussen de kolommen en u kunt opgeven hoe breed het raster over elk scherm moet worden verdeeld.
Vervolgens voegt u div-elementen voor de divisie voor het raster toe om uw pagina in de mobiele lay-out samen te stellen. (Mobile First) De volgende stap belandt vierkant in de categorie "briljant": je kunt de grootte van de elementen in elk van de lay-outs wijzigen, ze op het raster klikken en vervolgens eenvoudig afzonderlijke elementen verplaatsen om naast te zitten en leuk met elkaar te spelen. Dit gebeurt in de ontwerpweergave of in de liveweergave en het beste van alles is dat Dreamweaver automatisch het percentage van de breedte van elementen en marges berekent tot vier decimalen..
Deze berekening is gebaseerd op de formule van Ethan van doel / context = resultaat. Een goed voorbeeld hiervan is de kolombreedte. Laten we aannemen dat je een paginabreedte hebt van 1232 pixels en je besluit dat elke kolom 350 pixels breed moet zijn. Om de vloeiende kolombreedte te krijgen, deel je 350 (het Doel) door 1232 (de Context) = 0,28409091. Vervolgens verplaatst u het decimaalteken twee plaatsen naar rechts voor een resultaat van 28.409091. De berekening van de Fluid Grid-lay-out van Dreamweaver schaft de laatste twee cijfers af voor een resultaat van 28,4090 procent. Deze berekening is van toepassing op alles waaraan 'harde' nummers zijn gekoppeld, zoals tekengrootte, marge, opvulling enzovoort.
De CSS die wordt gemaakt door de Fluid Grid-lay-outs, gebruikt percentagewaarden en drijvers, dus het produceert lay-outs die zich aanpassen aan elke schermgrootte. Deze stijlen zijn opgebouwd op basis van "mobile first" en werken zelfs in browsers die mediaquery's niet begrijpen. Voor degenen onder u die nog geen ervaring hebben met Responsive Web Design, is deze functie alleen al genoeg om u in het spel te krijgen.
Als een werk in uitvoering zijn er, natuurlijk, "problemen".
Dreamweaver heeft bijvoorbeeld niet meteen een duidelijke manier om u te laten zien welke mediaquery een bepaalde stijlregel bestuurt. Je kunt het vrij snel achterhalen, maar in het begin is dit een beetje frustrerend. Een andere is er een die een paar Dreamweaver-gebruikers hebben aangegeven: de functie ondersteunt geen nestelementen om complexere lay-outs te maken. Andere ontbrekende functies zijn onder meer het onvermogen om klassen te gebruiken in plaats van ID's en het zou best aardig zijn om semantische elementen zoals te gebruiken hoofd of footer.
Er zijn ook een paar "gotcha's" in het proces die de onoplettende zullen bijten en een paar van de aannames over de breedte van het mobiele scherm zijn een beetje overdreven. Ik zal veel van deze in de loop van deze serie behandelen.
Toch moeten de Fluid Grid Layouts van Dreamweaver een beroep doen op diegenen onder u die beginnen met het RWD-spel.
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes of YouTube!
Accentsconagua