Webmonkey » Dreamweaver

Review: Dreamweaver and Flash Updates Deliver Mobile Dev Tools

Scott Gilbertson — Tue, 03 May 2011 15:43:46 +0000

Adobe has released updates for several of its Creative Suite applications, including Dreamweaver and Flash. The new Creative Suite 5.5 adds some new tools designed to target tablets and mobile devices, as well as improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe’s flagship web development app.

Creative Suite 5.5 Web Premium is $1,800. For those already using CS 5 Web Premium, upgrades are $400. Adobe has kicked off a new subscription-based pricing model, with Web Premium going for $130 per month, or $90 per month if you commit to a one year contract.

What’s New

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. That means the Dreamweaver Live Preview and Multiscreen Preview features will mirror what you’ll see later in the browser.

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 CSS so that your site looks nice on any screen.

Combining the Multiscreen Preview with Dreamweaver’s new @media support means the app is considerably more adept at responsive design — that is, making sure that your site looks good regardless of what device it happens to be viewed on.

Multiscreen Preview in Dreamweaver 5.5 (click for larger image)

This release improves Dreamweaver’s ability to work with content management systems like WordPress, Joomla and Drupal. The Dynamically Related Files feature provides direct access to any page’s related files, for example, any php files used to render the current URL. While it’s a nice feature, it won’t help those of you working with lower level frameworks like Rails or Django.

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.

Among the smaller, but nice to see, additions to Dreamweaver 5.5 are support for HTML5 tags in the code hinting. You’ll also find new options to use the HTML5 doctype and more code hinting for CSS3 selectors and attributes.

Flash CS 5.5 also hops on the multi-screen bandwagon with new features to scale objects in the timeline, shared asset libraries and new publishing options for a variety of platforms — Android and iOS as well as traditional Flash movies.

The new content resizing options are especially nice and work a bit more like what you’ll find in other Adobe apps, such as Photoshop. Simply select the content you’d like to resize and either drag, or enter specific dimensions in the dialog box.

Improved resizing tools in Flash 5.5 (click for larger image)

The emphasis on mobile carries over to the new code snippet options as well. Snippets are little chunks of Actionscript designed to handle common events without forcing you to write everything out by hand. Previous versions of Flash include options like button events or data handlers. Flash CS 5.5 adds about 20 new snippets that target mobile devices — gestures, finger events, swiping and so on. Applying snippets is also easier thanks to a new floating panel display that previews code snippets and then allows you to drag and drop the code onto an object on your stage.

Verdict

There are some great new features in both Dreamweaver and Flash, but whether or not either is worth the upgrade depends on what you do with the apps. For designers this is a less compelling upgrade. There are few new tools, but the emphasis in both apps’ new features is clearly on developers working with code, particularly those coding for mobile devices.

At $400 just for the upgrade from CS 5, CS 5.5 is a lot of money for what you get. It’s a much better deal if you’re still using CS 4 or older versions, but it almost seems as if Adobe is using this upgrade mainly to push its new subscription-based sales model.

Scott Fegette, Senior Product Manager at Adobe, says that the company is moving to “a 24 month major release cycle, with interim updates.” Since this is one of those interim updates and will still set you back $400, the subscription model begins to look more appealing. Especially given that with subscriptions updates are automatic — new features are added as the are developed — there’s no waiting for a big release date.

See Also:

Adobe Takes On Mobile World With Creative Suite 5.5

Scott Gilbertson — Mon, 11 Apr 2011 15:00:25 +0000

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 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.)

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:

Adobe Adds HTML5 Creation Tools to Dreamweaver

Michael Calore — Wed, 19 May 2010 17:23:19 +0000

SAN FRANCISCO — Adobe will begin shipping a package of HTML5 web design tools for Dreamweaver, the company says.

The HTML5 Pack for Dreamweaver will available for download on Adobe Labs some time on Wednesday. It will be a free download for anyone who owns Dreamweaver Creative Suite 5, and Adobe will roll it into an automatic update for Dreamweaver once the add-on pack has been thoroughly tested.

