Review: Adobe Dreamweaver CC makes CSS more visual, less coder-friendly

With the amazing leaps in Web design over the past couple of years, sites can fall out of style quickly. How do you keep up with the technology, and how do you keep your websites looking fresh and interesting? Adobe’s Dreamweaver CC provides tools that can help you do both, but some people may feel that it distances design from code more than previous versions did.

No more square boxes

Dreamweaver CC’s most obvious enhancement is its new CSS Designer, which provides visual aids for CSS attributes that apply to objects. In Dreamweaver CS6, you could make adjustments in a more basic panel, but you might, for example, have to look at an entry for an object’s border radius and think, “top, right, bottom, left” to make sure that you get the settings’ order correct.

With Dreamweaver CC, you’ll see a box with rounded corners to indicate the radius settings, with the dimensions arranged just inside the corners. You can adjust the settings individually, or you can use the lock icon in the middle of the box to make the settings change all at once. The corners of the box do not change, though—you have to look at the numbers, or at the Design view while in Live view, or in a browser, to see the changes.

Most vexing, though, is that undo and redo don’t apply to changes you make in the CSS Designer window. In fact, if you make a change in the Design panel, make another change in the CSS Designer, and then undo, the change you made in the Design view will be undone.

Previously, if you used Dreamweaver CS6’s Fluid Grid Layout feature to build responsive pages that work in desktop, tablet, and smartphone browsers, the program led you to assign unique IDs to each element newly added to its grid. Dreamweaver CC, however, gives you the option to assign them a global HTML class as you add them, so that, afterward, adjustments you make to the CSS properties of one of the elements affect all of the elements using that class. Dreamweaver CC also provides many more HTML5 components in the Insert menu for Fluid Grid Layouts.

The CSS Designer may make Web design more accessible to people who prefer working with a visual layout—that is, those who don’t work exclusively in code. But even though I do like working in Design view (with Code view open at the same time), I discovered that I also had to concentrate on this large new work area. In fact, I found myself looking more at Design view and the CSS Designer, and losing track of where I was in the code.

Web-fonts fun

Dreamweaver CC makes using Web fonts easier, too. A dialog box shows all of the fonts available in the Adobe Edge Web Fonts library, an open-source font repository that includes fonts from Adobe TypeKit and Google Web Fonts. It does not, however, include all of the fonts in Adobe TypeKit—just the open-source ones. Still, you get a large collection from which to choose, and the variety makes it much easier to replace those bygone-era fonts—Arial, Times, Courier, et al—with jazzy new ones. And, because the fonts are open-source, you can use them on any site you want, for as long as you want. However, you can use fonts from the Edge Web Fonts library for free, without Dreamweaver CC; Adobe even gives you the code necessary to use them.

Because your Creative Cloud subscription allows you to install Dreamweaver CC on two computers (or on a dual-boot Mac running OS X and Windows), you can sync application and site settings between the computers using your Creative Cloud account. Soon, says Adobe, that will include Web-font settings, so when you open a file on the second computer, the fonts you’ve specified on the first computer will appear without your having to set them up again.

If Dreamweaver CC were truly a cloud application, it would be located entirely in the cloud—you wouldn’t have to download the application on each machine—and it would rely on server-farm CPU power, rather than on that of your puny computer. And, you would be able to log in from anywhere, on any machine, on any OS, using your subscription account. But it’s not.

Subscribe to a bigger monitor

Adobe says that Dreamweaver CC’s updated interface makes it more intuitive and offers a smoother workflow, and that you can get things done with fewer clicks. In some respects, perhaps that’s true, but the addition of the huge CSS Designer panel means that Dreamweaver has even more to cram into its interface—so much that I found myself constantly expanding and contracting windows within the application, even when I had it running full screen on a 24-inch monitor. I also found the application quite sluggish with complex layouts, both on a 2011 MacBook Pro with a 2.3GHz Core i7 CPU and on a Windows-based workstation. Adobe says that its rendering engine has caused some performance issues, but that it will address them by replacing the engine in Dreamweaver CC’s next release.

Switching among Dreamweaver’s view modes—the normal mode, Live view, Live Code, Inspect—gets tedious. For example, if you’re in the normal mode, you can’t see the effects of any HTML5 settings in the Design view; you see square boxes instead of ones with rounded corners. In Live view, you see those effects, but you can't edit text in the Design panel (though you can edit it in the Code panel with Live view enabled). Shouldn’t we always be able to see the most accurate representation of our edits?

Dreamweaver CC’s Live view continues to rely on WebKit to display layouts, but you’ll still have to check how your layouts look in browsers that do not rely on WebKit rendering—including Internet Explorer (multiple versions, naturally), Firefox, and any other browsers you need to support. Dreamweaver CS6 had a panel for Adobe BrowserLab, an external service that would show you how your layout would look in different browsers, but the company killed off the service earlier this year.

Bottom line

Dreamweaver CC isn’t a major overhaul; most of Adobe’s work this year went into migrating the program toward the Creative Cloud subscription service. Adobe still has much work to do to make this application and its Creative Cloud siblings truly cloud-based. Nevertheless, Dreamweaver CC remains an inspiring application, with many ways to help you realize your Web creativity. If you’ve decided to subscribe to the Creative Cloud subscription service, then you’ll certainly want to try it out.