My verdict on Dreamweaver CS6

Adobe has officially announced details of Creative Suite 6 (CS6) and the Creative Cloud. What’s particularly significant about this release is that it represents the last chance to skip one or two versions and still benefit from reduced upgrade pricing. Owners of CS3, CS4, CS5, and CS5.5 have until the end of December to upgrade to CS6. After that cut-off point, upgrade pricing will be available only to owners of the immediately preceding version. In other words, to upgrade to CS7 you’ll need to pay full price if you don’t own CS6.

Alternatively, you’ll have to switch to the Creative Cloud subscription service. The Creative Cloud has been very attractively priced, and it holds out the prospect of early updates and some nice bonus extras, such as Typekit fonts, but it has the disadvantage that once you stop paying, you can no longer use the software. I’ll leave it up to you to weigh up the pros and cons of the Creative Cloud. In this post, I’m going to concentrate on what’s new in Dreamweaver CS6 and what I think of it.

If I were to sum up this new version in a single word, I think that “evolutionary” is the most appropriate. The main focus is on CSS improvements, including:

The other main features are a complete overhaul of Dreamweaver’s FTP client, and integration with PhoneGap Build.

Video Training Courses

I have recorded two video training courses about Dreamweaver CS6. The first one is a New Features Workshop, which contains more than three hours of videos showing how to use all these new features. It should be available from video2brain later this week. The other video course is an in-depth treatment of web design and development with Dreamweaver CS6, aimed mainly at beginners and intermediate users. It will be published jointly by Adobe Press and video2brain sometime later. I’ll post more details when they’re available.

Web Font Management

The new Web Fonts Manager in Dreamweaver CS6 installs web fonts into your personal configuration folder, making them available in all your Dreamweaver sites. Installing a font is very simple. You just launch the Web Fonts Manager from the Modify menu, and click Add Font. In the dialog box that appears, click the folder icon to the right of one of the font fields, and select the font. Dreamweaver detects all formats of the font in the same folder, and automatically fills in all the remaining fields, as shown in the following screen shot.

Add Web Font dialog box

Installing a web font makes it available in Dreamweaver’s code hints and dialog boxes. You can also build custom font stacks that incorporate fonts that you have installed. When you select a web font in the CSS Styles panel or CSS Rule Definition dialog box, Dreamweaver copies the font files to a new folder in your site root, and creates a style sheet with the necessary @font-face rule. Web fonts aren’t rendered in Design view, but they’re fully supported in Live view.

My only reservation about the way that Dreamweaver handles web fonts is that it uses a separate style sheet for each @font-face rule. However, it’s easy enough to cut and paste the rules into the top of your main style sheet.

CSS Transitions

Dreamweaver CS6 makes it easy to create CSS transitions—simple animations that smooth the transition from one state to another, for example if you scale up an image when hovering over it. The quickest and simplest way is to use the new CSS Transitions panel, which creates both the transition properties and the styles for the end state in a single operation. The CSS Rule Definition dialog box supports the creation of more complex transitions, such as those triggered on a nested element. Both methods generate not only the standard properties, but also browser-specific prefixed versions. This is a great time-saver because you need browser-specific prefixes for Firefox, Internet Explorer, Opera, and WebKit-based browsers.

I like this feature a lot, but it seems odd that you need to use the CSS Rule Definition dialog box to create more advanced transitions. In my experience, advanced users rarely touch that dialog box. However, if a style rule already exists, you can just click the Edit Rule icon in the CSS Styles panel without having to go through the hassle of the New CSS Rule dialog box.

Multiple Classes

This is something that Dreamweaver users have been demanding for a long time—the ability to apply multiple classes to an element. Hallelujah, Adobe has finally listened. Just select the element in the Document window, and choose Apply Multiple Classes from the Class menu in the Property inspector to open the Multiclass Selection dialog box. This presents you with a list of all classes in your site, as shown in the following screen shot.

Multiclass Selection dialog box

Select the check box alongside each class that you want to apply to the element. If you haven’t already defined the class, you can add it to the space-separated list in the field at the bottom of the dialog box. A long overdue, but nevertheless very welcome improvement.

Fluid Grid Layout

