Updated Fluid Grids in Dreamweaver

With Adobe Dreamweaver 12.2 CCM release, Dreamweaver’s Fluid Grid Layouts tool has the following improvements which helps users create responsive web pages more efficiently.

  1. Support for HTML5 Structural elements(Header,Footer,Section,Article etc), H1 to H6 and p tags can also be tweaked visually on the design surface.
  2. Nested elements can be manipulated visually, this was a drawback in the previous versions where nested elements could not be tweaked using the fluid grid layout handles.Users can use the left and right arrow to traverse through the nested and parent elements on the design surface(Live/Design View).
  3. Support for Classes along with ids – In the previous version only id’s could be inserted and used to make tweaks on the design surface , we now have support for classes where similar layout elements could use a class instead of an id. User also has the ability to insert an element without an id or class for example for a header element you might not need specific fluid classes.
  4. Smart HUD options – User can now duplicate elements,delete elements,hide elements,make an element absolutely positioned from within the design surface.
  5. Support for Absolutely positioned elements – Elements can be converted to Absolute Position and manipulated on the Design Surface.

Please watch the Demo video which showcases these improvements.

  • Thnak for the Video post.

  • Very nice features and good explanation, thanks.
    It is very good that we finally can use the HTML5 tags.
    The first version of FG was very limited, in this sense.
    I have two questions:
    1. you showed the new “swap” functionality for fluid divs. Is the “swap” operation applied only to the viewport you’re editing, or is it reflected to all three views? It would be good if we could have different fluid div order for different screens.
    2. how to upgrade a page created with the first version of the FG template? Is there a process that has been tested, or do we have to re-do the pages from scratch?

    Thanks and keep up the good work!
    Riccardo Moschetti

  • When will we see a new licensed copy of Dreamweaver Like CS7 or CS6.5 with all these new features in it? There are some really cool new features been added to dreamweaver!!!!

  • Hey Riccardo,

    The Swap is across all views, it changes hierarchy for the HTML document, Yes that is a good ER you made and we plan to do it in DW next using display table or Flex box.

    You can attach a existing FG CSS using the new document dialog, make sure you attach it as a fluid grid CSS.

    Thanks,
    Silas

  • After seeing this video we can certainly see some improvements in dreamweaver.

  • I understand that the Adobe CEO is Indian, but when you record videos like this one, can you please choose someone who has clear pronunciation?
    After the first 2 minutes it is extremely hard to understand what the tutor is trying to say.

    Otherwise, thanks for the video tutorial.

  • Looks like a fairly crucial update I’d say.

    When will it be available to those with Creative Suite editions of Dreamweaver CS6? I noticed incremental updates available through the software but not this one (12.2)

    I am a teacher at an educational establishment which doesn’t have and is not going to get for the forseeable future, Creative Cloud.

  • I can’t help but agree with Stefan. While these changes are great, the demo video is nearly unlistenable. Between the heavy accent and the constant “ummms” and talking off mic, how can this be released? Seems more like a user review than something released by Adobe.

  • Are you guys coming with a more in-depth video. I pretty much understand most of what is being taught. The language barrier sometimes leads to miss-standing. Is there any where else we can learn more about this?

  • Just bought a Creative Cloud Subscription. None of the feature are showing up????

  • I can’t keep up with the bad pronunciation and far too quick speaking and movements that the is making.
    I did learn a bit more than I knew but I am sure that even I could make a better video for teaching the exact same information without whipping around like a maniac. I have to say it is a very good informational yet somewhat not so good video.. go figure. Take a prompt from people who read the news and hear the clarity of voice for all English speaking people. I watched the video three times and had to go back for quick spurts to try to understand what he was doing from time to time.
    The narrator is a very smart Dreamweaver user but not a good communicator. I will watch another video by him though to learn more.

  • Justin Lloyd says:

    Hi. Just wondering if there was an updated video for fluid grid layouts? The video on the frontpage of Dreamweaver CS6 is still showing the old fluid grid layout instructions. The video above is good, but would like a slower, easier to follow video about nested elements etc. Very much appreciated.

  • It looks like a good update. Is there more videos we can see about fluid grids ?

  • I’m having problems using my completed index page as a template. Once I’ve moved on to the next page and delete certain div and css rules, they too seem to dissappear from the index page and any other completed page. How do I remedy this? As it doesn’t happen when I design in pages normally. I’ve even tried the “display: none;” option but it doesn’t work, it only works for difference screen sizes (desktop, tables and phones) instead of different pages. I really hope you can help me as I now can’t progress beyond my index page.

  • Thanks for the helpful demo. I am able to build pages, but when I publish them, the pieces that look so good in live view and design view get all rearranged on the internet. I’ve started from scratch over and over. Can’t see what I’m doing wrong. I’m using a Mac, Creative Cloud Dreamweaver CS6 fluidgrid layouts. Any advice?

  • I agree with the difficulty in keeping up while trying to listen, agreeing with Mike and Roger’s comments. Plus, in there you point out where you placed sniplets you are using. There is no link to what you are using here so we can have it (also checked directly on the youtube page for this video, no link there).

    Plus there is the major issue, that I’m running on a fresh install of CS6 (and double checked, it is DW 12.2, and when I change to “Designer” Layout to match the video, it is NOT how it is in the video. Where you show on the right column you have sniplets, I have no idea how to get to that even if I did have yours. Giving a tutorial to teach new things, IMO you should be using the default layouts. If people have things set up the way they like, the can easily save their layout, then reset the “stock” one back to default so everyone is on same settings.

    Anyhow, back to the issue of not having the sniplets that are shown in the video, at first I figured well, I’ll just pause the video each time you bring one up, and type it in, Worked good for the HTML for the Quicklinks, but then you go to use a sniplet to add the CSS for them, and in the video you cannot see all the code.

    So now here I am, halfway through the video, and I’m stuck as I can’t follow along. This is very disappointing, this two months after this video of “updates”. The video tutorial that DW directly links to is a Lynda.com video that doesn’t match layouts and features, so it is no good. I google “dreamweaver fluid grid tutorial” and was hopeful this would be something, and now, strike two on videos that cannot be followed.

    If there is an updated video, how about updating video tutorials you link to from DW? Or at least a comment here with a link to it?

  • When will this be released in the licensed version? It is appalling to me that licensed users are only at version 12.0.3 with no way to get to 12.2 unless you pay the subscription fee.

  • Don Gallucci says:

    Can someone please direct me to another video on this topic. I can’t understand what he’s saying, and he has all the code created in snippets which he drops in without explaining the code that he’s. I hand code everything I do, but for an English speaking American, this video is nearly worthless. Again, if anyone can help me to find another video on this update I would be very grateful tia..

  • Don Gallucci says:

    Please do not use snippets that are not explained nor provided. It is an incredible goof. There’s no way to learn from this! Sorry. Please redo!

  • Hi,

    As much as I love CS6, the 12.2 update video is just a sketchy demo and is virtually useless for those of us who are learning how to make use of CS6 12.2′s responsive grid page build workflow. Please remember: The on-screen actions and div manipulation symbols and behaviors have changed very substantially under 12.2. The new 12.2 URGENTLY NEEDS a step by step page build tutorial that illustrates the new flexible grid page build workflow using real world examples. PLEASE HELP US! (People who are not CSS3 coders)

    Thank you!
    A. White

  • How do you get rid of the grid? in the back ground?

    • Hi Aaron,
      Go to Visual Aids in the document toolbar and uncheck the Fluid Grid Layout Guides.
      Let me know.
      -Silas

  • Charlie T says:

    video for v12.2 feature is 2 months old yet most recent update available through Application Manager is v12.03. Trying to decide whether or not to change over from my CS5 to cloud subscription. Is trial version not in synch with paid version?

  • Michael W says:

    I am having issues with updating a website that was created prior to this update.
    For whatever reason when I add a new fluid div I am unable to change the number of columns it spans. It just sticks at 100%. It was working fine before the update but it is now broken as I am unable to update the website. If I have to start from scratch then this will be a massive headache. Any suggestions? Anyone else having the same issue? Cheers.

  • Joshua certain says:

    This video is not explanatory enough. Your use of snippets make the page come together like magic with no explanation. I am very frustrated. It appears your “improvements” of fluid layouts have made the feature harder to use, all while calling it an upgrade.

    PLEASE get a proper video done like the now outdated lynda video

  • Glad to see the Dreamweaver team going for true responsive HTML5 and in addition embrace JQuery. Thumbs up! However, I do have a question. The media query manager doesn’t work with Fluid Grid Layouts, will it work in CC coming june? It would be nice to make new queries in an intuitive way. I really want to design with content aware queries instead of just fixed screensizes. Could code this by hand though, I know, but it would be quicker and easier to integrate this in the Dreamweaver interface.
    As for question number two: How can one change the fluid grid column settings afterwards?
    Hope to hear from you, keep up the great work! Love Adobe! ;-)

  • I watched this video and want to use the new fluid features in Dreamweaver 12.2. I am on a Mac using 12.1 and “Updates” and “Adobe Application Manager” say I am up-to-date in 12.1 for Dreamweaver CS6, and I’m a Creative Cloud subscriber. So how can I get this mythic 12.2 downloaded and installed?

    • Dreamweaver CC build is available now from the AAM update manager, if you install DW CC it has all the Fluid Grid Features.
      Let us know.

      Thanks,
      Silas

  • I don’t understand why Dreamweaver CS6 doesn’t get this update. Since Adobe bought up all the other software vendors and expanded Adobe’s reach while reducing competition, it seems new products are not updated with newest current features of coding/designing/html/css/jQuery/etc. Only way to get state-of-the-art from Adobe for any product one obtains from Adobe is to go on the Cloud and buy a subscription…and keep paying and paying and paying.

    This model of business operation is going to go down the tubes with this new economy that is going to come crashing into our faces.

    I think its time to look for a new monopoly, or rather, a new independent small business (no, I don’t mean a business over $1M.) to obtain software, or just get into coding with older tools.

    Very disappointing.

  • Rob Doran says:

    I just wanted to point out that hgroups (used here in this video) have been removed from the html 5 spec. I guess that feature will be removed from Dreamweaver in the coming CC releases.

  • Mr. D. Pickle says:

    That video is unwatchable. It in insult to post such an unintelligible video as an instructional item.

  • How do we update a fluid grid template created with CS6 to CC? I’d rather not have to recreate the template

  • My fluid grid is set to 12 columns for desktop display. However, somehow I changed just the fluid navigation bar in my header to 11 columns. When I try to use the expansion handles, it shows width at 100% and columns at 11. Everthing else on the page has remained at 12 columns. How do I change the number of columns for one element of a fluid grid layout?

  • I watched the video. It is one of the best videos about fluid grid design using Dreamweaver CS6 I have seen. The pronunciation wasn´t perfect, but understandable without great effort.
    I noticed however that my version of CS6 12.0.3 is lacking many very important corrections and additions. I thought I had the best system ever, but it is lacking abillity of having nested DIVs and more important new HTML5 tags like Header, Section, Articel etc.
    The plan was to upgrade my old, not yet “responding design” homepage written in XHTML, to the state of the art one, but now I am actually not completely sure whether it is possible. Neither am I sure whether the syntax will be completely HTML5 valid according to W3C.
    In my opinion, Adobe is neither providing the product (Dreamweaver) nor service of the same quality, equally for all their customers (the service is obviously only for those subscribing on the Cloud version).
    The cloud subscription is great for those customers needing all kind of special functionality, where the speed and effectness is more important than the price. In my opinion is the subscription price far to high for small companys despite time limited 20% discount for three year subscription!
    Best regards
    Reynir

Share your thoughts

Your email address will not be published. Required fields are marked *

*


3 − = two