Dreamweaver MX interface when it first came out

How Dreamweaver Got Its Name

When Kevin Lynch started going around and talking to web designers, he wrote everything down. He was interested in the hurdles that designers and developers had to overcome, but he was particularly drawn to what they envisioned as the perfect web editing tool. What features, specifically, were they looking for?

After a few months of collecting data, Lynch turned his research into a document called 19 Dreams and handed it over to his employers at Macromedia.

Transforming 19 Dreams

Lynch joined Macromedia in 1996, and immediately gathered a small development team to work on a brand new web editor. Lynch’s 19 Dreams document acted as a guide for these developers and by 1997 that had managed to build software that actually addressed all nineteen. Inspired by the list that had made it happen, they called the editor Dreamweaver.

The Dreamweaver interface in 1997

Dreamweaver wasn’t cheap (initially priced at around $495), but in an already crowded sea of web editing tools, it still managed to stand out. Sometimes described as a visual code editor, Dreamweaver combined a visual editor and a full text editor into one package, with just a single click to toggle between the two.

A quick walk through its features helps to understand why Dreamweaver got so popular so quickly. The visual WYSIWYG editor sported drag and drop tools, support for tables and frames, easy selections of fonts and colors, and inline image uploads. Click a button though, and you’d be taken to the code editor, itself featuring advanced syntax highlighting, keyboard shortcuts and anything you might expect from the most powerful text editors of the day.

Here’s the kind of miraculous part for web designers.Most other visual editors made a habit of adding in filler HTML tags and inline styles to force things into place. Dreamweaver left the markup alone. Switching between the two didn’t degrade your code, and the editor didn’t strip out tags, or insert meaningless HTML. In fact, there were plenty of developers that only ever used Dreamweaver for its code editor.

Extensions were what really set the software apart though. User contributed extensions were written in Javascript and meant to fill the gaps of functionality the software couldn’t offer out of the box. Javascript was a programming language a good amount of developers were becoming fast familiar with, so extensions were basically just another runtime. And extensions were easy to download and install. With extensions, Dreamweaver became software that could be made to do almost anything, and popularity climbed.

The Turning Point

By the time we got to the dot-com boom and Web 2.0 and massive tech giants setting up in the valley, the web industry itself took a real turn. What was once a community of solo pioneers experimenting and testing the boundaries of a shiny, new platform became specialized advanced teams with a growing toolchain. Developers turned to server-side languages and dynamically generated sites, and modern browsers added support for more advanced HTML alongside this brand new styling language called CSS, which replaced the hacky, table-based layouts of old.

Dreamweaver 4, which was released at the end of 2000, had very little to add. Its server-side support was non-existent. CSS didn’t work at all. Even the latest HTML wasn’t included by default in the software. If you were to open up Dreamweaver, drop the text “Hello World” onto the page, then export it, the HTML that Dreamweaver spit out wouldn’t even validate in a web standards tool. The web, as it has been known to do, had jumped too far forward.

Yet two years later, Dreamweaver released version 6, which they decided to call Dreamweaver MX. And all of a sudden, it was at the top of its game again.

A lot happened in two years.

Extending Dreamweaver

Extensions saved Dreamweaver. The software would have faded away into nothingness if not for the dedicated developers that didn’t just sit around and wait for better server-side tools and web standards support. Instead, they wrote extensions and blogged about hacks to plug the gaps, adding database connections, proper doctypes, and XHTML elements, addressing a growing list of features Dreamweaver couldn’t support. But these extensions acted as a roadmap for the Dreamweaver team to follow as they planned the next version of the software, in the same way that 19 Dreams did at the very beginning.

If you were a Dreamweaver users in those days, I have no doubt that you had a handy list of extensions that suited you best, tools you simply could not live without. Downloads of some of the more popular extensions numbered in the hundreds of thousands. As a Dreamweaver user, extensions were essential. And to understand extensions and hacks, bloggers willing to share what experience had taught them were equally essential.

Two authors in particular stand out. Rachel Andrew, of edgeofmyseat.com, and Drew McLellan of dreamweaverfever.com. They blogged about quick fixes to common problems (adding the right doctype), fixed broken HTML with software hacks (editing Dreamweaver HTML to support self-closing tags), and offered up tips for accessibility and web standards (adding alt tags to images).

Edgeofmyseat.com Homepage design

Getting On Board with Standards

In 1998, the Web Standards Project (WaSP) was founded in order to create a bridge between web developers, browsers and the W3C. That better CSS in support in modern browsers? That came from them. The goal was to make more websites standards compliant, and move away from a web littered with table-based layouts and tangled Flash embeds.

