Share
In de vorige aflevering van deze serie heb ik de verschillende stylesheets besproken die horen bij een vloeiende rasterlay-out in Dreamweaver CS6. Tijdens deze tutorial gaan we onze aandacht richten op het werken met afbeeldingen in onze Fluid Xian project.
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes of YouTube!
Deze serie is een vrij uitgebreide diepe duik in de nieuwe Fluid Grid Layout-functie van Dreamweaver CS6 geweest. Zoals ik al aan het begin van deze serie heb opgemerkt, heeft de functie het gevoel dat deze meer een "work in progress" is dan een volledige toevoeging aan de Dreamweaver-line-up. Toch is het een redelijk goede start en ik verwacht dat het regelmatig wordt bijgewerkt via de Creative Cloud.
"Responsive Web Design" en "Mobile First" zijn concepten die schijnbaar uit het niets zijn ontstaan, maar omdat ze zo zinnig zijn in een webwereld waar de middelgrote smartphone, tablet en desktop - de gebruikerservaring aandrijven, hebben ze zich stevig gevestigd zichzelf in de hele industrie.
De Fluid Grid Layouts zijn de eerste "kick at the can" van Adobe en als je je een weg door deze serie hebt gewerkt, zul je hebben ontdekt dat Ethan's en Luke's concepten er stevig in verankerd zijn. Het maken van grids voor mobiel, tablet en desktop is het makkelijke deel van het proces. Het moeilijke deel is de styling. Het is gemakkelijk te begrijpen zodra je het concept van Mobile First hebt - maak een stijlverandering in de mobiele CSS en dat verandert "rimpelingen" door de tablet- en bureaubladlay-outs - maar uitzoeken welke van de drie het Dreamweaver CSS-paneel gebruikt, is niet meteen duidelijk. Een ander probleem is dat Fluid Grid Layouts geen ondersteuning bieden voor element-nesting om complexere lay-outs te maken. Andere "nice to have" -functies zijn onder meer het onvermogen om klassen te gebruiken in plaats van ID's en semantische elementen zoals kop- of voetteksten te kunnen gebruiken.
Als docent zijn de lay-outs van Fluid Grid een absolute God-send
Beeldvorming is een ander gebied dat enige aandacht zou kunnen krijgen. Het helen van de CSS is geen groot probleem, maar het vereist enige voorkennis over hoe afbeeldingen worden verwerkt in een Responsive Web Design-wereld en hoe code in het mobiele gebied de tablet- en bureaubladafbeeldingen beïnvloedt. Dit is niet bepaald eenvoudig en heeft het potentieel om een belangrijk pijnpunt te worden voor mensen die nieuw zijn in de Fluid Grid-lay-outs in Dreamweaver CS6.
Dat gezegd hebbende, zou je moeten weten dat mijn CSS-skils vrij eenvoudig zijn en mijn eerste experimenten met Fluid Grid Layouts een complete en totale ramp waren. Toen ik eenmaal de basisbeginselen van Responsive Web Desingn en Mobile First begon te begrijpen, werd ik meer vertrouwd met de lay-outs van Fluid Grid en mijn uitstapjes naar de dermatoligist om de bosjes haar opnieuw te implanteren die ik uit mijn hoofd scheurde, tot een straaltje. Een van de belangrijkste vragen die u mogelijk stelt, is: "Is dit een professionele functie?" Mijn antwoord is "nog niet." Ik kan ze uitgebreid gebruiken voor redelijk ongecompliceerde projecten, maar ze zijn nog niet helemaal klaar voor de grote competities.
Als docent zijn Fluid Grid-lay-outs een absolute God-send omdat ze in Dreamweaver CS6 mijn studenten een visuele benadering van Responsive Web Design en een solide basis geven in het concept van Mobile First. Misschien wil je daar aan denken als je net begint in dit nieuwe en opkomende gebied te komen.
Accentsconagua