Battle of the WYSIWYGs: Adobe GoLive 6 vs. Macromedia Dreamweaver MX

adobe-golive-6  dreamweaver-mx

Although some web developers balk at the idea of using WYSIWYG HTML editors to develop professional sites, the fact remains that they are widely used by design and development firms and have contributed to making the web a nicer-looking place. The code created by these editors isn’t always clean and lean, but they offer powerful design, programming, and management tools that are well beyond the scope of humble text editors.

Adobe and Macromedia are the two major players in the media development software game, and they have long pitted their various products directly against each other. This tough competition has fostered great improvements to the software at frequent intervals, benefiting the users by making work go faster and look better.

These rapidly developing products put web designers in a tough spot when making a decision about which software to buy. Despite claims by both companies that their product is the definitive solution, there are several notable differences that are important to consider, depending upon your projects, production workflow, and media considerations.

Documentation

To get the most use out of either html editor, it’s necessary to consult the documentation. GoLive provides a nice, thick, printed manual and online help. Unfortunately, most of Dreamweaver MX’s documentation is in electronic form, which is inconvenient if you are trying to preview documents in the browser while consult the program’s Help information. The print manual doesn’t go in-depth enough about Dreamweaver; there is an immense amount of material to cover with the new version that would be more accessible through a nice, dedicated, print manual.

Then again, the “Reference” panel built into Dreamweaver MX is a powerful solution. It integrates information from such sources as O’Reilly, a well-known and respected publisher of computer books, on areas including CSS, HTML, Javascript, and Accessability. It is a great resource within the application, and it is a good learning tool.

dreamweaver-reference-panel

Interface

Generally speaking, I prefer the interface design of Adobe products to Macromedia’s, but between these two applications, Dreamweaver is clearly better.

With the advent of Studio MX, Macromedia’s product interfaces have greatly improved over past versions. The docked panels are easy to access and minimize, making the workspace clean and key elements easy to find. Icons are large and clearly visible at high resolutions and are given plenty of space. The “Insert” panel rests above the document window, smartly grouping object/code types into tabbed sets. The context-sensitive “Properties” panel now combines the functions that were previously scattered over several panels. It is clear that Macromedia put a lot of thought and testing into this new design.

dreamweaver-mx-interface

In contrast, GoLive’s interface seems like an afterthought. The product has difficulty dealing with feature-bloat. Interestingly, the interface is similar to previous versions of Dreamweaver. The program does not always follow operating system standards. In my testing on Mac OS X, for example, the standard of minimizing a palette by double-clicking the tab does not work. A few open palettes quickly clutter the screen. Also, at high resolutions, many of the icons are too tiny and too close together. But the major problem is that the interface quickly becomes overly complex, which could lead to errors during the design process as well as make the review/revision process longer than necessary.

Adobe needs to investigate a new way to organize its interface with screen economy in mind. They do such a great job with Photoshop that it’s obvious the interface development was not as important as adding features to GoLive.

Previewing

A key reason for using a WYSIWYG editor is to allow the users to visually construct web pages within the program. Of course, what you see isn’t going to be exactly what you get, especially taking into account different browser compatibility and behavior issues, but a visual HTML editor should do a fairly accurate job of showing you how the finished product will look.

Dreamweaver MX offers a decent preview within its “Design View,” but that changes once you start adding simple objects such as anchors or complex ones like DHTML layers. The most reliable method of previewing your work in Dreamweaver is to open it directly in the browser. Dreamweaver lacks a direct preview that would allow the designer to switch between different browser and version models. Authors can preview placed SWF files directly in Dreamweaver, which is a nice feature.

GoLive 6 also allows for previews in browsers, but the document sports a “Preview” tab for a quick view directly inside the application.  This is a great idea, but it falls short in practice. The most annoying program feature is the preview’s failure to display table color information properly. This could be a nightmare in certain situations. You can preview QuickTime movies and animated GIFs in this window, but not SWF files and other non-native media files.

Product Integration

Obviously, Adobe and Macromedia play on the strength of integrating their web editors with their other major product offerings. While the ad hype would have you believe that all problems are solved and your work is done 10 times quicker, hype can be misleading.

Dreamweaver MX offers tight integration with Fireworks and Flash, while GoLive does not. Flash MX Actionscript is also supported. Dreamweaver’s integration strategy centers on strong support for Flash and ColdFusion.

GoLive 6 offers a number of interesting features that tie in Adobe’s other products. It has native variable data support, which means automated graphics creation is a reality. GoLive can also generate a thumbnail image of linked PDF documents within the site. Less impressive is the ability to import Photoshop layers to “floating boxes.” This is a useful feature only if your PSD file is simple with few layers. Testing it on some of my own complex production layouts proved to be a nightmare. Invoking the process causes a new “Save for Web” dialog box to pop up for every single layer. Apparently, the only way to cancel this annoyance is to force the program to quit. And obviously, fifty “floating boxes” are not conducive to a streamlined working environment. Adobe needs to revise this feature so it makes sense for more complex designs.

