You can build websites using any of dozens of tools—some that run online, some that run on your local computer, some that run partly online, partly on your machine—but Adobe Dreamweaver 2020 stands alone as the only site-building app that's just as suitable for individual designers as it for enterprise-scale projects. It's just as helpful when you build a site by writing actual code as it is when work in WYSIWYG graphic layout that hides all the code until you need it. The app gets the job done for individual users or teams where different team members have different levels of freedom to add or change content, and of course it works smoothly with Adobe's arsenal of graphics apps and web services.
Like all other Adobe apps, it comes in virtually identical Mac and Windows versions, and it's available either through a Dreamweaver-only paid subscription ($20.99 per month with 1-year commitment, $31.49 month-by-month, or $239.88 for one year prepaid) or as part of the full Creative Cloud suite ($52.99 per month), which gets you Photoshop, Illustrator, and all the other creative software and apps. Both the individual app and the full suite subscription come with 100GB of cloud storage.
Responsive Site Design
Dreamweaver excels at creating multiplatform (responsive) websites that work equally well on a phone, tablet, or computer. Any private or corporate web designer looking to replace an ancient desktop- or laptop-style website with a modern multiplatform site will find Dreamweaver the obvious first choice. I'll describe some alternatives later in this story, but none of them comes close to Dreamweaver in terms of power and ease.
After more than 20 years of evolution, Dreamweaver still has some awkward spots where it can't decide whether it's a tool for advanced coders or for visually oriented designers, but these are easy for serious users to work around—and Adobe's subscription pricing means that only serious users are likely to have it. Dreamweaver isn't cheap, but for professional-level web design, it repays the price in power and convenience. Adobe's subscription model means you get periodic feature updates at no extra cost.
Similar Products
Wix Website Builder
Duda Website Builder
Gator Website Builder
Squarespace Website Builder
GoDaddy Websites + Marketing Website Builder
Weebly Website Builder
WordPress.com
Adobe wants you to work with Adobe tools, so it's easy to use Photoshop and Illustrator to edit images or Premiere Pro and Audition for video and sound files. You can also use Photoshop to create a mock-up of what you want your site to look like and then use Dreamweaver's Extract menu to drag elements from the Photoshop file into your web pages. But Dreamweaver also works with just about any third-party site-building tool that you might want to use. For example, you can use Dreamweaver to design and edit sites managed by WordPress, Joomla!, or Drupal, or you can create a Git repository and use it keep track of changes in your site.
Dreamweaver uses the Bootstrap framework for responsive sites, and by default uses the latest Bootstrap version, 4.3.1, though the earlier 3.4.1 version is still built-in if you want to continue using that. Dreamweaver guides you through upgrading sites based on the earlier version and tries to resolve incompatiblity hiccups by creating new CSS and JavaScript files that use the latest standard. Bootstrap's responsive sites are mobile-first, meaning that the Bootstrap framework is mostly optimized for phones or tablets, but Adobe's built-in Bootstrap templates are well-engineered enough to look equally good on desktops and phones.
The Dreamweaver Experience
First-time users face a steep learning curve, but if you're familiar with Photoshop or Illustrator, you should be able to climb it fairly quickly. If like me, you get bewildered searching for some obscure feature, the Help menu can guide you to exactly the menu item you need, even when it's deep in the menu structure. Dreamweaver uses the standard Adobe interface, a main editing window surrounded by a toolbar on the left and multi-tabbed information panels on the right. Unless you're an expert coder who won't need all the onscreen tools and panels, don't even think of using Dreamweaver on a small laptop. This app needs all the screen real-estate you can give it.
When editing a typical, relatively simple website, you have at least four document tabs open, one for the current page, the others for JavaScript and CSS files, and an information panel with at least seven tabs, showing files, Creative Cloud libraries, HTML tags that you can drag into a file, a complex set of CSS controls, a Document Object Model (DOM) tree, a list of assets (sorted into URLs, images, media, and more), and a long list of prebuilt and custom-built snippets. Add to this a customizable toolbar at the left and a densely populated menu at the top, and you've got one of the most complex interfaces ever built into app, rivaled only by other development software such as Microsoft Visual Studio.
Fortunately, if you're expert at coding, or if you want the most spacious possible WYSIWYG view, you can hide everything but Dreamweaver's main editing window. And that window is a chameleon-like marvel of flexibility. The window's viewing options include an all-code view with the typical coding-window indentation and color-coding to make the structure of your project visible.
You can choose between two kinds of WYSIWYG views. One is a Live view that approximates what you would see in a browser, except with page elements outlined for clarity and with buttons that let you modify the tags for individual elements simply by clicking on the element. The other is a Design view that shows all design elements on a page, including the ones that might be invisible in a browser until a user clicks on them. Finally, you can split the window to show code in one pane and either Live or Design view in the other—or with code in both panes so that you can view and edit two different parts of the code at the same time. Advanced options let you sync the changes you make on your desktop with the code on your remote web server.
New Features
The just-released Dreamweaver 2020 looks and acts almost exactly like last year's Dreamweaver 2019. Adobe mentions only three new features: simplified click-to-edit in Live view, so you can edit text, not just tags, in Live view simply by clicking on a text element; new default settings for Japanese fonts; and improved code-hinting popups. There's no new learning curve, and the interface and other features haven't changed. One minor potential gotcha in the enhanced Live view editing feature is that some keystrokes don't act as you might expect. For example, you can split a paragraph by pressing Enter in some text in Live view, but Backspace won't recombine the split paragraphs—you'll have to switch into code view and remove the tag for the new paragraph.
Web editors have always had a feature that previews their web page in a desktop browser. Dreamweaver goes one better by adding live previews on mobile devices—an essential feature when you're designing a responsive page that must work on multiple platforms. You click a preview icon at the lower right of the editing window, use your phone or tablet to scan a QR code that appears on the preview icon's popup menu, enter your Adobe password on your device. After this, you can preview your code in the default browser on your device, with the changes you make on the desktop appearing immediately. You don't need to install any new apps on your phone or tablet.
Should you buy a subscription to Dreamweaver? If you already use Photoshop or Illustrator or if you're building a corporate or design-heavy site, Dreamweaver is an obvious choice. If you're averse to coding, then you can do what half the online world seems to do, and use WordPress to build your site by choosing a visual theme and using or modifying it from simple menus. You'll need some technical knowledge, but you can get by with almost none.
If you don't want to think about coding at all, then use a hosting service that offers Wix or Weebly or any other fully visual site-building environment that doesn't require any coding. Be warned that you'll sacrifice some customizability and control, however. Weebly lets you change themes at any time, but gives you limited options for text formatting. Both offer paid e-commerce options. You can also try a free version of the enterprise-oriented CKEditor system, which offers advanced features like collaborative editing, WYSIWYG editing and full control over your site's code.
For smaller websites designed mostly for laptop and desktop browsers, you can use any of dozens of traditional web page editors like RapidWeaver or Coda on the Mac—but you won't get true WYSIWYG editing as you do in Dreamweaver or browser-based systems like WordPress or Wix. Many traditional web page editors offer preview modes, and some (like Adobe's terrific and free Brackets editor) offer real-time preview in your browser, but that's not the same as editing entirely in WYSIWYG mode as in Dreamweaver's Live-editing mode.
My favorite quick-and-clean WYSIWYG web editor for simple sites is Microsoft's free, Windows-only Expression Web, formerly a high-priced app, but now a free download, because Microsoft stopped updating it after Visual Studio provided more advanced site-building tools. Expression Web hasn't been updated since 2011, but its feature set still gets the job done for basic websites, and you can't argue with the price.
Dreamweaver can seem slightly cranky at times. For example, if you click in the wrong place, the screen layout can suddenly change in ways that can be hard to recover from without resetting the screen layout to the default. The Undo feature works perfectly when you're working in the code window, but doesn't work in all contexts—for example, when you're dragging assets into a window using the feature that extracts page elements from a Photoshop file.
Still Excellent
Despite some minor quibbles, Adobe Dreamweaver 2020 is mostly built like a battleship, and it has the best combination of flexibility, power, and ease of any instrument ever invented for building websites. Dreamweaver has no real competition, and no serious web designer should be without it. Dreamweaver is the PCMag Editors' Choice for website-development programs.
Dreamweaver has long been the only serious choice among advanced website-design tools. For both graphic designers and serious coders, it remains the best choice for custom-built mobile and desktop sites.
Like What You're Reading?
Sign up for Lab Report to get the latest reviews and top product advice delivered right to your inbox.
This newsletter may contain advertising, deals, or affiliate links. Subscribing to a newsletter indicates your consent to our Terms of Use and Privacy Policy. You may unsubscribe from the newsletters at any time.
Thanks for signing up!
Your subscription has been confirmed. Keep an eye on your inbox!
Sign up for other newsletters
