Adobe has, for the first time, released a public beta of the next version of Dreamweaver - CS4 (or 10.0 if you're counting). At first look, it appears to be the most dramatic update for several versions, and visually the interface has evolved significantly from CS3. There's also a long list of new features and improvements - but here's my take on what I've found to be the best new and improved features.
Vertical split
Previously, DW had a split interface which allowed you to view both code and design at the same time - one above the other. CS4 adds the ability to split the screen vertically instead of horizontally. This is such an obvious interface improvement, you wonder why it took 10 versions for it to appear! Most files you edit tend to be vertically long and thin - CSS lines tend to be no more than 20 or 30 characters long, and if you're formatting your code nicely, most HTML or PHP lines tend to be quite narrow too. So having a document which stretches right across you massive widescreen monitor is a massive waste of pixels.
Anything you can split horizontally, you can now split vertically. Combined with the new "related documents" feature (see below) there are several possible combinations you can put into the split:
-
Code / same document design (as you could before)
-
Code / live view
-
Code / code (same document, different part of it)
-
Code / code (related document, e.g. HTML on the left, CSS on the right)
I've already found this to be a big improvement - particularly when working on PHP code, it's useful to be able to see a different part of the document for example to reference functions, or variable names from elsewhere.
The only ability missing is to load arbitrarily different files on the left and right, for example when working on a framework or templating system.
Javascript authoring improvements
One of the things I spend a lot of my Dreamweaver time doing is writing Javascript. Javascript has a reputation for being a fairly hit and miss language to write and debug. In the past couple of years, as AJAX and visual effects have become more widespread, libraries such as Jquery, Spry and Prototype have taken care of a lot of the browser inconsistency headaches, and Firebug has dramatically helped with the debugging of pages. However Dreamweaver's Javascript support (particularly in the form of code colouring and hinting) has remained firmly in the "document.write" era.
The changes in CS4 seem to be a major nod to Adobe's userbase that they're serious about Javascript - no doubt driven by their development of the Spry framework, and AIR's ability to utilise JS.
Perhaps the most impressive of these new features is code introspection - an improvement to code hinting system. Instead of relying on predefined lists of functions, objects, and methods, DW is now smart enough to read the code you're writing and dynamically create the code hints for them. If you create a function, whenever you call that function, the correct code hints will appear.
And it's not just functions -- it also picks up classes (and their methods and properties) and JSON data. Pretty impressive stuff, and bound to improve the accuracy of code, and reduce the amount of time scouring documentation. The main omission at this stage is while it works for Spry (unsurprising since it's an Adobe technology), it doesn't fully support other JS libraries, or JS which is in different external files (although one clunky workaround is that if they are included in one HTML document, and accessed via the Related Documents feature, external files are picked up).
Another small but really useful feature is syntax error highlighting. Picking up missing quotes, dots, etc used to be a real pain - it's a very easy mistake to make, and to describe IE's error messages as being cryptic would be generous. Firebug helped, but now DW checks your code syntax in nearly real time as you type -- highlighting lines which are invalid or contain mistakes.
There's also a new command called "Javascript extractor" which takes inline JS (now recognised as not best practice), and attempts to convert it to external, unobtrusive Javascript. I see this as being some kind of remedial punishment to correct DW's terrible sins in allowing "Behaviors" to continue to pollute the web with lots of nasty inline JS (and still continuing to do it). It's not an answer to the problem (until the Behaviours are completely re-done to be properly unobtrusive) but it helps.
Interface improvements
I hesitated about including this in my list of "top" improvements, as I have mixed feelings about the new interface. Compared with CS3, DW CS4's interface is dramatically different. It seems to be a style which will eventually be common across all CS4 products - which I guess is important to complete the Macromedia -> Adobe transition, and really make the separate products feel like a suite.
My first impression was that it was grey - really grey. And really blocky. Depressingly grey and blocky, like working in an underground car park. Even the interface icons have lost their colour (except when you roll over them). They remind me of John Major's puppet in Spitting Image.
The logic behind making every so grey is that if you're working on a visual product, having too many colours in the interface can distract you from what you're designing, and affect the way you perceive the colours in it. While I completely understand this argument for design-led applications, it doesn't hold much water for me in DW - which is a production tool for coding the designs which should already have been created and approved elsewhere. Although I was willing to give them a go, so far I'm finding it harder to tell icons apart without their colours.
The way the panels now work now (in terms of docking them, expanding them, and so on) is much more consistent with how they work in Photoshop CS3, and the other "Adobe original" products, and I like this much better than the old Macromedia panels (which, if memory serves, were only like that because Adobe sued them for making them too similar to their own).
I've reservations about how legible the grey text on a grey background is. There's also a lot of non-standard interface elements - for example standard widgets (such as scrollbars, particularly on the Mac) look out of place, and also violate the "no colour" rules. The new interface also dispenses with standard OS window styles and controls - it's a bold move and it will be interesting to see how this is received.
Related documents
This is a feature I initially dismissed as not being terribly useful. Perhaps because a lot of my work is just developing templates for CMSs, so we don't really build many "static HTML" type sites. But on trying it, even with a single page which was destined to eventually be a CMS template, it did make the job of dealing with the many different files which can go into creating a single web page that bit easier.
Basically, DW will now look at your code, and try and pull in all the related documents, whether they are CSS files, external JS or PHP includes. They are brought in to a secondary set of tabs at the top of your document window, and can be used to quickly switch between the files which come together to build your final page. This is perhaps most useful when used in Split view, since (as mentioned above) you can now, for example, see a rendered preview of the page in one pane, and edit the CSS in the other -- seeing the impact immediately. This wasn't possible before - you would have to keep switching between DW document tabs, or saving and previewing in the browser. I can see how a lot of people will find this VERY useful.
And the rest
I've just picked the features which will make the most impact to my day-to-day usage of Dreamweaver. Of course there's a whole load of other new features in there, some impressive, some (to me) not so much. It also appears there have been a lot of improvements going on beneath the surface. There is no release date for the final version (and the rest of the CS4 suite), but this beta suggests it may not be far off.
See also: Fireworks CS4 beta - top five features
Write a comment