Coding

Few users of WYSIWYG’s get by without dipping into the code, although both of these programs let you do quite a bit of page layout without looking at the html. But the maturation of these editors also makes them attractive to serious coders as a development tool. Both Dreamweaver and GoLive offer useful features for the coding environment.

Both editors offer split views, which means the author can view the layout and source code at the same time. Strangely, GoLive hides this feature in a menu. Perhaps the best coding feature in Dreamweaver MX is “code hinting,” a pop-up dialog box that aids in using correct syntax. GoLive has the “syntax checker,” but it processes after the fact rather than as you write the code.

A great new feature in Dreamweaver MX is the “Snippets” panel, which allows users to save often-used bits of code for reuse in other documents. Inserting the code into your page is as simple as double-clicking on the snippet in the panel. Macromedia provides several useful examples to demonstrate the power of this feature. It’s a timesaver that makes sense.

For novice users, both applications provide templates for easy site development. GoLive provides several ready-to-go site examples to work with the templates, but it is somewhat confusing to figure out how to use them. In addition to offering pre-built designs, Dreamweaver’s template feature is easier to use and figure out, and a handy tab in the main toolbar makes it quick to access.

Site Management

Large websites require careful organization and are often the product of development teams. Macromedia and Adobe both recognize this aspect, and each offers site management schemes.

Both have similar site diagramming. Dreamweaver and GoLive offer an in-program overview of the site and the ability to create a number of new site documents through the diagram/site map function. GoLive’s diagram can be exported as a PDF or SVG document for printing or online presentation. Dreamweaver’s site map may be saved as a PICT file or JPEG, but it is not as refined a solution.

go-lives-diagram-feature-superior-to-dreamweaver-sitemap

When several people work on a site, administering development is a challenge. Keeping organized and making sure that everyone is on the same page is crucial to an efficient working process.

Dreamweaver MX’s integrated check-in/check-out feature is easy to figure out and use. It also includes a site synchronization feature that updates both local and remote files to reflect current changes. The “Site” panel allows easy administration.

GoLive 6’s approach to site management lies in a supplementary application that ships in the same box called the “Adobe Web Workgroup Server.” While it may be slightly more complex than Dreamweaver’s solution, it is also more powerful and comprehensive. In addition to letting team members check files in and out, it also allows direct comparison of file versions within GoLive. It creates a version history and makes a handy revision list to show what changes have been made over the history of the file. Changing the file back to a previous version is a snap. These are powerful and useful controls that give Adobe the edge when it comes to managing large projects.

Development Support

Just as Flash MX has matured into an interactive application development tool, so has Dreamweaver MX. Full support for dynamic forms and server objects covers ColdFusion, ASP, ASP.NET, JSP, and PHP. Server code libraries, additional tag editors and a database panel aid in coding these languages. Supposedly you can build web-based applications and database tools in Dreamweaver with relative ease, although I haven’t tried to do this yet.

GoLive also provides development tools for other technologies, but the support is not quite as diverse as Dreamweaver’s. Of course, you won’t find support for Macromedia’s proprietary ColdFusion development, but that may not bother many. GoLive provides code libraries for ASP, JSP, and PHP, and it provides panel control.

It is encouraging to see both companies implementing these powerful professional development tools into their web editors.  Many designers have previously considered these tasks out of reach and impossible to understand. Anything that makes the design and development process more cohesive is very welcome.

Media Development

Media Development is one area in which GoLive 6 beats out Dreamweaver MX. With GoLive’s built-in tools, users can author content for wireless devices applying a number of standards. Windows users can even preview how this content will look on the devices. Dreamweaver’s support for wireless is limited to extensions available through the Macromedia Exchange, but it does not look to be nearly as robust as GoLive in this area.

go-live-on-a-wireless-device

Most impressive is the ability to edit QuickTime content directly in GoLive. Although you won’t find the kind of professional features available in a video editing program, the basic editing tools will satisfy most multimedia needs.

Summary

If you are trying to decide between these two products, I highly suggest comparing both back-to-back, running the same tasks in each. Each company provides a full-featured trial version that should give you ample time to investigate the software.

I personally prefer Dreamweaver because of its greatly improved interface, the code-hinting feature, and Flash friendliness. Of the two, it’s definitely easier to use and more reliably previews what your pages will look like in the browser. Also, it has an impressive array of development tools for many major application/database technologies that Adobe can’t quite match. Among the design firms, I work within website creation, Dreamweaver is the favorite development/management tool.

Adobe GoLive has several great features that Dreamweaver doesn’t, but the application is suffering from obvious feature-bloat. The awkward interface needs some careful attention, and of the two products, it’s clearly harder to learn. On the other hand, if you are developing for wireless devices or need integrated QuickTime editing, then it’s definitely worth considering.

Adobe GoLive 6
Full version: $399
upgrade: $99

Macromedia Dreamweaver MX
Full version: $399
upgrade: $199