Struggles with Dreamweaver CC’s Grid Layout System

After building about 20 layouts, redoing a couple of sites, and starting and rejecting an uncounted number of Dreamweaver CC grid system attempts, I’m here to describe some of my issues with this tool.

Control Issues

Elements inserted into the fluid grid have controls that appear when the element is selected. In the image below, the div “main” is selected. (Dreamweaver CC does not have a “main” element in the Insert panel yet.) A few controls are shown that can affect the element selected.

Control icons for the element selected.
Control icons for the element selected will move it up or down, hide it, move it up a row, duplicate it, or trash it.

Other controls for elements include the set zero margin.

The set zero margin control
The set zero margin control must be used so that all the list items in the nav will fit in the assigned space.

The controls are lovely – when they appear. Sometimes they just disappear. I had to toss out layouts or parts of layouts and go back to step 1 a number of times because the controls just were not there!

The controls are touchy. Just putting the cursor near the duplicate control – without even clicking on the icon – can duplicate something.

Tutorial Issues

One of the biggest problems I had with using the grid layout system was that the tutorials and videos on the Adobe site are often not applicable to the latest versions of CC. For example, the online tutorials from Adobe suggest that a nav element inserted in the smart phone sized grid will automatically adjust itself to a touch screen type drop down menu instead of a horizontal list display. This does not happen.

Nesting Issues

Several times I had a mysteriously misplaced closing </ul> tag on the nav list.

The mysteriously misplaced closing </ul> tag
The mysteriously misplaced closing ul tag

Maybe this was my own fault for inserting the list items incorrectly, but I was very careful about getting my cursor positioned in the right place before inserting anything. You have to be very careful because placing the cursor in the right spot is extremely difficult. It’s hard to move out of an inserted item and stay within the container grid. In spite of all my careful checking to be sure I was inserting things where I wanted them, I still ended up with closing </ul> tags in places where they didn’t belong.

I also had problems with the closing </nav> tag being in the wrong place.

Seeing Double

Now, the way I think the controls are supposed to work is that you apply them and they change to indicate what you’ve done. If you move something up a row, the control changes to move it down a row. If you apply a zero margin, the option to apply it should go away. (A control to remove the zero margin choice does not appear, by the way.)

In the image below, you can see that Dreamweaver suggests that I can apply the zero margin rule to a list item that clearly already has the class applied.

The control to zero the margin is there, even though it's already been applied
The control to zero the margin is there, even though it’s already been applied

Styling Issues

One of the tutorials I watched suggested keeping the styles and media queries created for the layout in a separate stylesheet from the CSS you write to give your layout a particular appearance, color scheme, fonts, etc. I followed that advice, but found a few strange issues.

I found that doing something like inserting a 1 pixel border on an element can throw off the whole grid and destroy the layout.

Just Annoying

You must assign either an ID or a class to every item you put in the grid layout.

You must use an ID or class for everything you insert
You must use an ID or class for everything you insert

Even if you know that you only want one header or footer or nav on your page, you still cannot insert one into the grid layout system without giving it either an ID or a class assignment.

What I Want

I wish Adobe would do something to make the grid layout system easier to use. Expanding the outline of the container grid to make locating the cursor less exacting would be a help. The disappearing control icons seems to be a bug – I hope Adobe is working on it.

The control operation should require more of a click – a definite click – instead of being triggered by a roll over or some other accidental touch that generates an action.

It would be nice if videos and tutorials were more in your face about which version of Dreamweaver’s grid system the tutorial describes. It’s hard to know what to do when a video tells you something is going to happen and it just plain doesn’t happen.

If there is an Adobe person reading this who can tell me where to find answers to these issues, which tutorial is up to date, or anything else useful about using Dreamweaver CC’s layout grids – help a teacher out, please. Otherwise, when I teach this, my students are going to get an earful about how buggy it is instead of how wonderful it is.

Something Good

Here’s one good thing. It’s really easy to type in ARIA roles as you add layout elements to a page. It has nothing to do with the grid layouts, but I wanted to end on a positive note.

It's easy to insert ARIA roles in code view.
Happy Thought: It’s easy to insert ARIA roles in code view.

9 thoughts on “Struggles with Dreamweaver CC’s Grid Layout System”

    1. It’s more of a usability issue for me. I’ve been using Dreamweaver since the very beginning with few issues, but using the CC version presents many challenges and what feel like obstacles.

  1. I am a DW FG user. I was looking for other FG users and found your blog.
    I will try to answer your queries.

    Control issues:
    Yes , there are times when controls disappear, but that generally happens when I apply extra margin or padding on these elements which are styled by DW. Resolution, which works for me is, I remove all the Extra margin and padding from such elements and insert a non fluid child inside it and move these style there.

    To get the controls back I go to DW FG style sheet and set the width as 100% and I generally get the controls back.

    Tutorial Issue:
    I think, I missed this one, can you share the link ?
    Touch screen type dropdown menu are achieved using JS, I have not seen any JS coming with FG page which can give this facility. I don’t know what have they shown in video.

    Nesting issue:
    To nest the element inside another fluid element, one just needs to place insertion pointer inside the parent element.
    for example: to insert LI within UL, we just need to click inside UL before inserting LI.

    Li will become a sibling of UL when I select UL, by clicking on its border, and then insert LI from insert menu.
    this works for me, every time.

    Doubling issue: Not having a visual way to clear Zero margin sucks. :(.
    But from the screen shot you have put up, I can see that, you have put some margin or padding on that element, as in spite of applying zero margin class, it has not aligned to first column. can you check that once ?
    I guess , since its not aligned to column, DW thinks that it can still make this element align and hence shows it. But I totally agree that its very confusing.

    Other constrain is that they don’t give any way to clear the float on elements created with Class selector. The button used to clear it in ID based element is used to apply zero margin here.

    Styling issue:
    This was very annoying when i started working on FG, as the full layout broke on PX changes.
    To work around this I insert the non-fluid elements inside my fluid containers and then do my custom styling on these non fluid containers. this way I can achieve the same effect, without breaking my layout.

    Just annoying:
    totally agree, There should be one more radio button with the label “TAG”.
    As you suggested, If I want to use tome elements just once or in same fashion all over the page, I don’t need a ID or a class. I can achieve the same using styles applied on tag. They should have thought of it before designing the tool.

    Hope it helps you in working around the constrains.

    1. I forgot to ask my question, for which I came here:
      I need help in creating good responsive menus which work with Dreamweaver FG system, please let me know if you have some ideas around this. I have issues in providing proper spacing in between my menu items if I use just what DW has to offer.

      1. @FG User, thanks for all your tips and for your question. Instead of using the fluid grid tools, I’ve decided it’s easier just to build a site by inserting whatever divs and elements you want and styling them yourself. Much less of a struggle.

        I don’t know where to suggest you look for help on the menus, I haven’t noticed anything about that anywhere and I don’t have anything here that would help you.

  2. The DW Fluid Grid system must be in complete command of the width of all the “fluid” containers. If you add a border, the border adds to the width, DW is no longer in control because you told it do something in regard to width so all the magic buttons disappear because DW has handed control over to you and it’s not automatic anymore. Same thing if you ever dare to actually set a width yourself.
    A warning/explanation/dialog/popup at that moment would be REAL helpful so you could undo.
    You have to use fluid containers for the placement/layout, but put new containers/selectors within them and then style (borders etc.) those which are not “.fluid” containers. That’s the only way to get borders.

  3. Same issue here with the controls, any option to get it back? Am currently building a RWD website using Dreamweaver CC, but it is time consuming to built one using DW CC.

    Looking for an help on the controls part.

Leave a Reply