In what seems these days my previous life, when I was working for a small start-up as a web developer I was using mainly two tools for all my HTML, PHP, and ColdFusion code: Dreamweaver and Eclipse. Bear in mind that this was like 2004/2005 and many tools that we take for granted today weren’t available back then.
This is why I will always have a soft spot for Dreamweaver. And I will always believe that it is actually a pretty darn impressive product. In this blog post I will focus on a number of features that I think are quite useful and can boost your productivity. Some of these features are new, others have been there for a while though not as refined as they are today.
Fluid Grid Layouts
Responsive design is on everyone’s lips these days. There is no doubt that Dreamweaver can help you create websites that adapt beautifully to different screen sizes, from mobile to desktop.
From the File menu choose New Fluid Grid Layout. This command will open up a window that lets you set the number of columns for each resolution (mobile, tablet, and desktop) and other things like gutter and page width (using percentage based values).
Once you click Create in this window the necessary CSS and stub HTML code are generated. From there on you can add more content and use the Split view to control how individual pieces of content react to the different screen sizes.
Also note that while in split view you can quickly move between mobile, tablet, and desktop resolutions by using the Resolution Switcher along the bottom-right of the preview panel.
Under the hood, this feature uses boilerplate.css and respond.min.js (adds support for old browsers). I encourage you to read this article or watch this video, which goes into details on how to use this feature.
Support for Media Queries
Media queries is one of the tools you have to use when doing responsive web design. Dreamweaver has supported this for quite some time. If you go to Insert > Media Queries you will open up a window for managing media queries.
Using this dialog window you can define and maintain media queries for a single page or for the whole site. This feature is related to the next topic, Multiscreen Preview panel that lets you visualize your page at different resolutions and check how the CSS and media queries modify the layout. Check this article for a good introduction on what media queries are and how to use them with Dreamweaver.
Multiscreen Preview Panel
From the Window or File menu you can choose Multiscreen Preview. This will open up a panel with three different view ports (mobile, tablet, and desktop). You can control the size for each one.
Support for Building PhoneGap Apps
The support for packaging PhoneGap apps has been updated. Now, it uses the PhoneGap Build service under the hood and this way you get all the benefits with minimum hassle.
You can configure and access the PhoneGap Build service from Site > PhoneGap Build Service.
You can enable emulation for your web app by setting the Android and iOS SDK in PhoneGap Build Settings. This will enable you to run your current Dreamweaver project as a PhoneGap app in Android or iOS emulator (keep in mind that for iOS emulator you have to be on a Mac).
As for PhoneGap Build settings, all you have to do is to provide the email address and password you used to register to http://build.phonegap.com. The service will build the native installers for iOS, Android, Windows Phone, Blackberry, webOS, and Symbian.
Once a native installer is built you can download the file or scan the QR code with your mobile device to trigger the installation process.
Support for jQuery
Once you have opened the swatch you can select various jQuery Mobile components and then use the the jQuery Mobile Swatch to customize the look. It includes support for custom themes.
Also, you can easily insert one of the predefined jQuery Mobile building blocks into your page using Insert > jQuery Mobile.
Many developers/designers work with a browser window side by side with their favorite editor. Dreamweaver lets you achieve something similar but within the editor itself. First, you select the Split view, wich will use two vertical panels one for the the code view and one for the design view. Then, from the upper-left side of the editor you press the Live button. This will transform the Design panel into a live preview window that uses the embedded WebKit engine to run the code you wrote.
You can even navigate through your website/web app. And use the Inspect option that will work pretty much like you would expect (think of Web Developer tools). The cool thing when using the Inspect option is that when you change the CSS rules for the selected element those changes are persisted (you don’t lose them once you refresh the page or move to a different one).
Where to go next
I encourage you to give Dreamweaver a try especially if you haven’t tried it in a while. Just go here and play with it (there is a fully functional trial version too). And of course let me know what you think about it :)