Dreamweaver is still dying

Four years ago, I announced that “Dreamweaver is dying”, that hands-on HTML authoring was over, and the future belonged to upcoming CMSes such as WordPress and Drupal. Oops.

Hands-on web design is still very much with us, and so is Dreamweaver, a fact that was rubbed in recently at an Adobe “Create the Web” session, when the presenter asked how many people in the room were still using the program – almost every hand went up. So, why is Dreamweaver still thriving?

The answer can be summed up in one word: HTML5. When I wrote that piece in 2009, HTML4 and CSS 2 were both more than ten years old; web designers understood the fundamentally limited platform they provided; and the World Wide Web Consortium (W3C) planned to rewrite both in XML to set them in stone.

The web is universal or it’s nothing, and there’s no point creating all-singing, all-dancing pages that most of your audience can’t view

But that year saw an extraordinary turnaround. Many browser developers had been dissatisfied with the limitations, and, after the W3C rejected their initial proposals, Mozilla and Opera joined forces with Apple to create the independent Web Hypertext Application Technology Working Group (WHATWG) and push forward the capabilities of HTML, CSS and JavaScript.

In 2009, the W3C accepted defeat, dumped its own XHTML working group, and embraced WHATWG’s initiative, handing the future of the web to the browser developers and their evolving HTML5.

This ought to have promised exciting new features for the world’s most popular web-authoring tool, but Dreamweaver continued to act as if HTML5 didn’t exist.

To be fair, there were good practical reasons. The web is universal or it’s nothing, and there’s no point creating all-singing, all-dancing pages that most of your audience can’t view. Web designers, as a general rule, work to the lowest common denominator, which meant waiting until all non-HTML5 browsers had been flushed from the system – a very distant prospect.

Another factor was that Adobe already had its own, extremely successful, web-application technology in Flash, and was determined to exploit the edge this granted it and its users. As Adobe focused on this strategy, Dreamweaver looked increasingly like a tool merely for wrapping SWF-based Flash applications in HTML. Also, since Flash was universally supported by desktop browsers, and could do everything HTML5 was promising to deliver – and plenty more besides – the need to switch to the less powerful, less universal HTML5 was debatable at best.

I’ve covered the denouement of this tale extensively. Steve Jobs turned the web upside down by announcing, the day before the launch of Adobe’s Creative Suite 5, that Apple wouldn’t be supporting Flash on the iPhone or the iPad. Robbed of universal delivery on these next-generation devices, Flash in the browser was doomed to decline rapidly. To deliver rich web content, and stream video to iOS devices, suddenly you had to embrace HTML5. Like the W3C before it, Adobe was powerless to control the evolution of the web, and Flash went the way of XHTML. The blog post in which Jobs signed Flash’s death warrant concluded: “Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”

That was advice Adobe had no choice but to take, and in April 2011 Dreamweaver CS5.5 appeared, with its focus switched to HTML5 – and almost no mention of Flash. Coding capabilities were finally updated to support HTML5’s crucial video, audio and canvas elements, and, thanks to an updated version of the in-built WebKit engine, Dreamweaver’s Live View also supported these features, along with SVG, @font-face rendering and CSS media queries.

The new Multiscreen Preview dialog allowed users to set up responsive designs that change their layout depending on the screen real estate available, which is key to making pages work on both large and small screens.

Dreamweaver CS5.5 also opened up a new authoring field with its ability to create standalone HTML5 apps for handheld devices, thanks to its integration of the industry-leading jQuery Mobile framework, complete with starter layouts to get you going, plus improved DOM support and code-hinting. Most importantly, it integrates with the PhoneGap framework, which, in addition to providing dedicated APIs for accessing device hardware such as accelerometers, cameras and storage, compiles your HTML5 app into native code for the most popular mobile platforms, including Android, Windows Phone and iOS (although you still need to pay, and jump through hoops, to become an Apple developer).

Creative Suite 6

Dreamweaver CS6 built on these HTML5 foundations, with improved coding support for HTML5 video, enhanced support for jQuery Mobile, and new support for CSS3 transitions (to create smooth animations of object properties without using JavaScript). It also offers a greatly enhanced cloud-based approach to native app creation through integration with Adobe’s online PhoneGap Build service. Its use of onscreen QR codes to simplify installing your apps onto test devices is particularly impressive.

CS6 features significant improvements to Dreamweaver’s layout and typographic capabilities, again thanks to HTML5. The first is the ability to create “fluid grids” that let you specify different layouts for phone, tablet and desktop devices, with different numbers of columns and different DIV arrangements, with each grid quickly accessible via icons at the bottom of the Design View window. Also new is the ability to add the scripts necessary to use custom typefaces from Adobe’s Edge Web Fonts collection, taking advantage of CSS3’s @font-face rule.