This should be the star attraction of Dreamweaver CS6. In some respects, it’s stunning, but it feels like a work in progress rather than a polished feature. Inspired by Ethan Marcotte’s Responsive Web Design, this feature allows you to specify three fluid grids for mobile, tablet, and desktop layout. Each grid can have 2–24 columns, and you can specify how wide the grid should spread across the screen, as shown in the following screen shot.

New Fluid Grid Layout dialog

You then add fluid grid layout div elements to build the structure of your page in the mobile layout. Next comes the brilliant part—you can resize the elements and snap them to the grid, and move elements to sit alongside each other. All this is done in Design view or Live view, and Dreamweaver automatically calculates the width of elements and margins to four decimal places. The CSS uses percentage widths and floats, so it produces layouts that adapt to any screen size. It’s most definitely not a throwback to the bad old days of Dreamweaver’s Layout mode. The styles are constructed on the basis of “mobile first”, and work even in browsers that don’t understand media queries.

Where the Fluid Grid Layout feature falls down is in Dreamweaver’s inability to indicate which media query controls a particular style rule. Another problem is that it doesn’t support nesting elements to create more complex layouts. It’s to be hoped that these shortcomings will be addressed in an updater. One of the ideas behind the Creative Cloud subscription setup is that new features or improvements to existing ones can be added as soon as they’re ready without needing to wait for the next major release.

jQuery Mobile Theming

The integrated version of jQuery Mobile in Dreamweaver CS6 has been updated to the 1.0 stable version (not 1.1). There’s also a new jQuery Mobile Swatches panel that’s designed to make it easy to change the look of individual elements (see screen shot).

jQuery Mobile Swatches panel

Multichannel FTP

Let’s be honest. In the past, Dreamweaver’s FTP client was a dog. Not any more. It now supports multichannel transfers, and can even download at the same time as uploading. Orange arrows indicate items queued for transfer. When the transfer begins, the arrow turns green. And if you’re transferring a large item, hovering over the filename displays a tooltip of how much of the file has been transferred. With Dreamweaver CS5.5, it took more than 90 minutes to  upload a WordPress site on my internet connection. Now, it’s more than ten times faster.

The FTP error messages are also more meaningful. No one is likely to buy Dreamweaver CS6 for its FTP client alone, but this is a major improvement to the program.

PhoneGap Build Integration

The way that Dreamweaver CS6 supports building native apps for iOS, Android, and other mobile operating systems using HTML, CSS, JavaScript, and the PhoneGap framework has changed completely. It no longer installs the Android software development kit (SDK) and emulator. Nor can the Mac version hook directly into Xcode and the iOS simulator. Instead, there’s a new panel that uploads your files to PhoneGap Build, an online service that automatically packages applications for iOS, Android, webOS, Symbian, and BlackBerry. Using PhoneGap Build is much easier than working with a simulator, because the Dreamweaver panel displays a QR code that lets you load the app directly onto your testing device. However, you need to build the configuration file manually in XML, and there’s no longer any code hinting in Dreamweaver for PhoneGap plugins. So, although the integration of PhoneGap Build is a definite improvement, it feels as though the engineering team didn’t have time to polish some important details.

You can now build an app for iOS on either Mac or Windows, but in order to compile it, you need to create a valid signing key and upload it to PhoneGap Build. The signing key must be created on a Mac. You also need to register with Apple as an iOS developer and pay an annual fee.

Conclusion

I like the new features in Dreamweaver CS6, but I have to admit that they don’t have me jumping up and down with excitement. Maybe that’s because I felt CS5 and CS5.5 were such strong releases, and I was hoping for a similar performance this time. The Fluid Grid Layout and PhoneGap Build features had the potential to be outstanding, but fell slightly short of the mark. As a result, I’d give Dreamweaver CS6 only 7 or 8 out of 10. It’s good, but it could have been so much better.

In fairness to the Adobe engineering team, I understand that a huge amount of work was devoted to solving the long-standing problems with FTP and to converting the Mac version of Dreamweaver to run on Cocoa, the native application programming interface (API) for Mac OS X. The conversion to Cocoa should result in a more stable experience on a Mac, combined with the knowledge that Dreamweaver CS6 won’t suddenly stop working when Carbon is deprecated in Mac OS X 10.8 (Mountain Lion). However, the conversion work means that less time was available to develop or polish other features.