The add-on pack gives Dreamweaver CS5 the ability to provide code hints for HTML5 elements and CSS3 styles when building pages in the text-based Code View window. Adobe is also adding a few starter layouts for people building HTML5 pages from scratch. More layouts will be added later.

Dreamweaver’s Live View mode — which uses the same WebKit rendering engine as Safari and the Android browser to preview web pages — is also getting an update. The Live View window will now be able to render pages built with HTML5 and CSS3, so developers coding native video and audio playback to their pages will be able to preview those pages in Dreamweaver.

The announcement was made during the Google I/O, the developer conference taking place here this week. Adobe CTO Kevin Lynch spoke as part of the morning keynote at I/O. Lynch hinted at this release earlier in May when he appeared at the Web 2.0 Expo developer conference and announced that Adobe would soon be shipping more tools for HTML5 content creation.

The release comes soon after Apple began encouraging developers to create web apps in HTML5 rather than rely on Adobe’s Flash Player to deliver videos, audio clips and animations. Apple’s iPad and iPhone famously don’t support Flash, so Adobe’s push towards giving designers new tools for building HTML5 web apps will help the company maintain its foothold on a web where Flash is becoming less attractive.

Dreamweaver Creative Suite 5 was released this spring. But it’s one of the oldest WYSIWYG web editors out there, and any web developer with knowledge of HTML5 and CSS3 has had the ability to use Dreamweaver’s Code View to build pages using the emerging standards for years. These new tools make the workflow easier though, allowing developers to take advantage of Dreamweaver’s helpful code hinting and to preview changes right inside the app, instead of uploading the files to the web to view their changes in a browser.

Lynch demonstrated a couple of other things, too. He showed how you can make a rich advertisement in Dreamweaver using CSS3 transforms and HTML5 animations. This will be especially handy for anyone wanting to create an ad for Apple’s iAd platform, which will be totally HTML5-based.

Also added to Dreamweaver in the HTML5 pack is a tool that lets you see what your pages will look like on multiple devices with different size screens all at once. It’s a preview pane with several windows — one for a desktop browser, one for mobiles, one for a tablet and so on. The preview tool uses dynamic stylesheet swapping, so you see your layout change instantly based on which device you’re viewing it on.

Of course, that’s extremely useful for anyone creating a website that’s going to be deployed on mobiles and iPads. Oh yes, and Android tablets — whenever they show up.

See Also:

Dreamweaver CS5 First Look: More WordPressy, More Firebuggy

Michael Calore — Mon, 12 Apr 2010 18:28:53 +0000

There’s a new version of Adobe Dreamweaver on the way, and it includes new features for building sites with WordPress, new CSS enhancements and a new set of tools that let you see code changes in real time as you work, much like the popular Firebug add-on.

Adobe announced details about its latest Creative Suite bundle of applications on Monday morning. Creative Suite 5 is Adobe’s new package of apps for building websites, assembling videos and editing photos. We have a first look at Flash CS5 here on Webmonkey, and we have a first look at the new Photoshop on Wired.com’s Gadget Lab.

Dreamweaver, which has been one of the most popular apps for developing websites since its debut (as a Macromedia creation) in 1998, gets a fairly substantial update in Creative Suite 5. It doesn’t have the whiz-bang new features found in Photoshop CS5, but if Dreamweaver is part of your development workflow, you’ll definitely find much to appreciate in the new Dreamweaver CS5 that makes it worth an upgrade.

Of course, whether or not to use a WYSIWYG editor like Dreamweaver is a debate in itself. Most can get by with a text editor, a few browsers and a short stack of reference materials. But if you’re working with a team of developers, or if you’re building more complicated sites with dynamic elements, databases and hundreds of pages, tools like Dreamweaver are essential. They speed up the workflow, keep everything organized and ease the pain of constant testing and iteration.

So, if Dreamweaver has a place in your life, here’s a rundown of what’s new in the latest version.

