Introducing Adobe Dreamweaver CS5

Web design and development moves at an insanely fast pace. To keep on top of this quickly changing landscape, we get out on the road each product cycle and visit both Dreamweaver customers and web designers/developers—there's nothing like getting in front of real people and talking about the real problems we face day in and day out. You learn a lot of small things this way that you wouldn't have found out otherwise–and it's safe to say that through this process we've learned a lot since Dreamweaver CS4 was launched 18 months ago.

First off, designing with CSS still presented challenges for both hand coders and visual designers–the inconsistent rendering of modern web browsers being one large hurdle every web designer faces, and the constant round-tripping between an editor and a browser in order to see dynamic site and application interfaces in context led to kludgy and patched-together workflows. Although the Dreamweaver CS4 Live View feature provided a much more consistent view of one's design, the CSS box model was still a challenge to work with visually, let alone deliver with visual consistency to all of today's popular browsers. Given all of this feedback, we knew right away there was still work to be done in this area for Dreamweaver CS5.

Second, the wide-spread proliferation of open-source content management systems such as Drupal, WordPress, and Joomla! has presented an entirely new challenge for web designers and front-end developers. Although Dreamweaver CS4 worked brilliantly with Ajax-driven interfaces, we heard loud and clear that it was still incredibly difficult to design CSS themes for these systems using Dreamweaver. PHP drives the overwhelming majority of modern web applications and provides the platform for most of the popular content management systems today. We decided early on to concentrate on making designing for these systems as easy as possible, and to make sure that both the transition from design into code–as well as the hand-coding experience for PHP in general–was smooth and seamless.

Finally, along with a ton of small, hard-to-list improvements, bug fixes, tweaks and enhancements, we heard that the two most common entry points into Dreamweaver were often daunting to new users or less technical designers. The New Site Setup dialog box required a lot of server-specific setup information up front before you could get going with a project, and configuring it was a common concern heard by our technical support department. And the CSS starting point layouts, while bulletproof and robust, had incredibly complex, specific CSS code that was difficult for designers to wrap their heads around. We set out to simplify both of these areas without sacrificing quality or integrity, and to do a better job in general of having Dreamweaver assist you when you may paint yourself into a corner.

Let's take a look at Dreamweaver CS5, and how it will address these problem areas.

Visual CSS power

Taking an objective look at how designers were working within Dreamweaver CS3 brought us to the conclusion that Live View—a WebKit-rendered version of your current page that mimics the rendering and interactivity of a real browser—was a necessity. The response has been overwhelmingly positive, but also told us that there were some critical points of designers' workflows where jumping out to a browser was still necessary. When experimenting with CSS layouts and designs, browser plug-ins offered critical, in-context visualization of the CSS box model that wasn't possible in Dreamweaver CS4. Designers told us loud and clear that we needed to visualize CSS layouts better in the Live View context, and have better ways to experiment with their rules without jumping back and forth to the stylesheet and juggling comments directly in the code. Enter CSS Inspect mode and CSS Enable/Disable.

CSS Inspect mode is a simple feature, but can change the way you work in Dreamweaver significantly. Although it's not true WYSIWYG design, CSS Inspect mode gives you rich visual overlays of the CSS box model on any selected element and full details in the CSS panel—in real time, as you hover over your page (see Figure 1). Now you can inspect your layouts easily by just moving your mouse around. Border, margin, and padding attributes are shown as colored regions overlaid onto your page on the selected area, and when you see what you're looking for just click it and you can start editing it in real time using the CSS panel. This also works in the case of drop-down menus, Ajax widgets and more.

Most designers work their CSS layouts iteratively, a little change here, a little change there. The cascading nature of CSS can lead to cases where you just want to turn on and off various rules to see what works, or what's causing a specific problem. In Dreamweaver CS5 you can selectively enable or disable rules in your external style sheets by clicking the universal No symbol that appears as you hover over the left margin of the rule definition in the CSS panel (see Figure 2).

