Adobe Dreamweaver CS4
WYSIWYG web page design and development tool.

By Jon Deragon, Visca Consulting
Wednesday, December 24 2007; 3:30pm EST

Dreamweaver has long been a leader in the HTML design tool space, so when a new major version comes out, there is much anticipation. So now that Adobe Dreamweaver CS4 has been released, let us see whether it lives up to the anticipation.

Dreamweaver CS4 can either be purchased as a standalone product, or as part of an Adobe Creative Suite 4 package. These packages are an excellent way to get a complete studio worth of well integrated web, print, photography, graphics, animation, video and sound production tools in a single box. The tools included are dependant on which package you select, as each package focuses on broad fields of interest and professions.

From disc in drive, to up and running is an effortless process taking only a couple mouse clicks to get everything installed and running as per most Adobe products. Dreamweaver loads into a stylish, attractive new interface that certainly gives it a distinctive taste all its own. Gone is the usually ever present Windows application bar, relplaced with a clean menu bar that optimizes screen utilization. The working space is divided into a primary design window which can be split to show live code; a sidebar with common HTML objects; a panel along the base for defining object properties; and a tabbed panel along the very base of the the work area that automatically rises to show results of Find / Replace operations, compatibility tests and other such information. Everything can be customized, reorganized, docked or removed. The layout works well and keeps clutter to a minimum, which is truly welcome when you see some of the daughnting interfaces of similar tools out there. On top of that, it allows you to skin the environment to fit your specific focus, on-the-fly. For example if you're predominently going to do coding, then simply select that layout from a drop down and presto - the program reconfigures the layout for optimal coding. Brilliant.

So it has a slick new look, but what about under the hood? There are a ton of new time saving and productive new features that once you try you wont be able to live without. First up is the ability to have a live browser accurate rendering of your pages as you design them; infinitey helpful to designers needing immediate feedback as to exactly how they're pages are shaping up as they produce them. A real time saver that reduces or eliminiates the need to constantly preview pages repetitively in browser windows. The fact that Dreamweaver intelligently loads include files automatically while in design mode is also fantastic.

The related files feature automatically gives you access to all includes that are called from a parent page. For example, if you load an HTML page and it's dependancies are a Javascript file, CSS file and an assortment of includes such as a header, footer and menu bar, Dreamweaver will automatically load these as sub pages and allow you to edit them. High five to Adobe for this one. The only complaint on this otherwise excellently executed feature is that if you change any of these dependancy pages you cannot save the changes unless you either open it as a full page tab or do a Save All. While day to day loading and saving of files is without problems, the loading of large libraries of files simultaneously can unfortunately lead to application instabilities. This is even apparent in our quad core, 4GB memory test box. While we are talking dozens of complex files at at a time, we would have preferred to not worry about the potental for application crashes in such circumstances.

The code navigator lets you see the hierarchy of tags that a particular object or element in your design is composed of. It is a good way to visually step through all of the tags that make up a particular part of your design; great for debugging funky output. As with CS3, we comend CS4 for its easy approach to changing object properties. While tools like Microsoft Expression Web require opening windows to set attributes, a bulk of attributes in Dreamweaver are in plain view at all times, within the lower panel of the page. And adding objects to pages is equally easy, drag and drop objects from the sidebar; which is broken down into major categories of objects in a simple to use drop down. Making adjustments to tables in design mode can sometimes be an arguous process because the adjustment handles can be a bit finiky, but otherwise the table tools are informative and flexible. Another design mode issue is when content within a table is modified, for example content is taken out, you must take your mouse out of the table in order for it to update its new dimensions on the screen. This can sometimes be annoying, but by no means a major issue at all. In general all of the typical day-to-day objects like form fields and image insertions are incredibly easy to perform and modify.

On top of that, cutting code directly in source mode is often expedited through the use of its intelligent coding assist which predicts closing tags, helps list attributes and properties for insertion into tags, and not in an annoying overzealous way. A definite negative though, is the lack of on-the-fly spell checking within the design view. You must initiate it from a toolbar menu item - this certainly needs to be contemporized with real time spell checking, something we were expecting to see in CS4.

PhotoShop users will love the ability to take your PhotoShop source files and drop them directly into Dreamweaver for editing and integration. No more opening PhotoShop just to make quick adjustments. Also, for those of you that are more creatively inclined rather than coding experts; CS4 offers easy ways to create dynamic content driven pages without the need to learn complex programming or knowing how to use XML data structues. This is great, as often if a client needs simple data loading into pages and the designer doesn't have sufficient programming skills, it would need to be sent to a coder. Now that same designer can take on those simple tasks themselves.

At the end of the day however, it all comes down to how good the code is that it produces... and we're happy to report its clean and reliable. Very little post design cleanup work is required, with the code often perfectly optimized straight from the tool. It is such a relief to know you don't have to go sifting through code looking for redundant or out of place tags, or worry about compatibility or rendering problems. Almost every time it’s a home run with Dreamweaver. Notepad users, its time to abandon your antiquated ways and get with the times... this latest generation WYSIWYG editor is smart and an unbelievable time saver.

In all, we're glowing with praise for the latest installment of Dreamweaver. It offers a comfortable, reliable and timesaving environment that the competitors simply cannot touch. We were fond of Dreamweaver CS3, CS4 took that successful formula, further refined the interface and added 'gotta have' features. This results in a definite winner that web designers will be sure to enjoy using. Should CS3 owners upgrade? Some of the new timesaving features may pay for themselves pretty quickly, so it should definitely be considered. In terms of competition, a product like Microsoft Expression Web (which would be the primary competitor) simply doesn't have the usability, reliability, features and ultimately the quality of code produced to compare.

Adobe Dreamweaver CS4 is both Windows and Mac OS compatible. Windows requires 1GHz or faster processor, Windows XP SP2 or Vista Home Premium, Business, Ultimate or Enterprise with SP1, 512MB memory, 1GB drive space, 1280x800 display and DVD-ROM drive. Mac OS requires PowerPC G5 multi-core Intel processor, Mac OS X v10.4.11 - 10.5.4, 512MB memory, 1.8GB drive space, 1280x800 display resolution, DVD drive. Recommended retail pricing is $399 or $199 for the upgrade. It is available immediately at all major electronics retailers and at the Adobe online store.

PROS - Intuitive interface layout, menus and property windows; related files and automatic include file display real time savers; clean code output requiring only mininal post cleanup; live browser view; skinable interface depending on your focus a great addition; overall good quality and attention to detail.

CONS - Occasional difficulty in handling large numbers of open files; lack of on-the-fly spell checking; sometimes finiky table adjustment handles; having to take the cursor out of tables for them to readjust.

About The Author
Jon Deragon is president and founder of Visca Consulting, a firm specializing in web site design, development and usability for businesses of all sizes. His many years in the technology industry has enabled him to write quality, in-depth product reviews to assist businesses make more informed technology purchases. He welcomes any questions or comments you may have regarding his company's services, this review or interest in having your company's products reviewed.