Adobe Creative Cloud

October 19, 2016 /

Re-Imagining Dreamweaver: The Inside Story on Developing for Developers

Adobe Dreamweaver. If you were learning to develop websites in the late 90s, you probably started with Dreamweaver. Now, nearly 20 years later, you may be wondering how it still exists. Just hearing the product name might conjure up a lot of different thoughts — maybe you’re nostalgic, or you might remember some of your frustrations as the product changed. Over the years, Adobe added cutting-edge features like a refreshed Live View and Bootstrap integration, but customers still felt like Dreamweaver was falling behind the curve. So a team of product managers and engineers made it their mission to listen to developers, to think like developers, and then to rebuild Dreamweaver from the ground up. Here’s how they did it.

It started in customer meetings. “We took a bunch of road trips in Germany, Japan and across the United States, and we talked to our users and we started to get a really clear picture of what they were thinking about Dreamweaver,” recalls Rajnish Bharti, senior product manager for Dreamweaver. “People told us that from the look of the product, they wondered whether Adobe was still investing in Dreamweaver at all.”

The comment hit Rajnish squarely in the face. Instead of requesting a feature or describing a use case, one customer asked point blank whether there was even a roadmap for the future. Sure, Rajnish could assure him that Adobe was committed to its customers and products, but the concern was at its core existential. What was driving this deep response? The more Rajnish listened, the more the problem became clear.

“Please,” a customer said, “can you just focus on making Dreamweaver a great code editor? As in, not trying to make something for nonexistent people, something that tries to get things done without caring for code?” Rajnish now had a hunch: coders felt bombarded by Dreamweaver’s complex, aging user interface (UI) and bogged down by features that distracted them instead of helping them.

Arun Kaza, an associate product manager for Dreamweaver, validated Rajnish’s suspicion: “I’ve been collecting emails from customers. People were talking about how Dreamweaver was really cool back in the day. It was seen as the go-to tool for web design and development. Then, over the years, that world evolved so fast and so much that people saw Dreamweaver as falling behind — both in terms of adapting to a modern workflow and in our way of adding new features, but not going back to tidy it up and make it clean and slick.”

So there was Rajnish with a product built on a mountain of nearly 20 years of code, realizing it was time for a massive re-imagining. He decided to take a couple of bold steps: first, to work quickly, and second, to bring Dreamweaver users into the process.

Rajnish recalls, “The decision about what we needed to do was obvious: revamp all of Dreamweaver in just one year. To do it, we decided to sacrifice one of the two releases we do each year and focus completely on the overhaul. We also wanted to do very open development — we declared our roadmap to everyone well in advance and then we started a public beta.”

Re-Building the Experience

The first step was to re-imagine the UI and create a look and feel similar to other Adobe products. “Our bigger brothers — Photoshop, Illustrator and InDesign — had made significant strides coming up with a new UI paradigm, and we realized it was time to modernize with them,” says Raghavan Gurumurthy, director of engineering.

“Before we began, we started presenting our proposal to revamp the UI to customers and it resonated with them. They would say, ‘Aha, now you are getting what we really want!’” says Rajnish.

“We worked closely with the other Adobe UX design teams to get that clean, streamlined look. We reorganized the menu and panels and removed a lot of things to make sure that when you launch you really feel like, ‘This looks good.’ At the center is this philosophy: we removed the unnecessary stuff, and you can bring it back if you need it, but the display area should really be taken up by the document you are working on, not a lot of panels you don’t need,” explains Raghavan.

“You get all the benefits of Dreamweaver, things like built-in FTP, ability to link your code, all of that, in a very simple UI, and you don’t see any UI that’s not relevant to you. It’s elegant; it only does the stuff you’re really interested in,” adds Rajnish.

Another critical piece of the project was to streamline Dreamweaver so developers can work faster and lighter. “Dreamweaver is not just a code editor, but the reality is that we get compared with lightweight code editors, and what comes with those lightweight code editors is the performance,” Rajnish says. To deliver this for the customer was a key part of the revamp, so Rajnish set up a small team of the best engineers to solve this difficult problem. The result, as Rajnish explains, “is an order of magnitude difference in the new beta. You don’t need a timer to see it—you can easily tell in the startup time, or the time it takes to load a large file. It required some really heavy engineering thought, and it’s something that really worked. ”

Developing with Developers

Developing for developers is its own kind of beast, as Saloni Sabnis, Adobe experience designer, knows from experience.

“When we’re designing for developers, we have to make sure we’re empowering them, but not meddling. It’s something we’ve learned through experience — sometimes we’ve gotten a bad rap for doing things on behalf of the user. It’s an important thing to understand — unlike other kinds of apps, where users are happy if it does some of the work for them, developers want full control.”

So the team realized they needed to bring developers into the process. This meant sharing the roadmap early and often, and inviting users into a public beta for feedback. To make sure the feedback came through, they built it in. “Instead of opening an account in and hoping and praying that users would go there and give us feedback, we integrated the tool right into the product. So, if you go to the Dreamweaver beta today, you’ll see an icon for UserVoice — an entire feedback mechanism is baked inside the product, so you don’t have to leave to give us feedback,” explains Saloni.

“There’s nothing like customers in the hundreds and thousands using your product in the beta phase and finding issues and gaps that we have time to address before we ship. With a fundamental shift like this, we feel like it’s best to be transparent and open with the community,” says Raghavan.

The Road to Redemption

The Dreamweaver team is hopeful that, in its newest evolution, faithful users will be excited, and the product will earn back the love of folks from the early web days. “So many people started their web developer journey with Dreamweaver years ago,” says Rajnish, “but over time a lot of them transitioned to lightweight editors. Now I’m starting to see tweets saying, ‘Hey, I used to use Dreamweaver 5, 8, or 10 years back. This beta is looking interesting. I might reconsider.’”

Rajnish smiles as he recounts a sarcastic, but auspicious snippet of feedback he recently received:

Download the Dreamweaver beta. It opens, so excellent start. But seriously, multi-cursor support? I think I’m falling for you again.

Rajnish and the team know this is only the beginning. The road ahead is filled with addressing more of customers’ most pressing issues, but they are eager to continue delivering for developers.

For a full rundown of everything that’s new in the revamped Dreamweaver beta, read more here. To take the beta for a spin and let us know what you think, download it free with your Adobe user ID.

Join the Public Dreamweaver Beta!

We’re working on a completely modernized version of Dreamweaver CC. Help us shape the future!