Applications and Tools

Working With Fluid Images in Dreamweaver CS6


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.

Related Posts
  • Design & Illustration
    Interview With Mobile Interface Designer, Alan PowerPreview
    A chat about designing mobile interfaces with Alan Power.Read More…
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Web Design
    Taking Shopify Theme Development FurtherShopify thumb
    In this final part of our Shopify series we will look at how a deeper knowledge of Liquid will enable you to make your themes even more flexible. This will help you deliver richer and more imaginative store designs.Read More…
  • Design & Illustration
    Photoshop's Role in a Web Design WorkflowPhotoshop and web design preview retina
    The web has undergone some serious changes in recent years and the way in which the web is designed is changing along with it. Photoshop may still be the "go-to" tool for many web designers, but for some, Photoshop is no longer king. In this article, Ian Yates, Editor of Webdesigntuts+ will explain how Photoshop was used in the past, how it can be used in the future, and why. Read More…
  • Web Design
    Applications and Tools
    Getting Started With Dreamweaver CS6 Fluid GridsPreview
    Today I'm going to introduce you to Adobe's take on Responsive Web Design; Fluid Layouts in Dreamweaver CS6. These new tools allow designers to visually build their responsive layouts, mobile first, whilst Dreamweaver handles all the flexible calculations in the background. Let's take a look..Read More…