★ Adobe Embraces Mobile Development in Dreamweaver CS6

Posted on May 14, 2012

Adobe Dreamweaver CS6

Web Development IDE



Dreamweaver CS6 has added new tools for working with sites that scale from desktop, to tablet, to phone, using some of the latest CSS features. Even so, it’s still the familiar Dreamweaver with the same mix of design and code, and support for just about any web authoring technology you can think of. Dreamweaver CS6 has integrated a wealth of new tools and options to its already impressive list of features:

    Fluid grid layouts
    CSS3 transitions
    Enhanced jQuery Mobile support
    Updated PhoneGap Build integration

Improved layouts in Dreamweaver CS6

Developers keep their code-first view, while designers get improved layout tools that work with a range of modern web technologies. The result remains flexible, and it’s easy for designers and developers to share a workspace. However there’s still little or no support for code repositories and other team working features. Dreamweaver CS6 is still for the lone designer/developer, something that feels increasingly out of place in today’s world of large teams of both designers and developers, all working together on the same site.

Dw6 layouts

Fluid/Responsive Grids

Perhaps the most important of the new features of Dreamweaver CS6 are the fluid and responsive grid layouts for mobile development. This provides you with the basis for a website which reworks itself for three different viewport widths, described by Dreamweaver as ‘mobile’ (480px), ‘tablet’ (768px) and ‘desktop’ (1,232px). Responsive web design exists primarily because of advances in web standards, and these have also introduced new elements and styles. Suitably, Dreamweaver CS6 brings more robust support for HTML5 and CSS3, including a new CSS transitions panel.

Dw6 fluid layouts

In Dreamweaver itself, Live and Design views enable you to switch between different device previews and amend how HTML DIV tags are stacked in each. It’s a surprisingly elegant solution to a complex problem (from the standpoint of a visually oriented tool), despite limitations regarding DIV nesting.The Resolution Switcher contains three icons for Mobile, Tablet, and Desktop sizes. Click the icons to control the size of Design view as you design layouts.

jQuery Mobile Framework Support

This is another big one for me, as a lot of my recent development work has been in developing mobile content. The new jQuery Swatches panel to see the entire list of jQuery Mobile themes and button icon options in Dreamweaver. You can apply a theme to update an entire application or select individual elements to style them separately. This new features makes complete sense, and I'm glad to see that it's been integrated.

Dw6 jquery mobile

Phone Gap Build for Mobile Development

The mobile web isn’t just about browsers, and Adobe Dreamweaver CS6 adds tools for working with PhoneGap, Adobe’s tool for packaging web applications into apps that run on the major phone platforms. Instead of publishing to a web server, mobile applications can be delivered to Adobe’s PhoneGap Build cloud service. You can control which platforms you’re building for using the PhoneGap Build panel in Dreamweaver, which reports on build status for each platform you’re targeting. Once a build is complete, all you need to do is download your app from the PhoneGap site for testing, and eventual publishing on an app store. There’s even the option to use a QR code to load an app straight to a device from the PhoneGap Build site, and you can use one to send clients to a public page for their app approval.

Dw6 phonegap

Wish List

Theme Support
Every other editor supports changing color coloring themes. Why hasn't Adobe picked this up yet? A simple import/export color theme option would allow people to style their code panels the way they want, instead of being forced to look at the start white code background.


Overall, Adobe's embrace of mobile development in Dreamweaver CS6 makes it a worthwhile upgrade for dedicated dreamweaver developers. It's deep integration with Photoshop and Fireworks also make it a great tool for rapid development.

Ease of Use: 8
Look and Feel:8

Overall Rating: 9/10

Leave a Reply

Your email address will not be published.

Contact Us

Have a question? Send us a message. We'll get back to you soon.