How do you design for the web?
Looking for an open source alternative to Dreamweaver or another proprietary HTML/CSS editor? Let's round up some of your options.
Not all that many years ago, pretty much every webpage on the Internet was, at some level, designed painstakingly by hand. It was tough, and before CSS really took hold and became well supported across most common browsers, it often involved hacking a layout together by using HTML tables in a way that they were never really envisioned to support.
While some designers developed workflows completely based around manual editing of raw HTML files, the WYSIWYG (what you see is what you get) editor began to emerge as a tool of empowerment to millions of amateur and professional designers who didn't know, or at least hadn't mastered, the art of hypertext markup.
Products like CoffeeCup, HotDog, FrontPage, GoLive, and many others filled the market, and many web-based WYSIWYG editors emerged as well. Among the more successful was Macromedia (later Adobe) Dreamweaver, which was among my personal favorites for many years.
These web authoring tools weren't just about WYSIWYG editing; even for those who were comfortable with direct authoring of markup language, these tools offered advantages with template control, file management, and simply reducing the time it takes to create functional code.
But just as these helpful editors were expanding access to webpage creation, something else was happening too. Content management systems like Drupal and Wordpress (and many, many others before them) displaced the need for the average content producer to need to edit raw HTML at all. You could easily make a functional website without even worrying about the underlying markup.
So did the rise of the content management system change the web? Absolutely. Did it eliminate the need to hand code HTML? Well, for some people, yes. But as the web moved from a collection of content to a platform for applications, just as many new opportunities have arisen for doing markup have disappeared. Every software as a service application, every social media network, and even many mobile applications, rely on HTML and CSS to render their display. And those content management systems? They still need templates to function.
And though many helpful libraries exist to standardize and simplify the web development process, coding for the web isn't being displaced any time soon. And though proprietary tools are still common, there is a rich collection of open source alternatives out there. Here are some you should consider.
1: Aptana Studio
BlueGriffon is a WYSIWYG editor which is powered by Gecko, the same rendering engine included in Mozilla Firefox. One of a few derivatives of Nvu, a now-discontinued HTML editor, BlueGiffon is still actively updated, and seems to be the only actively-developed derivative which supports HTML5 as well as modern components of CSS. Licensed under each the MPL, GPL, and LGPL, version of BlueGriffon are available for most major platforms.
Seamonkey is a community continuation of what was once a Mozilla-produced Internet application suite. While Mozilla decided to narrow their focus to individual projects, Seamonkey continues to make a regular release of its full suite, which included Seamonkey Composer, a WYSIWYG HTML editor. Though as of this writing the last stable release was just last week, the Composer portion of Seamonkey is no longer being actively updated. However, as the same engine is also used to power the email component of the project, basic maintenance is performed, and it remains a plausible option for newcomers to HTML.
4: Choose a legacy editor
There are other projects that have fallen by the wayside, but still have dedicated followings of their own, despite not having seen new releases in the past few years. Many are still capable choices, if a little dated. A few of these include:
- Amaya, an editor by W3C last updated in 2012, which features support for HTML 4.01.
- Komposer, a community-developed fork of the Nvu editor with WYSIWYG support along with side-by-side editing, for which the last stable version was released in 2007.
- Maqetta, an HTML5 capable in-browser editor which was last released in 2013.
- Nvu, a cross-platform editor upon which KompoZer was later based, which has not been updated in many years.
- Quanta Plus is an integrated development environment designed specifically for HTML, CSS, and related languages, with WYSIWYG capabilities, last updated in 2009.
Bonus option: an advanced text editor
While not necessarily the best for beginners, a number of text editors provide additional functionality that is incredibly useful to those editing HTML/CSS documents. When used side-by-side with a modern browser with built-in debugging tools, you may be just as productive with one of these as you are with a more dedicated solution. Some of our favorites include:
- Atom, a relatively new project from GitHub, which describes itself as a "hackable text editor for the 21st century," has support for HTML and CSS out of the box and many additional plugins available.
- Bluefish, a lightweight integrated development environment with code highlighting and matching for HTML and CSS, remote upload capabilities, and a number of other basic features for web authoring.
- Vim or Emacs. Without participating in the holy war between these two traditional text editors, I can safely say that there are a number of enhancements for web editing available for both. So if you're already a terminal junkie, take your pick.
Are any of these solutions a feature-by-feature reproduction of Dreamweaver, or another proprietary tool? Of course not. They weren't designed to be. They each have had their own roadmap and goals, and their own strengths and weaknesses. Web design is a big world with lots of applications, and lots of approaches. Take the time to find the workflow that meets your needs. Try out a new tool, see what you like and don't like about it, and if it helps you solve a problem, why not share back your feedback with the broader community to help them as well?