Suggestions from a Web Educator for the Dreamweaver Folks at Adobe

I’ve been teaching Dreamweaver again. Yeah, I do it all the time, I know. I have some ideas about what Dreamweaver needs to do to make life easier for newbies who haven’t been using the product forever like I have.

The New Document Options

The Dreamweaver New File dialog box
The Dreamweaver New File dialog box

These suggestions deal with the options for people who are opening a new file and starting to work on a new site.

  1. Get rid of the fixed width layouts.
  2. Provide a 1, 2 and 3 column responsive layout
  3. The Fluid Grid layouts are very complex. Find a way to make them more user friendly. In fact, if there were enough useful responsive layouts provided in the layouts category, fluid grids could go away, period.

The CSS Designer

Regarding the CSS Designer interface, when media queries are present, even if all the CSS rules are in a single stylesheet, the CSS Designer lists them as separate stylesheets. It would be clearer if the terminology was different. Perhaps something like “save the styles in” or “locate the style in” to indicate where to place them in the single stylesheet.

In the panel where the selectors are listed, it would be very helpful if some sort of divider or identifier could be included to indicate which selectors went with which part of a stylesheet. When there are media queries, there are several selectors by the same name. Yes, I know that the selectors at the end of the stylesheet would be the ones used in the @media rules, but that isn’t obvious to someone rather new at CSS.

Why Adobe Should Care About This

I see people who are new to Dreamweaver in my classes. If Adobe wants them to convert to subscribers and users, they need to pay attention to the learning curve on the product. I can’t tell you statistics on how many of the people who come to learn Dreamweaver go away thinking maybe they’ll use WordPress instead, but it’s a good percent. Putting aside my female tendency to be modest –  I’m a good teacher. I’m doing everything humanly possible to make successful Dreamweaver users out of my students. Some attention from the Adobe Dreamweaver team should go into the same consideration.

Adobe Creative Cloud: The Good News and the Bad News

good vs. bad

The good news about subscribing to Adobe Creative Cloud is that you always have shiny fresh, updated software. You’re up to date all the time.

The bad news about subscribing to Adobe Creative Cloud is that you always have shiny fresh, updated software. Every time you update it’s different and you have to figure things out all over again.

The Relevance of Dreamweaver

Stefan Mischook from Studioweb.com posted an article a day or two ago called Is Dreamweaver still Relevant in Web Design? His conclusion was no, it is not.

Granted there are many more ways to make an effective and functional website than there used to be. I often steer people away from Dreamweaver toward some other tool when I don’t think they need to know everything you must know to use Dreamweaver properly.

However, that does not mean that the software is past its useful prime. What that article failed to take into consideration is all the site-wide tools and integrated tools that come with Dreamweaver. Dreamweaver does more than just write HTML and CSS. There are tools save a great deal of time for a developer who knows how to use them. There are tools that track links, update links, manage snippets, write JavaScripts, insert jQuery, write PHP. Dreamweaver works with Photoshop and other Adobe tools in ways that save both time and effort. In many ways, Dreamweaver forces developers to use accessible techniques – something other software doesn’t necessarily do.

I’ve certainly aired some complaints about Dreamweaver since Creative Cloud came along. But that doesn’t mean I think it’s irrelevant.

Anyone who doesn’t know enough to built a good website is going to build a bad website whether they are using Dreamweaver or some other tool. If I use Microsoft Word to write a terrible book, is that the fault of Word? Developers have to know what they are doing. When they do, their choice of software is just a choice. That software will do what they tell it to do.

 

Why isn’t the main element in Dreamweaver CC’s Insert panel?

One of the arguments Adobe uses to convince all of us that we want to fork over a monthly subscription fee for Adobe products is that we get all the latest updates.

So why isn’t the main element among the choices in the Insert panel?

The main element represents the main content of the body of a document or application. By definition, the main element is for grouping content; it is not considered sectioning content. (Sectioning content includes elements such as article, aside, and section which are expected to have headings and possibly navs and footers. Sectioning content shows up in the document outline. The main element does not show up in the document outline.)

Where would Dreamweaver put main?

Is main a structural element in the Dreamweaver menu system? It seems to me that when you are building a page in Dreamweaver by inserting structural elements one by one, the main element should be one of your choices.

Here’s what Dreamweaver CC currently has in the Structure category of the Insert menu.

The Structure category of DW's Insert panel
The Structure category of DW’s Insert panel

There are some helpful HTML5  choices in that menu such as article, section, header, and footer. Why not main? Aren’t we paying the big bucks every month to have the latest goodies at our fingertips? All the new HTML5 elements should be available to Dreamweaver CC users.

Tips on using the main element

