Discover how Dreamweaver CS6 can help you design responsive sites that work across desktop, tablet and mobile.
The web is currently in one of its semi-regular periods of rapid evolution. Screen sizes are diverging, with desktop monitors getting bigger and tablets and smartphones grabbing an increasing share of web traffic. Mobile-optimised versions of websites are now expected by many clients, rather than being some kind of optional extra. Thus most of the main updates in Dreamweaver CS6 are designed to cater for these changes.
Perhaps the most important of the new features is a new option within the New Document window: Fluid Grid Layout (above). 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). 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.
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.
Transitions can be fiddly to hand-code from scratch, so Dreamweaver’s straightforward form-oriented workflow will be as welcome to dedicated hand-coders as to less technically inclined web designers. Output is also purely CSS-based (as you’d expect), with browser vendor prefixes alongside ‘clean’ CSS properties.
The remainder of Dreamweaver’s changes centre around mobile. Along with enhanced support for the PhoneGap Build service (for packaging native mobile apps), jQuery Mobile framework support has been improved. A new jQuery Swatches panel enables you to view a list of the jQuery Mobile themes and button icon options in Dreamweaver.
Apps can be updated by applying a theme, or individual elements can be selected and styled. You can also import custom themes designed in Fireworks CS6.
Dreamweaver CS6 is part of CS6 Design Standard, Design/Web Premium and the Master Collection – plus Creative Cloud.
CS6 Design Standard costs £1,032, or from £219 as an upgrade. CS6 Design/Web Premium costs £1,509, or from £298 as an upgrade. CS6 Master Collection costs £2,223, or from £397 as an upgrade.
Creative Cloud costs £38.11 per month with an annual contract. Current owners of CS3 or later suites or products can get this for £22.23 per month. On a month-by-month basis, Creative Cloud costs 57.17.
All prices exclude VAT. Adobe says CS6 will be out before May 22.