In the previous installment of this series I went over the various stylesheets associated with a fluid grid layout in Dreamweaver CS6. During this tutorial we're going to turn our attention to working with images in our Fluid Xian project.
Fluid Images
Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!
It's a Wrap
This series has been a rather extensive deep dive into the new Fluid Grid Layout feature of Dreamweaver CS6. As I pointed out right at the start of this series, the feature has the feel of being more of a "work in progress" than a full fledged addition to the Dreamweaver line up. Even so, it is a pretty good start and I expect to see it regularly updated through the Creative Cloud.
"Responsive Web Design" and "Mobile First" are concepts that seemingly came out of nowhere, but because they make so much sense in a web world where the medium- smartphone, tablet, and desktop - drives the user experience, they have firmly established themselves throughout the industry.
The Fluid Grid Layouts are Adobe's first "kick at the can" and, if you worked you way through this series, you'll have discovered that Ethan's and Luke's concepts are firmly entrenched in them. Creating grids for mobile, tablet and desktop is the easy part of the process. The hard part is the styling. It is easy to understand once you get the concept of Mobile First - make a style change to the Mobile CSS and that change "ripples" through the the tablet and desktop layouts - but figuring out which of the three is using the Dreamweaver CSS panel is not immediately evident. Another issue is that Fluid Grid Layouts don't support element nesting to create more complex layouts. Other "nice to have" features include the inability to use classes instead of ID’s and being able to use semantic elements like header or footer.
As a teacher, Fluid Grid layouts are an absolute God send
Imaging is another area which could benefit from some attention. Wrangling the CSS is not a major issue but it does require some foreknowledge around how images are handled in in a Responsive Web Design world and how code in the Mobile area affects the tablet and desktop images. This is not exactly easy and has the potential of becoming a major pain point for people new to Fluid Grid layouts in Dreamweaver CS6.
Having said that, you should know my CSS skils are fairly basic and my first experiments with Fluid Grid Layouts were a complete and utter disaster. Once I started grasping the fundamentals of Responsive Web Desingn and Mobile First, I became more comfortable with Fluid Grid Layouts and my trips to the dermatoligist to reimplant the clumps of hair I tore out of my head slowed to a trickle. One of the key questions you may be asking is: "Is this a pro grade feature?" My answer is "Not yet." I can see them used extensively for fairly uncomplicated projects but they aren't quite ready for the big leagues.
As a teacher, Fluid Grid layouts are an absolute God send because, in Dreamweaver CS6, they give my students a visual approach to Responsive Web Design and a solid grounding in the concept of Mobile First. You might want to think of that if you are just starting to get into this new and emerging field.