One of the biggest improvements in the new Dreamweaver is the inclusion of better development tools for dynamic sites built using PHP-based content management systems like WordPress and Drupal. These systems, which of course are super-popular for blogs and community sites, don’t spit out static HTML files. Rather, most of the pages on a WordPress blog or a Drupal site are generated on the fly using templates and include files. Dreamweaver CS5 now gives you tools to design templates and see what your layout will look like in your final design. The built-in WebKit engine renders your page as it would render in WordPress (or whatever PHP-based system you’re using).

New CMS tools let you edit template files and see your changes right away (click for larger image).

PHP support has been improved in other places within Dreamweaver, too, with new code hints for WordPress, Drupal and Joomla, plus support for custom functions and classes, so you can create your own code hints and error highlights for other PHP frameworks.

Added support for WordPress and other like-minded CMS tools is a big improvement, and one that’s necessary since so much of web publishing has moved to PHP-based systems. Fans of WordPress or Drupal should find reason to test out the latest Dreamweaver and see if it takes some of the pain out of designing templates.

The new inspection tools in Dreamweaver CS5 let you make adjustments to the CSS or the DOM of whatever page you’re working on and see them rendered in real time. The inspector shows you how your code will change as you interact with dynamic elements on a page, and it will show you how various changes you make to stylesheets show up on the rendered page.

Dreamweaver's inspection tools let you edit your CSS and JavaScript and see your changes in real time.

As with several of the features in Dreamweaver, this is something that you can do with the free browser-based plug-in of your choice. In particular, the inspection features offer an experience similar to the Firebug add-on and its various extensions, but here it’s baked right into the development environment. The primary advantage of having these tools sit directly inside your editing environment is one of convenience. Once you make the changes, there’s no copying, pasting, testing and redeploying. Most Dreamweaver users have found a happy medium between browser-based and IDE-based inspection and testing tools.

Speaking of testing, Dreamweaver fully integrates Adobe’s BrowserLab web service, which lets you examine your layouts as they appear in different browsers. So you can look at your page in a 2-up dialog, with Firefox on one side and IE8 on the other (or any two browsers). There’s also a cool “onion skin” feature that overlays your differently rendered pages on top of one another, so you can clearly spot any layout inconsistencies, color differences or interactive elements that don’t work.

BrowserLab is a free service available to anyone right now, and it very well may remain free for its entire lifetime. But the fine print on the site warns that Adobe could make it a paid service at any time. So, fair warning. UPDATE: Adobe’s site says “Notice: On April 30 2010, the limited free preview of Adobe BrowserLab will conclude. [...] If you sign up by April 30, 2010, you will receive one year of complimentary access to all CS Live services.” [Thanks, Scott!]

When it comes time to deploy files, Dreamweaver CS5 has vastly improved Subversion support. There was some support for Subversion in CS4, but it was pretty limited. Now, you can make all your changes, moves and deletions locally, then sync to your server. The svn:ignore command works now, too. Also, the the Extensions Manager (which has been a vital part of Dreamweaver since the Macromedia days) now handles the Subversion libraries, so if there are any updates, you’ll be able to download them for free from Adobe Exchange.

Finally, something helpful for the new users: the addition of some new CSS starter layouts. These are basic CSS files that help you kick-start a site design using the latest web standards, including totally bare-bones layouts and more complicated things like dropdown menus. So if (like a lot of people starting out) you understand CSS but you don’t feel confident writing it all yourself, Dreamweaver’s templates will provide a boost — and hopefully keep you from taking the easy route and doing your whole site in tables. There, of course, similar templates available on the web, but they vary in quality and in compatibility across browsers.

The new Dreamweaver will ship soon, (Adobe says mid-May), along with the rest of Creative Suite 5. Dreamweaver on its own costs $400, or $200 for an upgrade from any previous version going back to Dreamweaver 8. You can also get Dreamweaver in one of the Adobe Creative Suite 5 bundles, which vary in cost from $1,800 to $2,600 depending on which one you buy. Upgrades vary between $500 and $1,400 for the suite. Also, we should note that Adobe has done away with the Web Standard edition of Creative Suite, so now the Web Premium edition is the cheapest CS5 bundle you can buy that includes Dreamweaver.

See Also: