Adobe Dreamweaver CC review

Pros

  • Full support for advanced HTML5 and CSS
  • Tight integration with other Adobe apps
  • Unique multiple platform support
  • Works identically in Windows and OS X

Cons

  • Interface can be tricky to navigate
  • Sluggish performance with complex pages

Adobe could have rested on its laurels when updating Dreamweaver to its latest incarnation in the subscription-based Creative Cloud service as Dreamweaver CC. In its previous incarnation as Dreamweaver CS6, part of Adobe's Creative Suite 6, Adobe's advanced website editor already had little or no serious competition as a tool for creating and maintaining today's multiplatform websites.

Dreamweaver CS6, for example, introduced ready-to-use "fluid grid" web layouts that use CSS to reshape web pages automatically according to the screen size, making it easy to build a single site for use with phones, tablets, and desktops without the complex CSS hand-coding previously required.

The new Dreamweaver CC (which costs £17.58 per month for a subscription) enhances the fluid grid feature by supporting HTML5 structural elements such as Sections and Articles. It also adds an equally effort-saving tool, a new CSS Designer that uses an interactive graphic interface for modifying CSS properties like shadows and curved corners, so you only need to click and drag to modify complex CSS code while seeing the results in real-time.

Full support for web-based fonts – downloaded from Adobe's servers while the browser loads a page – makes it easy to create eye-catching designs. Also, like the rest of the Creative Cloud suite, Dreamweaver also gets a simplified and more easily customisable interface, and it works identically under both Windows and OS X.

Pro and semi-pro

Dreamweaver is a professional-level tool that's worth having even if you're a non-professional, providing you can afford it. First-time Dreamweaver users may be intimidated by the multitude of menus and property panels in the default layout, but it soon becomes clear how to use these to get quick access to advanced controls over CSS elements, or to switch quickly between displays that show how a web page will look when printed or when displayed on different size screens.

Advanced web designers can click on a menu of JavaScript-based UI widgets to create pop-up dialogs, date pickers, accordion-style menus, and everything else in the current repertoire of UI effects. But even less advanced users can create flexible HTML5-compliant sites that look good on any platform.

Start weaving dreams

Starting from either a blank page or sample layout, you click on items in an Insert panel to add elements like templates (with editable and non-editable regions), multimedia (HTML5 or Flash), and standard HTML features. The default screen is split into a code pane and a WYSIWYG design pane, but you can choose one or the other, or make the design pane "live" to view media content like video, or content that will be served up from a database when the page appears in a browser.

One thing I admire about Dreamweaver is that it doesn't favour Adobe's proprietary technologies like Flash over open standards like HTML5 video, but gives equal support to both – and even provides a better looking and more usable HTML5 video player than its built-in Flash player.

When you build a page with Dreamweaver's fluid grid feature, the app first creates a page that contains a grid of vertical columns that are visible in Dreamweaver but not when the page appears in a browser. By default, a page designed for phones fits into four of these invisible columns. When the same page is displayed on a tablet, it fills eight columns, and twelve columns when displayed on a desktop machine.

When you switch between screen sizes in Dreamweaver's editing window, the content of your site rearranges itself to fit the width that you specified for the specific type of screen, and you can use the CSS Designer panel to adjust the shape, size, and other properties of individual elements to suit the different screen sizes.

Some advanced CSS features still require manual tweaking to CSS stylesheets, however. For example, if you want to specify the way a page appears when it's printed – or, more exactly, when someone presses a Print button on the page and opens a window with a printer-friendly version of the content – you'll need to get started by creating some hand-coded CSS, but you can make further changes through Dreamweaver's CSS Designer.

One subtle but significant enhancement is the new Source Pro font that Dreamweaver uses in its code window. This monospaced font is one of the clearest ever designed for coding, with letters and numerals designed to make it impossible to confuse the number one with the letter "l" or the number zero with the upper case "O."

One slight disappointment, especially if you haven't updated your hardware recently, is that Dreamweaver can be sluggish in refreshing its design and "live" views after you modify code. Even on my top-of-the-line 2012 MacBook Air, I experienced two second delays when refreshing complex pages, and a similar pause on a 2011-vintage Windows 7 system based on Intel's Core i5 CPU.

Standards and competition

A website editing app like Dreamweaver is only useful if it creates standards-based pages, so Dreamweaver doesn't offer razzle-dazzle proprietary features like the special effects in Photoshop. Instead, the advantage of Dreamweaver is that it provides built-in features for almost the full range of modern HTML, CSS, and script-based web coding, and does so mostly through a graphic interface that doesn't require hand-coding.

Dreamweaver's main competition as a full-scale site designer is Microsoft's Windows-only Visual Studio, which comes in a free version, Visual Studio Express 2012 for Web. Visual Studio is exceptionally powerful as a builder for data-driven sites that support complex queries, but it doesn't even try to compete with Dreamweaver for building visually attractive and graphically complex pages.

Microsoft has stopped updating its superb traditional web page editor, Expression Web, and now distributes it free (search for "Expression Web free version"); I still prefer it as a fast, efficient editor for text-heavy web pages designed for traditional desktop-based browsing, but it's no match for Dreamweaver for modern HTML5 coding. Also, when Dreamweaver creates pages that fetch data from a database, the resulting page works in all modern browsers, while Expression Web's comparable features don't work in Safari or Chrome.

Verdict

Dreamweaver isn't perfect. Even the newly simplified interface can be confusing to navigate, although Adobe typically provides three or four different routes to the feature you're looking for – either from the top-line menu, or the CSS Designer panel, or a pop-up context menu, or by clicking the name of a page element in the main interface. As in previous versions, the raw code that Dreamweaver creates isn't formatted in the elegant way that many hand-coders prefer, although that won't bother most users.

But Dreamweaver is the colossus of website editors, and it's tightly integrated with Adobe's other colossus-style apps like Photoshop so that you can click a button next to an image in Dreamweaver, edit the image in Photoshop, and then return to Dreamweaver with your changes in place. If you're serious about web design, nothing else comes close, and in the web design field, it's the plainly obvious choice now that Microsoft has effectively abandoned Expression Web.