Work experimentally, tweak a few things back and forth to get your layouts just right, and when you're finished you can have Dreamweaver clean up your code with a single click by right-clicking any of the rules and choosing to either enable all the disabled rules (reverting you to where you started), or delete all the disabled rules from your style sheet entirely (cleaning up the code behind itself)—nice and tidy.

The combination of these two features enable you to spend more time in Dreamweaver getting busy and less time switching back and forth to a browser, and ultimately be a more effective designer. But when you take these features and combine them with what comes next, the power of Dreamweaver CS5 really comes into focus.

Designing and theming CMSes

Designing and theming a content management system (CMS) presents a number of serious challenges to designers. First, most of these systems don't have pages, per se, they have views. The pages of a CMS application that you see in your browser are generated by the application server, so there's no markup to refer to on disk as it's all assembled from a collection of dynamically included files containing markup, logic and more. For a coder, tracking down these references can be a challenge, so for a designer or front-end developer it could be an even larger hurdle. We wanted to assure that you could design effectively with these application views, but make it feel as effortless as if you were working on a static HTML page.

You'll first see the hint of these dynamic updates in the Dreamweaver document toolbar, in particular the new Location field heralding Live View navigation. If it makes the document window look like a browser, it's because it actually is a browser of sorts now- although there are some key differences. Live View navigation lets you "drive" an application into a design state–for example, a blog posting view, or a search results view, and then use Live View alongside the new Dreamweaver CS5 CSS features such as CSS Inspect and Enable/Disable alongside the tried-and-true CSS Panel and Property Inspector to flesh out its CSS design and layout (see Figure 3).

In Live View, you can also press F6 to "pause" JavaScript, and freeze your DOM in a given state (drop-down menus active, particular sets of Ajax data loaded into a particular widget, and so on). And of course you can save your page/style sheet directly–no more copy and paste from the View Source window.

Tip: You can enter any remote URL in the Location field—just like a browser–and even navigate through its asset files and view its styles in the CSS Panel. Obviously you can't edit those files if you don't have access to them, but this is a super-handy way to peek underneath the pixels of a live website and see how its constructed.

In Dreamweaver CS5, if you've set your site up with a PHP application server and are using a framework such as Drupal, Dreamweaver will even step you into the design process by first asking if you'd like to discover all the related assets to your application (see Figure 4). Dreamweaver will then scour your code and populate the Dynamically-Related Files toolbar with all of your assets.

Need to edit a file? Just click on it and you'll switch to Split View to get direct access to the related file's code, and without losing your Live View preview. Easy. The funnel icon to the right of the Dynamically-Related Files toolbar will let you show only particular file types–including HTML, PHP, JavaScript, CSS—or even use a regular expression pattern to find specific files you're after. Coders will love the direct access, and designers looking to dig a bit deeper will find it invaluable for poking underneath the hood of an application a bit more–win/win for everyone.

Tip: If you really want to cut down on round-trips to the browser, you can create a new, untitled document tab in Dreamweaver CS5, enter the URL for your CMS administration interface, and have it running in another tab while you work on the application design. Incredibly handy for adding new pages, posts, widgets, or modules while you work!

We also wanted to make sure that the hand-coding experience around PHP-based CMS systems was as streamlined as possible. We've beefed up PHP code hinting in a big way in Dreamweaver CS5—hinting for core and extended functions, custom classes, applications and frameworks, live documentation and more.

And if you're tracking your changes in a Subversion repository we've added more clientside support for file management in the Dreamweaver Files Panel–moving and copying files will do whatever you'd expect it to do in regards to file history and copies, and we've even updated to a pluggable architecture so when the SVN client libraries get updated, you can keep Dreamweaver in sync.

All things told, I think you'll find that designing and theming dynamic applications has taken on an entirely new level of cool in Dreamweaver CS5.

A few helping hands

