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.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.