Adobe Dreamweaver CC 2015 review: A return to form

Dreamweaver’s problem has always been keeping pace with the web. That might sound odd, given it’s an application for creating websites – either through hand-coding or various layout-orientated tools and views – but web technology never stays still for long. To remain relevant, you can’t unveil a new and exciting tool in your software that everyone needed two years ago, but that’s now broadly obsolete.

In recent times, it’s therefore surprising how light some Dreamweaver updates have been, to the point where you began to wonder whether “natty new icon” would eventually be a headliner. In Creative Cloud 2015, however, it seems as though what Dreamweaver can do and what modern web designers need it to do are finally converging.

A responsive web

Having “create responsive websites” as this update’s flagship feature is probably enough to make most web designers choke on their overpriced lattes. It’s not as if Adobe has only just discovered responsive web design (a mere five years after the rest of the industry); it’s just that, with this update, it seems the company finally “gets” responsive design – and has provided some useful tools to go with it.

In Live view, for example, you now get colour-coded Visual Media Query bars above your web page: green for queries using max-width; purple for queries with min-width; and blue for queries with both. Clicking a bar automatically resizes your page in Live view to the relevant breakpoint, and there’s also a scrubber bar for manually dragging your layout around, just as you would when testing in a browser.

When designing from scratch, Bootstrap integration now gives you a headstart, and there are six templates from which to choose. Adobe’s demo site, Vermilion, showcases the advantages of this approach particularly well, with columns that are draggable, enabling you to resize them without creating a hideous mess of code. (Take that, Dreamweaver circa 2005!)

If you’re a coding purist who loathes the relative bloat of Bootstrap, the rest of these tools work just as well with your own sleeker sites.

Testing times

The other big new feature that should get you properly excited is multiple device previewing. Adobe has form in this area. With Adobe Edge Inspect, you can load a site in Google Chrome, fire it at multiple devices, and then fiddle about with the code inspector; all the while, you can watch live updates of the results of your tinkering.

In effect, you can now do all this directly from Dreamweaver. For all devices that are online and signed into your Adobe ID, you either scan in a QR code or enter a URL into a browser. When you subsequently update your layout in Dreamweaver, it will refresh on all of your devices within a second or so.

Presumably, this was designed with mobile in mind – to test in-progress sites on iPads, iPhones and Android devices – but it has wider scope. It’s possible to use the same URL in a desktop browser on a second display and/or in a virtual machine running an alternate OS. This is a big time-saver, and reason alone for switching – or at least, if you’re a lapsed Dreamweaver user, returning the application to your toolkit.

Code faster

Designers primarily interested in Code view receive some decent updates, too. There’s support for linting code, to weed out errors in real-time, and also Emmet. The latter is a system that enables you to type something like “#menu>ul>li*5”, hit Tab and then have your abbreviation expand into the full code (in this case, a five-item unordered list within a div that has an id value of “menu”). There is a learning curve, but once mastered Emmet is extremely powerful, and it’s great to see baked-in support.

Two additional Code view updates especially caught my eye. The first is one of Adobe’s “technology previews” (or “unfinished bits”), which highlights all instances of a double-clicked term. Although useful for quickly spotting specific elements or class values, it’s most handy for rapidly finding terms within a page’s copy. New previewing capabilities also prove useful, displaying a popup when you hover the cursor over an image or colour reference. The pop-ups are a bit small, however, and I did end up wishing this feature worked with a bunch of other things, such as links. Perhaps in 2016.

More of the same

Elsewhere, changes are more subtle and variable. The Extract pane will now automatically save out multiples from PSDs, to cater for various screen resolutions, but the process requires uploading your PSD to Creative Cloud. That isn’t much help when you’re on the move or don’t have insanely fast broadband. There’s also the integration of Adobe Stock, marketplace, and some minor fiddling with the interface.

The most notable change to the UI is a new DOM panel, which resembles equivalent features in the vein of Coda. You can use it to quickly scan the structure of your document and shift things around. It could really do with a means to expand and contract all nested items within an element via a single click, though. It also feels cramped and cluttered, which is a criticism that can be levelled at Dreamweaver as a whole. Although many of the new features are pretty great, it doesn’t feel all that pleasant to use. Its “Adobe OS” stylings still feel alien to both OS X and Windows.

Verdict

In many ways, Dreamweaver remains the most ambitious web design application around, aiming to appeal to all-comers. It has tools for ardent hand-coders and also designers who prefer working in a more visual manner. Although legacy cruft remains stubbornly welded to the application – Design view still lurks behind Live like a bad smell, reminding you of the bad old days of web design – there’s a clear effort here to bring Dreamweaver kicking and screaming into the present.

In a sense, Dreamweaver’s broad remit may continue to be its undoing, and plenty of designers continue to ditch Adobe’s giant in favour of smaller and more efficient alternatives. However, with the bad bits primarily being the interface and the good bits plentiful and genuinely useful, Dreamweaver is at least worth another look if you’ve long abandoned it, especially if you want to speed up design and testing workflow across multiple devices.