The Site Setup dialog box has long been one of the first parts of the Dreamweaver interface that new designers and developers are faced with. Before Dreamweaver CS5, you really needed to know a lot of details about your website—directory locations, remote server login details and URLs, and so on–before you could really start working. In Dreamweaver CS5, all you need to know to start working is what you want to call your site or project, and where on your local hard drive you'd like to save the files. That's it.

Now that's not to say Dreamweaver won't need more details, but it's gotten a bit smarter about how and when it gets those details. If you decide to upload your files but haven't specified a remote server, you'll get asked to do so first. You can now just concentrate on designing your sites and applications; when Dreamweaver needs more details, it'll ask you as you go and stay out of your way otherwise.

Tip: Do you plan to use more than a local testing server and a remote publishing server in your project—perhaps a shared development server for working with the application developers, or a staging server for client content proofing? You can define as many servers for a site as you'd like in Dreamweaver CS5, and choose at any point in time which ones are your active testing and publishing server (see Figure 6). Very smooth.

The CSS starting point layouts in Dreamweaver CS4 proved to be a bit daunting to less technical designers and newcomers to CSS in general. Although they held up beautifully across a wide span of browsers and operating systems and were commented or documented to the teeth, the CSS code was incredibly difficult to understand and the choices of layouts were overwhelming. We went through and simplified all the CSS starting points to very straightforward CSS code, while maintaining the same high bar of integrity with the code itself. And this time, not only the code is documented but we've added more suggestions, tips, and documentation on the layouts in the layouts themselves instead of the usual "Latin" text. We hope you find them as educational as they are useful.

Making sense of cross-browser chaos

Cross-browser design is a huge challenge. Quite often it's a challenge because you don't see the problems you may have on a particular browser or operating system until very late in the design process where they can be incredibly difficult to solve. Existing solutions for testing layouts across browsers and systems ranged from virtual and physical test labs, to sluggish online services, to emailing a URL to a friend and asking them to check your page on that one machine they have in the corner.

We launched Adobe BrowserLab last June (browserlab.adobe.com) to start addressing this problem. BrowserLab doesn't require setup and maintenance like a test lab or series of virtual machines. It won't take 20 minutes or more to give you visual feedback after you've waited your turn in a virtual queue. It works quickly and efficiently to give you an accurate preview of your current page (or any online URL) across today's most crucial browsers and operating systems, and helps keep you in the design mindset while staying informed about how your design is evolving.

Although the BrowserLab service will snap any URL as it loads in a browser, when using Dreamweaver CS5 integration it gets even cooler. In Live View you can, for example, drop-down a JavaScript/CSS menu into a particular state, load a specific bit of Ajax data into that one specific widget on your page, and more–press F6 to freeze your page in place and then send it to BrowserLab using the BrowserLab panel in Dreamweaver CS5 (see Figure 7).

Even those interactive states of your page or application can now be previewed with ease, and you can keep your focus on design while you're making your screenshot requests–the BrowserLab panel will keep you updated as to what's going on with your request at all times. With BrowserLab, you'll never have to worry about being blindsided by a cross-browser layout bug right before your project launches again. It's like having a whole testing lab on your machine–and all you need is a Flash Player enabled browser (and of course Dreamweaver CS5 for the cool interactive previews) to get busy.

And there's more . . .

You can never really cover all the small updates, fixes, tweaks and smoothings in a general article, but we also knocked down a huge number of enhancement requests, workflow snafus, small bugs and inconsistencies, and more. Hopefully you won't notice these jumping out at you, but just feel Dreamweaver as a whole getting a bit smoother and more streamlined. Ultimately we're doing our job if our tool can fade into the background and help you realize beautiful layouts, designs, and interfaces for your standards-based web projects. And we hope that Dreamweaver CS5 helps you get closer to that ideal. It's been an incredible and illuminating product cycle for us, and we can't wait to get it into your hands to see the amazing work you'll do with it. Enjoy!