I’ve long felt that the idea of releasing more than a dozen complex programs according to a rigid timetable was impracticable. Photoshop, Illustrator, and Fireworks effectively sat out of the last upgrade cycle, which gave them 24 months to prepare for CS6. Dreamweaver hasn’t had that luxury. As a result, the Fluid Grid Layout and PhoneGap Build integration have some rough edges that could probably have been eliminated with more time. The message that I keep hearing from my contacts in Adobe is that moving to the Creative Cloud subscription model means that new features and improvements to individual programs can be released as soon as they’re ready. The problem is that to benefit from the updates, you need to switch to the subscription model. Anyone buying a perpetual licence will have to wait for the next full version to get the new features.

Getting new features as soon as they’re ready makes a lot of sense in the light of the speed at which the web is changing. What’s far from clear is how successful Adobe will be in persuading Creative Suite users to switch to the subscription model. It’s a big gamble for Adobe.

This entry was posted in AJAX/JavaScript, CSS, Dreamweaver, Video. Bookmark the permalink.

66 Responses to My verdict on Dreamweaver CS6

  1. Richard Call says:

    I’ve been using Dreamweaver CS6 for a couple months, but I have yet to see the multi-channel FTP feature working. Does it need to be turned on somewhere? I could have saved hours this month if that feature were functional. But, I don’t see any sign of it having been included.

  2. David Powers says:

    Multi-thread FTP is the default in Dreamweaver CS6. You can neither turn it on nor off. It handles a maximum of three transfers simultaneously in either direction (so you can download at the same time as uploading). However, it doesn’t work with Check In/Check Out.

  3. Brent Albrecht says:

    Dreamweaver CS 6 is awesome except for the huge problem that ftp only works sporadically. How great is it that for thousands of dollars you can buy software to build websites that cannot successfully ftp files up to a server? The idiots at Adobe should be embarrassed that they cannot get a simple critical function like this to work

  4. Bruce Bix says:

    We have an older version of Dreamweaver from 1996. The issue is that this version creates deprecated tags; leaving the path ahead untenable. Unfortunately, we created a large number of files before discovering this issue.

    My question is, “Is there a way to have Adobe CS6 update these tags [modernizing our files]? Is there an existing conversion routine available?

    Thanks Bruce

  5. David Powers says:

    Hi Bruce, You can use Commands > Clean Up HTML to remove deprecated tags, but it won’t replace them with anything else. You can also use Find and Replace to do some cleaning up. But it’s a tedious process. There’s no simple way that I know of. Sorry.

  6. Dear David,
    I’m an old admirer of your work and books (I have bought your “PHP Development with Dreamweaver”, “Adobe Dreamweaver CS5 with PHP: Training from the Source”, and recently “Adobe Dreamweaver CS5.5 Studio Techniques: Designing and Developing for Mobile with jQuery, HTML5, and CSS3″) and I appreciate very much, besides all, the clarity in which you write and explain the things (besides all for people who are not English or American speaking).
    The reason I’m writing you is because I would like to ask you a step-by-step tutorial on how to update manually the new release of the new version of JQuery Mobile 1.2.0 in Dreamweaver CS&.
    As you surely know, Dreamweaver Support Center has not yet presented the jQuery Mobile 2.0 Extension for Dreamweaver CS6, and I would like to check the new features if possible.
    Could you please write a comment on how to update manually jQuery Mobile 2.0 in Dreamweaver CS6?. I would be really grateful to you if you do so for us your followers.
    Many thanks for being so kind, for your work, books, comments and explanations.
    With my best regards, Adolfo Hauber Torres (I’m based in Madrid)

  7. David Powers says:

    Greg Rewis created instructions for updating the jQuery Mobile files in Dreamweaver CS5.5. I haven’t tested them myself, but Greg was Adobe’s senior Dreamweaver evangelist until quite recently, so I’m sure it’s accurate. Although it’s written for an older version of jQuery Mobile and DW, all that should be necessary is to change the version numbers. If it doesn’t work, let me know, and I’ll look into creating updated instructions myself.

  8. Many thanks David, I will follow this instructions to see what happens,…!!! I will inform you about ;-)) Regards and have a nice day, Adolfo

  9. Something important to take into account,…

    • Mike Ferrari Says: August 8th, 2012 at 12:41 am
    Yes Sascha K., thanks for pointing this out on May 9th, 2012 at 1:30 am. We do have to update multiple locations on the files.
    a) I had to replace the files here:
    C:\Documents and Settings\Mike\Application Data\Adobe\Dreamweaver CS5.5\en_US\Configuration\Third Party Source Code\jquery-mobile
    and I had to update the template files here:
    b) C:\Documents and Settings\Mike.BLUESKY\Application Data\Adobe\Dreamweaver CS5.5\en_US\Configuration\BuiltIn\Mobile Starters
    After that, works perfectly.

    • Neil F Says: July 27th, 2012 at 12:05 pm
    I have updated my Dreamweaver CS6 to jquery 1.7.2 and jquery mobile to 1.1.1.
    Following all the great directions above, it updated without a hitch and corrected many bugs I found after deploying my app. One big problem remains. The new Jquery Mobile Swatches dialog which worked great in 1.6.4 and 1.0 no longer works. Any help would be greatly appreciated.

    • David Norris Says: September 27th, 2012 at 2:58 pm
    Neil – I had the same issue with the Swatches but I found the fix. In addition to the instructions above you must also update the file JQuerySwatch.html located in,…
    a) C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\jQuerySwatch\. Look for the line that refers to the jQuery library and update as follows – script src=”../Third Party Source Code/jquery-mobile/jquery-1.8.2.min.js”.
    Refresh the swatch and your swatches should be back.

    Regards, Adolfo

  10. David Powers says:

    Thanks, Adolfo. When I get a moment, I’ll pull that information together in a single page.

  11. Hi David, I expect everything is OK.
    I just have discovered the existence of Adobe Muse,… What do you think about?
    Could you please write down your first impressions or verdict?
    Many thanks for everything and my best regards, Adolfo

  12. David Powers says:

    Hi Adolfo, My opinion on Adobe Muse is that it’s a great wasted opportunity. It provides a simple visual interface for designing web pages without needing to worry about the underlying HTML or CSS. However, it was designed by InDesign engineers, whose expertise lies in page layout for print. As a result, it attempts to treat the web as though it were print. Muse relies heavily on absolute positioning for page layout, resulting in pages that might look fine on a desktop, but are totally unsuited for mobile devices. The HTML and CSS generated by Muse is extremely verbose, making it impossible to edit in any other program. A website created in Muse must be edited in Muse. I wouldn’t recommend anyone to use it.

  13. Wow, I’m out of words to say, speechless,… Many thanks for your opinion and best regards,…

  14. Rachel T says:

    In regards to the fluid grid layout (which, I must add, is still an incredibly awesome feature for a brand-new coder such as myself), I am wondering if I have to do a lot more intricate coding, or if Dreamweaver can do the work for me on this… I set up my original site with four main div’s for the layout: header, sidebar, content, and footer. I now want to add a form in the content div of one of my pages. After using the Dreamweaver aids to quickly insert a few form fields, I realized the form was not “fluid” like the rest of the page. Looking at the HTML, widths were built in to the code as the form was created. If I take these out and copy/paste some CSS code from the four main layout divs, will this solve my problem? Or should I just leave the form static and make sure smartphone users can scroll over to see the rest of the form? I haven’t even begun to look into working up the PHP to send form data submissions to email…what a headache that will be. I was hoping I could first get this fluid layout question resolved. Anybody know?

  15. David Powers says:

    Hi Rachel,

    The Fluid Grid Layouts in Dreamweaver CS6 are deceptive. Although they create a fluid grid quickly and easily, working with them requires considerable knowledge of CSS. I personally think that Adobe made a mistake in releasing the feature as it currently is. It needs a lot more work before it’s usable.

    The best place to discuss layout and design issues is in the Dreamweaver General Discussion forum on the Adobe website. I spend quite a lot of time there helping people, but you’ll also get the perspective of other users. See you there!

  16. Dear David,
    Regarding the jQuery Mobile 2.0 Extension for Dreamweaver CS6, I have followed the instruction Greg Rewis created for updating the jQuery Mobile files in Dreamweaver CS5.5, but I haven’t success, and at the end I decided to reinstall a new copy of DWCS6 entirely.
    I have also asked twice the Adobe technical support people to publish asap a jQuery Mobile 2.0 Extension for Dreamweaver CS6, but until now they haven’t done anything.
    Could you be so kind to pull all that instructions together in a single page for DWCS6? I will be so grateful to you if you do so. Many thanks in advanced, cause I will be in debt with you ;-)). With my best regards from Madrid, Adolfo