11 April 2011
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 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!
Tutorials and samples