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.
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 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 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.
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.
Several times I had a mysteriously misplaced closing </ul> tag on the nav list.
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.
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
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.
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
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.
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.
Happy Thought: It’s easy to insert ARIA roles in code view.