I am really impressed by how Adobe has adopted Dreamweaver, added some cutting-edge technologies, then made it easier for everyone to create great websites.

Isn’t it ironic that, when [1] Adobe bought Macromedia, it suddenly had two competing web design applications on its hands—Dreamweaver and its very own GoLive? There was a lot of speculation what might happen, and for awhile it seemed GoLive might stick around as some sort of web design app for hobbyists and novices. Now we know that GoLive has gone the way of LiveMotion and Dreamweaver is the application Adobe will champion for web designers. I haven’t had a chance to see a Dreamweaver CS3 demo other than what’s been on [2] the webcast, but I do have the latest information on the new application—and I’m dying to get my hands on it.

A COUPLE FOUR-LETTER WORDS

Those four-letter words are “Spry” and “AJAX”. AJAX, for those who don’t know, is Asynchronous JavaScript And XML—a technology that leverages JavaScript and XML to achieve near-Flash level interactivity without Flash or any plug-in technology. Moreover, JavaScript can send and call for data from server-side scripts anytime (hence the “asynchronous”) and no refreshing of the browser is needed. Consider it something like a “smart” webpage. Adobe responded to the promise of AJAX with [3] Spry, an Adobe Labs initiative. Spry is a library of JavaScripts that allow easy creation of AJAX-based user interfaces, and the cool thing about it is that almost all the code is HTML—accessible to everyone who has some web experience.

Dreamweaver CS3 is equipped with a library of Spry widgets and Spry effects, both AJAX-based. Spry widgets are user interface components that allow dynamic, XML-driven lists and tables, tabbed interfaces, validation-capable interfaces and more. Spry effects create visual transitions such as fades, and can be applied to almost any HTML element—and they don’t require server-side scripts or logic, so it works without refreshing the page.

[4]

Spry widgets in action. Note the toolbar at the top, data in the Bindings panel and the properties in the Properties panel. Click this image to enlarge.

Judging by the screenshots I have seen, there may not be that many Spry widgets and effects available quite yet. In the spirit of Macromedia’s old Extensions Manager, I would love to see Spry effects and widgets developed outside of Adobe and able to be imported into Dreamweaver. Other CS3 apps are bringing user input to the applications (notably Illustrator CS3 and its kuler palette) so maybe we will see a similar thing happen with Dreamweaver and its Spry framework.

DRAG-AND-DROP INTEGRATION WITH PHOTOSHOP AND FIREWORKS

[5]

The Image Preview dialog box. Click this image to enlarge.

Those who are print designers know that InDesign, Photoshop and Illustrator have been tightly integrated for some time now. Adobe has brought that integration model to Dreamweaver CS3, Photoshop CS3 and Fireworks CS3. Native Photoshop files are now fully supported by Dreamweaver CS3: drag and drop a Photoshop document into Dreamweaver CS3 and it goes right in, or select a piece of a file and paste it in. Dreamweaver CS3 brings up an Image Preview dialog box (pictured) to help optimize the file. If you need to edit, double-click the image and the original will open in Photoshop.

I’m not sure how this feature will function, and I worry that (1) the Image Preview dialog box will be cumbersome and (2) revising graphics will involve a lot of back-and-forth optimization all the time. I can’t know for sure until I work with the application, but those are just two concerns I have as I read the information.

CHECKING BROWSER AND CSS

[6]

The Browser Compatibility Check, uncovering a bunch of IE CSS bugs. Click this image to enlarge.

I have a beef against Dreamweaver and its browser and validation checks. I don’t know how many times Dreamweaver 8 has said a webpage of mine will display fine in browsers, or that it is XHTML 1.0 Strict, only to find some problems when I test it myself or use the [7] W3C Validator. Dreamweaver CS3 sports a new Browser Compatibility Check that looks great, but it seems to focus only on CSS browser bugs. Adobe goes further with the CSS Advisor, a new website it has that lists CSS browser bugs and solutions. Users can comment, rate bug entries, and add their own bugs. I think it’s a great step forward, though I also hope they took a look at the current validation checks and made sure they are accurate.

CSS GOES MAINSTREAM

The last two major improvements in Dreamweaver CS3 are all about CSS, the web technology used to style and dictate webpage structure and design. Dreamweaver has done much to make CSS easier to implement in the past two versions, and for CS3 we are given CSS templates and CSS management tools. The CSS templates are solid: there’s a lot of choices for one-, two- and three-column page structures and they are well-presented in the New Document dialog box. When a technology is pervasive enough to be offered in templates like these, you know it has hit the mainstream. Dreamweaver CS3 also helps template users after the New Document dialog box: each template has comments in its code to help guide novice CSS coders. I think it’s great that Adobe went above and beyond by helping designers throughout the CSS process, rather than give them a bunch of templates and then leaving it to them to figure it all out. Maybe Adobe should have called this product “Dreamweaver CSS3″.

[8]

CSS templates, complete with a graphical representation. Click this image to enlarge.

Manage CSS will be a benefit for intermediate and advanced CSS coders who know enough to move their code around in external files and multiple stylesheets. With Manage CSS, you can move styles around—from head sections to external stylesheets, or between external stylesheets—and you can convert inline styles to rules and move them where you need them. I’m always moving styles around from file to file, so I think this is a great help. I’m sure Adobe heard from many folks who felt the same inconvenience. I can’t wait to try this feature out myself and see if it solves the hassles associated with CSS authoring.

CONCLUSION

I’m convinced now that the Adobe-Macromedia merger was a good thing. I see good things happening in the old Macromedia software—which in my opinion were getting a little rusty in terms of interface and features—and Dreamweaver CS3 represents a substantial step toward the dream of WYSIWYG web design. Coding is still a necessary skill, but the templates and Photoshop drag-and-drop features alone bring designing for the web a lot closer to designing for print. In the future I will be looking at Fireworks CS3, which is another interesting development in Adobe’s embrace of web technology during the CS3 evolution.