File Under: HTML5, Mobile, Programming, Software

Adobe Takes On Mobile World With Creative Suite 5.5

Adobe has updated several of its Creative Suite applications to version 5.5, adding some new tools designed to target tablets and mobile devices. The primary interest for web developers is the improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe’s flagship web-development app.

Creative Suite 5.5 Web Premium will be available one month from today for $1,800. For those already using CS 5 Web Premium, upgrades will be $400. Adobe has also unveiled a new subscription pricing model, with Web Premium going for $130 per month, or $90 per month if you commit to a year contract.

The CS 5.5 release is unusual for Adobe, which typically releases only full-point upgrades for its Creative Suite. This time around not every application in the Creative Suite has been updated, which explains the .5 upgrade number. In those apps that have been updated, the new features almost exclusively revolve around mobile and tablet development.

For example, Photoshop gains a new Touch SDK that allows tablets and other devices to interact with Photoshop, but there are almost no new features in the app itself. Dreamweaver on the other hand does see some new features, including more support for web standards and better development tools for building mobile web apps.

Dreamweaver 5.5 adds several new HTML5 and CSS3 tools to the mix, including a newer version of the WebKit rendering engine, which Dreamweaver uses for live previews. Dreamweaver’s WebKit renderer is now up to par with what you’ll find in the latest release of Chrome, Safari and most mobile web browsers.

Dreamweaver has added some HTML5 love to its “starter templates,” some of which now use HTML5′s semantic tags to layout your content. For example, there’s a new template built with aside for sidebars and article for blog posts. You’ll also find new options to use the HTML5 doctype and code hinting for all the new HTML5 tags. Similar code hinting is available for CSS3 selectors and attributes.

The Dreamweaver team has also embraced what’s fast becoming the tool of the moment for savvy web developers — CSS3′s @media queries. Media queries make it easy to serve up different site designs based on the screen width of the current browser. (See our earlier write-up for more on using @media.)

Dreamweaver added the Multiscreen Preview panel in an earlier update, but the latest release is considerably more polished. The Multiscreen Preview panel shows your site design in desktop, phone, and tablet screen sizes, and makes it easy to tweak your cascading stylesheets so that your site looks nice on any screen.

The updated Dreamweaver 5.5 even turns to some outside tools to offer even more options for those targeting the small-screen world of mobile devices: Both jQuery Mobile and PhoneGap have been integrated into this release. JQuery Mobile makes it easy to add touch-based events and other mobile tricks to your site, while PhoneGap can convert your HTML, CSS and JavaScript into native mobile apps for Android and iOS. Keep in mind that both of these outside frameworks are pre-1.0 releases, and jQuery Mobile in particular is still an alpha release, so use with caution.

Also worth noting, Adobe has released Flash Pro 5.5 which is primarily geared to those hoping to write mobile apps for Android and iOS without delving into separate native SDKs.

For more info on everything that’s new in Web Premium, check out Adobe’s series of videos (Flash, natch) on the new features.

See Also: