What's new in Dreamweaver CS5.5

Some product releases are revolutionary, and some are evolutionary. It's a bit more rare that they can be both. Whereas the Dreamweaver CS5.5 release may seem simply evolutionary given the "point-five" version number, the features contained within are highly focused to help you spark your own project-based multiscreen revolution, while only requiring a minor evolutionary shift in the Dreamweaver workflows and your own, finely-honed skills as a web pro. With HTML5 and CSS3 driving a new level of cross-device consistency—as well as adding significant new media and design capabilities independently—Dreamweaver CS 5.5 support for both will help you take your projects to a new level, regardless of whether you're starting with an existing project that needs to become mobile application aware, or diving in on a mobile-specific site or application from scratch. 

Although it won't be apparent from reading the back of the box, Dreamweaver CS 5.5 Live View and Design View have both been updated to take advantage of the most current builds of Webkit, the rendering engine powering both the Safari and Chrome desktop browsers, as well as the lion's share of mobile browsers to boot. This ensures that you get the most representative preview of your projects across desktop and mobile devices—and be able to visually author richer HTML5- and CSS3-based experiences with more confidence than ever before. But enough about the pretty pictures, let's look at some of the features that will help you exercise Dreamweaver's visual previews to their fullest extent.

Although most mobile devices claim to give the power of the web in the palm of one's hand, in reality the differences in form factor between tablets, phones, desktop browsers, and even high-definition set-top boxes can present a myriad of challenges in designing and implementing a single interface that works equally well on each. But with CSS3 media queries, you don't need to "lowest-common-denominator" your designs and layouts anymore—and Dreamweaver CS 5.5 uses media queries to let any HTML-based content quickly and easily specify a particular CSS file for display, based on the form factor of the device that's browsing it.

If you're starting with an existing site, application, or client project, you can simply start by clicking the big Multiscreen button at the top of your Dreamweaver CS 5.5 document window, and you'll be presented with the Multiscreen Preview panel (which made its debut in the Dreamweaver HTML5 pack/11.0.3 updater last year, but has been greatly updated and polished in the time since; see Figure 1). The three panes of the Multiscreen Preview panel represent the three most common form factors in question—Desktop, Phone, and Tablet—and although initially they all show the same design, you can then use the Media Queries button to precisely target a specific new or existing CSS file to fine-tune—or completely rethink—the interface for any browser with a window size falling within your specified range. If you're just diving in, you can use our suggested preset resolutions, and if you're an old hand at media queries you can add and customize the resolutions and their associated CSS files as you see fit. In a few small steps you can build highly focused, targeted interfaces that serve the specific form factors of the devices they support while still using the same HTML source file. This is critical in helping you make efficient work of mobile projects, and separating your design from the content it displays effectively.

For mobile-specific projects, Dreamweaver CS5.5 integrates the new jQuery Mobile framework to allow rapid development and design of a mobile-specific interface with the minimum amount of hassle. The Dreamweaver team has also been working directly with and contributing to the jQuery Mobile project itself—which is of course built on top of the wildly popular jQuery JavaScript framework—to make sure that we not only build appropriate tooling for it but can share our expertise in this area with the community at large.

To create a new jQuery Mobile application, just go to the Page from Sample > Mobile Starters option in the New Document dialog box (see Figure 2). You can choose either a starter template that uses the remote-hosted (CDN) version of the jQuery libraries, a local site with the jQuery files maintained on your disk or server, or a version set up for mobile application development with PhoneGap (more on that below). From here, you can both edit the unique yet familiar jQuery Mobile content structure, which is essentially a series of divs with data roles that represent different pages and their subsequent header/content/footer elements, as well as flip the switch into Live View to see the application in its fully rendered, JavaScript powered glory. Navigate your jQuery Mobile application right within Live View to get the interaction and design just as you intended, and use Design View to quickly edit cross-page content, and your entire application in one fell swoop. The Insert panel now includes a new jQuery Mobile category that gives you one-click access to all the native jQuery Mobile interface elements and widgets, which can also be previewed with interactivity right within Live View.

And to put the bow on the package, we've beefed up Dreamweaver JavaScript code hinting with greatly expanded jQuery support, including DOM hinting for easy attachment of your page elements to jQuery methods and events. Although the updated code hinting will be useful on any jQuery-based project, they also make creating a mobile-specific site or application interface with jQuery Mobile simpler than ever for hand-coders as well.

Although our focus in this version of Dreamweaver has been primarily on browser-based content, the demand for native mobile applications is increasingly becoming part of a modern web project's requirements. Translating your Dreamweaver and HTML skills to native application development has always been a chore requiring a significant investment in learning new coding models and SDKs, but now you can now build native applications for Android and iOS (on the Mac platform) using nothing more than HTML, CSS, and JavaScript you already comfortably use everyday. The PhoneGap framework is a popular way to package HTML-based applications into native applications instead of rebuilding them from scratch, and you can now leverage it directly within Dreamweaver to easily transition your existing HTML based projects, assets, and content to native applications.

For Android, the complex process of installing, configuring, and verifying the Android SDK has always been a bit of a chore. Dreamweaver CS5.5 takes all the pain out of this process by providing an "easy install" option, which will do all of the above for you in the background. Although the Apple iOS SDK tools are subject to a different licensing model (and only available on the Mac platform), once you've installed the Apple iOS SDK (or Xcode from the Mac App Store), you simply point Dreamweaver CS5.5 to the /Developer directory on your hard drive and you're ready to go.

From here, any Dreamweaver site can become a native mobile application project. Simply build out the application interface using all of the Dreamweaver CS5.5 design capabilities (including jQuery Mobile support), test the general behavior in Live View, and then use the Build and Emulate option to preview your application directly within either the iOS or Android native emulators (see Figure 3). PhoneGap will also build native projects for both iOS and Android SDKs, allowing you to easily build a final application from the native development tools that can be signed and delivered to app stores for wide distribution. With Dreamweaver CS5.5, no matter your mobile project requirements, we've got the tools that help you satisfy those needs with ease—using the same skills you've been building all these years as a web professional. 

Although the features covered above may be the key highlights of Dreamweaver CS5.5, some of the less revolutionary updates and features are no less important. FTPS and FTPeS support allow for greater compatibility with modern file transfer servers; W3C Validation lets you validate your HTML against the live W3C validation service, making accuracy and depth a foregone conclusion; and updated support for Subversion 1.6.9 assures that you can always stay in sync with distributed workgroups and designer/developer workflows. And as always, we took care to fix a lot of small functional issues, snafus, and bugs that go well beyond a quick summary article—making Dreamweaver even more solid a foundation for all these new capabilities.

As you can tell by now, the balance between evolution and revolution can be a fine one, and we feel confident that Dreamweaver CS5.5 will help you use all the revolutionary new potential of HTML5, CSS3, and jQuery to deliver multiscreen-aware projects in a variety of new ways and with minimal impact to your evolutionary workflows. We hope that you're able to open up Dreamweaver CS5.5 and begin immediately putting it to use to make each of your projects a microrevolution in and of itself—we can't wait to see what you build with it!