Last week, I had this wonderful opportunity to teach a Dreamweaver CC class in Saudi Arabia, a country, I never went to before. In this post, I want to relate my experience in teaching this Dreamweaver Class to perfect newbies in web development as well as my excitement in re-discovering this application that once was my main working tool.
No need to say that this particular class was very special to me. It was a wonderful human experience which allowed me to discover a new country and to meet its people. But it was also an excellent opportunity to get back into Dreamweaver after having tried other web development tools for a few year.
Here follows the 5 reasons I still like Dreamweaver both a professional web developper and as an Adobe Certified Instructor.
1) The code is one click away.
One of the main criticism I hear about Dreamweaver is the fact that Dreamweaver generates bad code. This is entirely wrong! As a matter of fact, if Dreamweaver generates bad HTML and CSS code, it is because you, as the developer, let it do so.
The Code view always is one click away, and nothing prevents you from taking a look at the code in order to control what Dreamweaver is doing and to fix things if necessary.
You can also work entirely in code view if you want to. It has all the tools that any other code editor has (code colouring, code formatting, code completion, etc…).
The omnipresence of the code in Dreamweaver makes it mandatory for the Dreamweaver user to be knowledgable about HTML and CSS. Actually, you will only take the most out of Dreamweaver if you do know HTML and CSS! So Dreamweaver definitely is not a tool for designers that want some code-free web development tool. This is a misconception about Dreamweaver that probably leads to very bad coding and to lots of Criticism. Now, this criticism should be directed to the user, not to the tool! Designers should go the Muse way or… learn to code! End of Story! Now, if they are ready to learn the code, Dreamweaver will quickly become their best friend, combining tools they are familiar with with a serious coding environment.
2) The WYSIWYG view
The WYSIWG view (known as the Design view in Dreamweaver) is an extraordinary tool for rapid development. For example, it is much easier and intuitive to enter text into the WYSIWYG view than to manually type all the paragraphs and headings markup in the code by hand! For things as trivial as entering text or drag and dropping images, I go the WYSIWYG way! In a matter of minutes, all my page content is integrated into my HTML page, Dreamweaver doing all the heavy lifting in the code for me!
Now, don’t get me wrong here! Every single action made in the WYSIWYG view generates some corresponding HTML in code view. If I do like the Word-like feel of the WYSIWYG view, I always take a look at the code and keep a close eye at what Dreamweaver generates. Most of the time, this code is perfectly fine, but sometimes, I need to manually adjust a few things to get it the way I want.
Which leads me to my next point. In order to use the WYSIWYG view efficiently, one should be aware of the code that each WYSIWYG action generates. If you think the WYSIWYG view is there to prevent you from learning the code, you are wrong! But if you know what you are doing, the WYSIWYG view will soon become a powerful ally that will enable you to generate a perfect HTML code in a matter of minute.
3) Testing the website
However, the WYSIWYG view has a major flaw! It is merely a somewhat bad approximation of what the visitors will see in their browsers. Hopefully, Dreamweaver is equipped with a full range of previewing and testing tools.
First, Dreamweaver embarks a webkit browser embedded right into the application. One click on the “Live View” button is all it takes to activate this feature without even leaving Dreamweaver! The “Live View” offers a convenient and accurate preview of the page that is perfectly sufficient in the vast majority of the scenarios.
Second, Dreamweaver offers an icon to test your page in any browser that is installed on your system, making it easy and fast to give your page a full test ride in a real-life situation.
Finally, Dreamweaver CC lets you test your page on three different screen sizes allowing you to optimise your page for Desktop, Tablet and Phone view. Once again, all these options are only one click away and none of them requires that you leave Dreamweaver.
4) Mobile Development
Mobile Development is not easy! Even if you are using Dreamweaver. There are many approaches to the mobile challenge and Dreamweaver brilliantly implements most of these approaches.
First, the new CSS designer makes it incredibly easy to define complex media queries and add CSS rules to it! Now, once again, one should know about CSS, Media Queries and mobile development to take the most out of this feature. And once again, if you are a professional web developer and know what you are doing, the CSS implementation of Dreamweaver will soon become a very powerful and easy to use tool that will significantly speed your work.
Want to develop a native application? Dreamweaver is fully integrated with Phonegap and with the Phone Gap build service from Adobe allowing you to use familiar tools and languages to leverage the full power of modern mobile devices!
On the mobile side, Dreamweaver also integrates nicely with jQuery mobile both in the WYSIWYG and in the code view.
Add the testing tools discussed above to the mix and you’ll get an amazingly comprehensive set of tools for your next mobile project. Be aware though that the final quality of the generated code depends more on your knowledge of the language and on the quality of your workflow than on the tool itself.
5) Integration with other Adobe applications
Want to modify an image on your webpage? No problem, Photoshop is one click away! I mean, Photoshop! The ultimate world-class image editing tool from Adobe is only one click away when you work with Dreamweaver! Not only that! Round trip editing is available. That is, invoke Photoshop from Dreamweaver, modify the image in Photoshop, save your work and… the image is automatically updated in Dreamweaver!
Other integration exist with Adobe Kuler, Adobe TypeKit, Adobe Phone Gap Build, Adobe Business Catalyst, etc… So with Dreamweaver, you get an entire ecosystem of services and applications right at your fingertip. I know of no other web authoring tools that gives you such power in a single package!
There are so many other great features I would like to tell you about. Things such as Dreamweaver Templates, integrated FTP client, new HTML 5 and CSS 3 tools, the CSS designer and CSS transitions panels, etc…. but that would make too long of a post!
On the first day of my training in Saudi Arabia, I told my trainees that they would have three things to learn: Html, Css and Dreamweaver itself. At first, they were a bit afraid, but they quickly found their way into the application to concentrate on learning the HTML and the CSS. During the entire training, I took great care of showing them the result of their WYSIWYG actions in the code. At the end of the day, it’s all about the code, not about the tool you used to build it!
This leads me to the main conclusion of this post. If you want to use Dreamweaver efficiently, you should learn about HTML and CSS. The basic misconception about Dreamweaver is that is allows you to build website without knowing about the code. This is entirely false! If you don’t want to learn about the code, go the Muse way, or even better, stick to print design!
If you are a professional web developer that knows about coding, then, Dreamweaver could become your best friend! There is no other web authoring tool on the market that offer such a comprehensive and powerful set of tools. Dreamweaver has the ability to significantly speed up your development work while maintaining the quality of the code intact!