They knew they would have to attack the problem from all angles, and that included the most popular tool for designers on the web. When they needed a few people to help Dreamweaver get back on the web standards track, they knew just who to turn to.

Andrew and McLellan created the Dreamweaver Task Force, a group inside of WaSP dedicated to making Dreamweaver’s next version standards compliant by default. They worked for months with the team at Macromedia, lending their expertise and knowledge of the Dreamweaver community to the project.

They started small, getting a proper doctype in and smoothing out some HTML inconsistencies. But once momentum got going, they went big. CSS. Without proper support for CSS2 in Dreamweaver, designers were severely limited. But little by little, the Dreamweaver team added in CSS layout and styling, getting closer and closer to almost-but-not-quite-complete support for stylesheets.

Dreamweaver MX

Dreamweaver MX, the sixth version of Dreamweaver, was released in May of 2002. It was a seismic shift for the software, encompassing two years of work at Macromedia, support from the Task Force, and the influence of dozens of popular extensions. In Dreamweaver MX, sites would output the latest web standards by default. CSS2 came bundled right in. Dreamweaver’s developers had even started work on more complicated and esoteric HTML features, like microformats.

CSS features as they looked in Dreamweaver MX
CSS support in Dreamweaver MX

Dreamweaver MX also brought in UltraDev, which had first rolled out as an extension, and included support for backend languages like Cold Fusion, ASP.net, Java, PHP and even included connections to MySQL databases. But Dreamweaver MX took this even further. They added a Live Data Mode, which basically let website owners connect directly to their live site’s database, make updates, then push those changes live automatically.

The update came just in the nick of time. The web, at this point, was sprinting full speed ahead with better tools, better standards, and better browsers. Dreamweaver MX made designers once again comfortable with the tool. It met the challenges that came with this iteration of the web, one where developers moved swiftly from the backend to the front, working in teams for global corporations, hacking together best practices along the way. It was a new web. And it was a new Dreamweaver.

Coda, Kompozer and the Dreamweaver Legacy

KompoZer was clearly inspired by Dreamweaver. It was an open source WYSIWYG editor developed in 2007 with the explicit purpose of making sure that every website it output was standards compliant. It took the new standards support of Dreamweaver MX to the next level, and even borrowed some of the software’s UI elements.

Then there was Coda, another favorite among developers in the late 2000’s. Released in August of 2007 by Panic Software, Coda took a few disparate tools and integrated them into a single package. The software sported an FTP client, a code editor (for text and CSS), a preview window, and a command line utility. It even tucked away a handy reference guide for common web programming languages. With a few clicks, Coda let you connect to your website, make a change, then push it live.

For a lot of users, Coda’s features were unmatched. But it’s easy to see the influence from Dreamweaver in an editor that lets you edit some code, integrate with the backend of your website, quickly preview the output, and deploy.

What Coda Software looked like when it first came out

As for Dreamweaver, it continued to be a tool of choice for a lot of users. Its support for backend languages and standards improved. For the release of Dreamweaver 8 in 2005, Rachel Andrew even wrote a book aptly titled Build Your Own Standards Compliant Website Using Dreamweaver 8. A new generation of web designers turned to Dreamweaver when they needed an advanced tool.

And then, just as CSS had once helped save the software, it once again became its Achilles heel. Web developers turned to float-based layouts to construct grids, a hack that was not perfect, but worked for a lot of use cases. But it was a hack. And Dreamweaver had a hard time supporting it. Without float-based layouts, Dreamweaver began to fade away. Plenty of people still use it, but it is nowhere near as ubiquitous as it once was.

In recent months, new CSS specifications may show a new path for Dreamweaver. Modules like CSS Grid are built right into CSS, and would be a lot easier to maintain. Dreamweaver’s influence is lasting and enduring. And maybe we haven’t seen the last of it.

Many, many thanks to Rachel Andrew for helping me outline and write this article!


Added to the Timeline

August 30, 2007 - KompoZer KompoZer offers an open source WYSIWYG web editing alternative by developer Fabien Cazenave, with a special emphasis on standards-compliant output. Though not advanced as other tools out there, KompoZer does sport integrated HTML validation tools and advanced CSS support. It will eventually be more or less discontinued in 2011.
April 23, 2007 - Coda Developed by Panic Software, Coda integrates several disparate tools into a single web editing tool. The software includes access to FTP, a code editor, a command line utility and reference material, all bundled together. The tool becomes a favorite among designers and developers working on several sites at once, in small teams or by themselves.
December 1, 1997 - Dreamweaver Macromedia launches their visual code editor, which combines WYSIWYG drag and drop tools with a code editor in a single software package. Over the years, Dreamweaver would be the tool of choice for a lot of designers, releasing several versions with expanding support for web standards and technologies.
View the Full Timeline

Sources