The main element can only be used once on a page. The ARIA role="main" is implicit where the main element is used.

Form New Habits for Working with CSS in Dreamweaver CC

The way the CSS Designer in Dreamweaver CC creates selectors is different from the way you may be in the habit of working with previous version of Dreamweaver.

Good, Bad Habits

You now need to know more about creating an appropriate selector. Instead of relying on Dreamweaver to generate a good selector for you based on your selection in the Document window, you need to be ready to decide for yourself what the best selector should be. This is especially true if you are using the CSS that comes from using the Dreamweaver grid layouts. The suggested selectors with a grid layout are quite cumbersome.

If you know what selector you want, Dreamweaver will help you choose it, but you have to know the trick.

A Specific Example

This example comes from a grid system layout. Other layouts might not have such ungainly selectors as default suggestions. If you click the familiar plus sign (+) to create a new selector while something is selected in the Document window, the selector suggested by Dreamweaver gives the full page structure.

The Dreamweaver suggested selector based on something selected in the Document window.
The Dreamweaver suggested selector based on something selected in the Document window.

There is no longer a “Less Specific” option to remove the unneeded parts of this very long suggested selector. The easiest way to deal with it is to remove the entire thing. Do that by typing the beginning letters of what you know you want the new selector to be.

For example, if the element to style is an <a> element nested in an <aside> element, begin by typing as in the editable selector field. Code hint appear giving choices that contain “as.”

Begin typing a selector and Dreamweaver will show you options as code hints
Begin typing a selector and Dreamweaver will show you options as code hints

Using the arrow keys, or the mouse, select aside. To add a descendent selector after aside appears in the editable selector field, type a space and another selector after aside. For this example, type a: and Dreamweaver shows code hints.

The field remains editable so that descendant selectors can be built
The field remains editable so that descendant selectors can be built

From the code hints for :. pick one of them using the mouse or arrow keys. Press Return/Enter when you’ve finally go the selector you want. The selector will turn blue and the Properties Pane for that selector will be populated with all the Property options.

Knowing how to use the code hints provided in the editable selector field will help you get quickly to the selector you need for a particular style.

Tips on Using the Dreamweaver CC Layout Grid

I’ve learned a few things about how the Dreamweaver CC layout grid system works after making about 30 different layouts with it and struggling to figure out its bugs.

One helpful thing is to take a look at the stylesheet that Dreamweaver generates after you’ve told it how many columns you want in the various sizes. This is before you’ve entered any content of your own or added any CSS rules of your own.

Read through it and notice the order of the rules and media queries.


@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height
  and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;

	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	and Golden Grid System by Joni Korpi
	
Home
*/ .fluid { clear: both; margin-left: 0; width: 100%; float: left; display: block; } .fluidList { list-style:none; list-style-image:none; margin:0; padding:0; } /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 96.7391%; padding-left: 1.6304%; padding-right: 1.6304%; clear: none; float: none; } #div1 { } .zeroMargin_mobile { margin-left: 0; } .hide_mobile { display: none; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 91.4836%; padding-left: 0.7581%; padding-right: 0.7581%; clear: none; float: none; margin-left: auto; } #div1 { } .zeroMargin_tablet { margin-left: 0; } .hide_tablet { display: none; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 89.0217%; max-width: 1232px; padding-left: 0.4891%; padding-right: 0.4891%; margin: auto; clear: none; float: none; margin-left: auto; } #div1 { } .zeroMargin_desktop { margin-left: 0; } .hide_desktop { display: none; } }

The styles all flow from the 480 px and below layout rules. Dreamweaver expects you to begin adapting the style rules and adding your content in the mobile layout. Nothing explains that to you, but when the grid you set up in the File > New dialog opens in the Design View, it opens on the mobile view. Notice the size selector at the bottom of the document window, and the 4 column grid in the background.

This subtle clue means start with the mobile layout. Too subtle?
These subtle clues means start with the mobile layout. Too subtle?

Is opening up in the mobile view too subtle a clue? Shouldn’t there be some text somewhere, about starting with the mobile layout?

Once you have the mobile layout done, you are expected to move to the tablet size layout and adjust the fluid grid accordingly.

Finally, you can make any adjustments to the fluid grid for a desktop layout.

Additionally, when the initial grid layout opens in Design View, it contains a div (with the id div1) which you are expect to delete. There’s nothing to alert you to the fact that you should delete this placeholder div and replace it with a header element or whatever you want to add first to your page.

Since Adobe has so few tutorials that illustrate the proper use of the grid layout system, much of what you need to know to figure out the new layout system comes by way of trial and error. I hope my trial and error stumbling and learning experiences can help you get off to a smoother start.

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.