As promised, Adobe is releasing a public beta of the next major version of Dreamweaver with a dark UI and integration of Brackets as the code editor. The Dreamweaver CC 2017 beta is available to anyone who has an Adobe ID. You don’t need to have a subscription to the Creative Cloud.
I’ve been experimenting with the beta. Apart from the changes in the UI, it’s heavily geared towards web developers who are comfortable working directly with code. Here are my initial impressions.
First up, it’s important to point out that this is a beta. Don’t expect everything to work 100% smoothly. There are also some aspects of the dark UI that are incomplete. For example, the Property inspector in the Windows version hasn’t been converted to the dark theme, some icons are difficult to see, and code indentation tends to be a bit haphazard. Nevertheless, I found it to be fairly solid, and there are a lot of things that I like about it.
The first thing you will notice (apart from the dark UI) is that there has been an attempt to streamline the UI. The Document toolbar has been stripped down to just three buttons: Code, Split, and Live (you can still get to Design View by clicking the down arrow to the right of the Live button). Although it gives the program a clean look, I’m sure many people will complain that it occupies too much screen real estate by stretching the full width of the screen. You can, however, convert it into a small, floating toolbar by dragging the far left edge away from the top of the screen, and then parking it out of the way of your work, for example in the Visual Media Queries bar. Unfortunately, the only place you can dock it is back in the original position at the top of the screen.
You’ll also notice that what used to be the Coding toolbar now stretches the full height of the Document window on the left of the screen. It’s been renamed the Common toolbar, and is now context sensitive. When the focus is in Live View, you get buttons that apply only to Live View. When the focus is in Code View, you get a full range of icons related to working with code. A useful feature is the option to customize the Common toolbar. Just click the icon with three dots , and deselect the check boxes for icons you want to remove. There’s no option, though, to add new functions to the Common toolbar, nor to reorder the icons.
One widely used icon that’s missing is Preview in Browser. I’m told this is because Dreamweaver will eventually integrate Live Preview from Brackets. To preview files in a browser, you need to go to File > Preview in Browser. Alternatively, use the keyboard shortcut F12 on Windows or Opt+F12 on a Mac.
If you’re not a fan of the dark UI, you can change it to a light theme by opening the Preferences panel (Edit > Preferences on Windows, Dreamweaver > Preferences on a Mac). In Beta 1, there’s a UI Brightness slider at the bottom of the General category. By default, it’s set to 0.33 (Dark). You can change it to Darker (0.00), Light (0.66), or Lighter (1.00). There are intermediate settings, but I’m told the plan is to settle on just four eventually.
Code View is set by default to a dark theme. To change it to a light theme, go to the Code Coloring category of Preferences, select it from the Theme drop-down menu, and click Apply. In Beta 1, there are just two themes for Code View, but a later release should have a much wider range of choices. The ability to change the colours yourself has been removed. Adobe says hardly anyone ever used that part of Preferences. In future, you will need to edit a configuration file if you want to fine tune code colours, but that’s not an option at the moment.
In a later beta, the options for the UI and code colouring themes will be in a separate category of a revised Preferences panel, most likely called Interface or Appearance.
Main menus reorganized
The main menus have been given a major shake-up, and you might find some items difficult to find. The Commands menu has disappeared, so Apply Source Formatting has moved to the Edit > Code menu. To toggle toolbars on and off, you now need to go to Window > Toolbars instead of View > Toolbars.
Most of the changes to the main menus make sense, so there shouldn’t be too much disruption.
One new menu is dedicated to Find. Unfortunately, the revamped Find and Replace functionality wasn’t ready in time for Beta 1, so you can’t really test that part of the new UI yet.
Changes to Code View
The really big changes are in Code View. This is still a work in progress, but my favourite features include the automatic insertion of closing braces, parentheses, brackets, and quotation marks, and a bunch of useful keyboard shortcuts:
- Ctrl+D (Win), Cmd+D (Mac) — Duplicate line or selection
- Ctrl+Shift+D (Win), Cmd+Shift+D (Mac) — Delete line or selection
- Ctrl+] (Win), Cmd+] (Mac) — Indent line
- Ctrl+[ (Win), Cmd+[ (Mac) — Outdent line
The great point about these shortcuts is that the cursor can be anywhere on the line for them to work.
Talking of cursors, Dreamweaver now has multiple cursors. Hold down the Alt+Shift keys on Windows, or the Option+Shift keys on a Mac, and press the up or down arrow to add the cursor to the previous or following line. With a multiple cursor, typing on one line adds the same code simultaneously on each line — great for adding the same class to multiple elements quickly.
You can also make column selections by holding down the Alt or Option key, and dragging vertically and horizontally. To add non-contiguous selections to the current selection, hold down the Control key on Windows or the Command key on a Mac, and drag. You can then make the same edit to all selections in one go.
Other great features in Code View are Quick Edit and Quick Docs. To use Quick Edit, position the cursor anywhere in the name of an HTML tag, or in an ID or class attribute (either the name or the value), then press Ctrl+E (Win) or Cmd+E (Mac). Code View slides open to reveal an editable window exposing the style rules that apply to that element, allowing you to make a quick adjustment. Quick Docs works similarly. Position your cursor anywhere in the name of a CSS property, and press Ctrl+K (Win) or Cmd+K (Mac) to display details of the property and the values it accepts.
Sass and LESS integration
Dreamweaver CC 2017 now features full integration of Sass and LESS CSS preprocessors. Compilation is turned on by default, so if you’re using a separate build system, it’s important to turn off compilation. This needs to be done separately for each site in the CSS Preprocessors > General section of the Site Setup dialog box.
By default, Dreamweaver generates the CSS output in the same folder as the source files, so you should define the output and source folders for the current site before using Sass or LESS. Otherwise, you’re likely to end up with a disorganized mess.
In addition to Sass and LESS, Dreamweaver will also automatically install the necessary files for the Compass and Bourbon frameworks.
I’ve not had chance to test this myself, but a really welcome addition to this version of Dreamweaver is crash recovery. As long as the files have been saved at least once, Dreamweaver will attempt to save your work before closing down in the case of a crash. However, apparently this doesn’t work if a dialog box is open at the time of the crash.
Adobe wants to hear what people think about the changes. To send feedback, click the icon at the top-right of the screen, fill in the form, and submit it.
The feedback form will occasionally pop up asking what you think of a feature you have just used. You can simply dismiss it. But if you’ve got something to say, this is your chance to influence the future direction of Dreamweaver.
From what I’ve seen so far, I like the direction that Dreamweaver is going in. But I don’t think this will suit all Dreamweaver users. The focus in this Beta is very much on improvements for coders rather than design-oriented users. I’m sure many people will complain that Dreamweaver’s becoming too difficult to use.
In one sense, they’re right; but I don’t think Dreamweaver is to blame. Web development has become increasingly complex in recent years. Dreamweaver is simply trying to keep up. Whether it will succeed in attracting new users who feel comfortable working with raw code and (relatively) advanced features, such as CSS preprocessors, remains to be seen.