Adobe Dreamweaver CS6 embraces RWD

Every now and again, the web goes into evolution overdrive, and entirely new ways of working rapidly make existing techniques look archaic. For applications with long upgrade cycles, this can be challenging, but as noted in Creative Bloq’s Dreamweaver CS6 review, Adobe has had a good stab at embracing modern design techniques with the latest revision to its popular web-development tool.

The key change in Dreamweaver CS6 is a fluid grid layout template, enabling designers to build responsive websites in a visual manner, and preview the site in three different viewports (desktop, tablet, mobile). There’s a new CSS Transitions panel, providing a quick way to build transition effects, and there are boosts to mobile development through tools for working with PhoneGap and jQuery Mobile.

Web designer Stuart Long told .net that the update would give people creating sites a better, faster response regarding the code they’re working with, and the fluid template with pre-set sizes will “add speed as well as giving you a more accurate means of getting to all device sizes, rather than setting these manually yourself”. He added that the CSS Transitions panel was welcome: “It looks like a good working tool for coding at this level. Having written a couple of pages with transitions, it was a pain having to swap between browser and preview so often, and so it’s much easier to keep it in one place.”

Creating responsive layouts

Author David Powers, writer of a number of Dreamweaver books, also enthused about the new fluid grid layouts: “It’s inspired by Ethan Marcotte’s ‘Responsive Web Design’, but whereas Ethan is constantly pulling out his calculator to work out the percentage width and margins for page elements, Dreamweaver does it for you automatically. All that you need to do is to add a fluid grid layout div to the page, and you can drag to resize it and snap it to the grid.”

Powers told us he’s sure Dreamweaver detractors will “suspect the use of spaghetti or proprietary code”, but they’d be wrong: “The only difference between an ordinary div and a fluid grid layout div is that Dreamweaver automatically creates two extra style rules for the layout div in separate media queries. The fact that you can resize divs and snap them to the grid makes building a simple responsive layout a piece of cake.”

There are, however, some drawbacks to the new feature, said Powers, notably its handling of media queries, which are all in a single style sheet. This, he told us, makes it hard to identify throughout Dreamweaver’s own CSS Styles panel which rules to edit for a particular layout. He added that the style rules are also verbose – “Each one has a declaration for the display, float, clear, width, and margin-left properties, even if the value is inherited.” – you can’t snap any HTML element to the grid bar a div, and that it’s tough to nest elements to make more complex layouts for desktop.

Despite these issues, Powers argued Adobe has made a great start: “It’s simple and intuitive to use, and it creates responsive layouts using only standards-compliant code.” And his contacts at Adobe have said the new Creative Cloud subscription model should enable more frequent updates, which could see fluid grid layout enhancements before the end of the year.