Adobe Dreamweaver CS6 Review: Mobile App Development, the HTML 5 Way

In Web page design, the popularity of Adobe’s Flash multimedia platform is nose-diving, while HTML5 is skyrocketing. That transition is causing websites and website designers to find better ways of incorporating motion and interactivity, and Adobe’s new Dreamweaver CS6 ($399 as a stand-alone program, as of 6/1/2012; also part of Adobe’s Creative Suite 6) provides an array of tools to serve up HTML5-based designs on smartphones, tablets, and desktops.

Fluid Layouts, Fluid Design

All website traffic is growing, but mobile website traffic is growing the most quickly. Dreamweaver CS6’s new Fluid Grid Layout tool helps you design for devices of all screen sizes, from smartphone to tablet to desktop. The previous version of Dreamweaver helped you build “media queries”–code in a master HTML file to direct traffic from devices of different screen sizes to different CSS files–but it didn’t provide much help in figuring out how to set up each of those CSS files for the different screens.

For a Fluid Grid Layout, you use a simple wizard to set how many columns you want for a smartphone, a tablet, and a desktop; indicate the size of the columns; and Dreamweaver creates the HTML5 file and an associated CSS3 file. Then you use a menu command to add containers for blocks of content and rearrange them on a grid. Dreamweaver takes care of the coding–at least, for a while; as with almost any Dreamweaver operation, you’ll end up poring over the application’s code view to make changes in your content. Adobe cautions against fiddling with the Fluid Grid Layout code–it’s just too easy to screw it up. By the way, Adobe TV has excellent video walkthroughs of this new feature and of many others.

Fluid Grid Layouts are supposed to give you a starting point for an adaptive design. That is, you build your content once, and then the Web pages on which that content lives will reconfigure themselves to display the content properly on any size screen. This is known as adaptive design, and you can test it on any website by opening it in a desktop browser and then resizing the browser window, from smartphone size to standard desktop size. Does the content on the page just sit there as you resize, or does it reflow, based on the size of the window? If it reflows, then it’s probably an HTML5-based site, and it will likely work well on any kind of device.

I found Fluid Grid Layouts easy enough to create, but I found that resizing the containers worked a little sluggishly, and the undo function frequently didn’t work. Dreamweaver’s interface has new, useful buttons at the bottom of its Design window that you can click on to show smartphone, tablet, and desktop screen viewports, and those are very helpful to see how your content will appear. Also, Dreamweaver’s Live view is improved, in that the visual representation of what your Web page will look like in a real browser is closer to reality (but only closer to what webkit-based browsers–meaning, Safari and Chrome–will look like; Firefox and Internet Explorer may look dramatically different). Still, you can now make some changes in code while the Live view is enabled and see your changes reflected in the Design pane, something you couldn’t do before.

A new palette and associated dialog box help you create CSS Transitions, which are motion effects that do not require JavaScript (or Flash, of course). Once you’ve got down how they work, you can build spiffy actions, such as rollovers and other movements pretty simply. The code that Dreamweaver generates is simple, too, because the behaviors that it describes are taken care of by concise CSS3 code, not verbose JavaScript. Dreamweaver generates all of the browser-specific code that is necessary for browsers (old and new) to use this code; that is, every action that you set causes Dreamweaver to generate CSS code that’s easy to understand.

Instead of sticking with the standard, boring Ariel, Tahoma, and the like, which are built into all browsers and therefore are safe to specify in a Web page, you can buy or find for free fonts from Google or other outfits, load them on your Web server, and then use Dreamweaver CS6’s new Web Font Manager to apply them to your pages. That’s great, but you must download the fonts to your own server, because the utility does not help you manage fonts that must be hosted externally, such as ones from Adobe’s own TypeKit library, though Adobe says support for incorporating TypeKit fonts is coming soon. And Dreamweaver CS6 requires that you load the fonts one at a time into the Web Fonts Manager interface, and then you must add them to your Font Families list. Adobe says that’s due to licensing issues, but I think the procedure still could have been made a little less cumbersome. To use the fonts, you select some text, then pick the font name from a CSS drop-down menu. Whether you use downloaded Web fonts or externally hosted ones on your site, you will see them render properly in Dreamweaver’s Live view.

The App Is Where It’s At

The previous version of Dreamweaver allowed users to build mobile applications (in addition to mobile websites), but doing so took some effort: You had to download the Android Software Developer’s Kit (SDK) on your own, install it, then tell Dreamweaver where to find it. If you were trying to make an iOS app, you were out of luck, since Apple doesn’t make an SDK that runs on Windows. Dreamweaver’s templates were few and boring, too.

Some of this has changed for the better. You can now design your app’s interface with the help of a new jQuery swatches panel, which lets you specify styles and colors for buttons. You can also build or modify button designs in Adobe FireWorks, which will output browser-specific HTML5 code, if you like, or you can build your own app designs on jQuery Mobile’s fantastic ThemeRoller site and download them for use in Dreamweaver CS6.

Once you’re happy with your design, open up the new PhoneGap palettes. Last year, Adobe acquired PhoneGap, a company that created a platform for building mobile apps, and as a result, Dreamweaver CS6 has an even stronger PhoneGap tie-in. And instead of your computer building your app, PhoneGap does it for you, on its servers. In one palette, you can log in to your PhoneGap account (you can do so with an Adobe ID), and in another palette, you can specify whether you want to build an app for iOS, Android, Windows Mobile, Blackberry, or even Symbian.

Click a button in the PhoneGap Build Service palette to build your app, and when it’s done, you can download the app and then upload it to your device(s) manually, if you have appropriate upload utilities. Conveniently, the palette also provides QR codes for each OS build that you can use with QR Code readers to tell your phone to download it.

These are ingenious ways to help you develop phone apps. However, a few things still make this an advanced task. If you want to design iOS apps on your Windows system, you’ll still need a $99-per-year Apple Developer account, and you’ll need to use a Mac to upload key files to Apple and then download other files. (I found a way to do it on a Windows machine in PhoneGap’s community forums; it worked, but it was difficult.) Then you must upload those files to PhoneGap.com. All this is only for development of your app, not for interacting with iTunes. It’s important to note that this isn’t Adobe’s fault; Apple’s rigid controls on iOS apps means that PhoneGap is the only way to develop iOS apps on Windows. Apple’s rigidity has benefits, too, in that it helps to police iOS apps, so it’s hard to criticize Apple.

Other new or improved features: Adobe says FTP performance is improved, and I can confirm that syncing files is quicker. Integration with Adobe Business Catalyst, an online hosting, content management system, and e-commerce service, is now built into Dreamweaver CS6. The service has many useful features, including online form creation and email list maintenance.

Staying Relevant With HTML5

Of all the Creative Suite applications, Dreamweaver CS6 is the one that’s stuffed with the most goodies–including new integrated tools and ways to gain access to new online tools. It also stands out as the application in the suite that is growing the most quickly, and it provides the useful features needed to keep up with the exponential creativity that’s happening online.