Review of the New BlueGriffon Web Editor

BlueGriffon is a free WYSIWYG (What You See Is What You Get) HTML editor powered by Gecko, the rendering engine inside Firefox. It is cross-platform with versions for Windows XP and Windows 7, Mac OS X and popular Linux distros. There is also a portable version (for Windows only).

Like its predecessor, NVU, BlueGriffon provides an easy to use interface and includes all the most common options to build web pages that comply with the W3C’s web standards (HTML 4, XHTML 1.0, HTML 5 or XHTML 5 / CSS 2.1 and parts of CSS3 already implemented by Gecko).

A handy wizard guides users to set up their canvas, starting with selecting the document type, filling in data for the property, picking the colours, adding a background image, and deciding on the page layouts.

The interface is intuitive and almost basic at first, as it closely mimics a word processor toolbar layout. Icons to the most common options are clearly laid out: adding a table, a single image or a thumbnail linking to a large image, a link, a video, an audio file or a form to a web page is easy. Switching from WYSIWYG view (where you can arrange objects visually) to the web page source code (where you can manipulate the web page by editing the HTML code) is done by clicking on the two buttons at the bottom of the page. Several web pages can remain open in multiple tabs, which makes it easy to quickly switch from one document to another, copy and paste, etc

Adjusting styles can be done through the style properties panel, which would require some coding knowledge for most functions other than the most basic ones though. For example, it is easy enough to change a font colour or adjust the style of a border but, while the style properties organises the numerous style options quite neatly, most of the style options available would probably not be understood immediately by novices: this makes BlueGriffon more adapted to intermediate coders.

Another drawback of BlueGriffon if you start building your first website layout is the lack of proper (offline or online) documentation yet. If you have previously used any decent web building tool or if you want to build a fairly basic page, this should not be too much of a problem. However, if you’re a beginner in website coding, you may find yourself stuck at some point without much help available. Let’s hope that BlueGriffon documentation will improve with time, starting by offering a few walk-throughs on creating new pages and sites and developing its forum.

On the other hand, one of BlueGriffon strengths is the add-ons: the most obvious one is the free FireFTP add-on to easily publish your page from BlueGriffon. Most of the other add-ons need to be purchased for a small fee though to support future development, according to the BlueGriffon website. The CSS Pro Editor extension for example is much more powerful than the default CSS toolbox and provides web authors with full control over their stylesheets. Some popular paid extensions are the Mobile Viewer add-on (to test your pages with a large number of mobile devices), the Eye Dropper (a colour picker which allows web authors to pick a colour from sources that are not directly viewable or editable inside the editor), the Project Manager add-on (a sync tool between a local directory on your hard disks and a remote directory reachable through FTP), the Snippets add-on (useful when manipulating the exact same chunk of HTML code or text inside the documents) and the Toolkit Manager add-on. It is possible to buy all add-ons at once at a discount price on the publisher’s website.

Clicking on the Preview button will open the web page in any browser of your choice (as long as it’s already installed on their system of course) which is useful for cross-browser testing, to check what your page looks like in Internet Explorer or Google Chrome for example. This is also useful to check your scripts since these won’t run directly in BlueGriffon.

The Markup Cleaner which can be found at Tools menu can help you with cleaning your HTML code. You can also spell-check your pages and BlueGriffon even integrates a small SVG editor (svg-edit, originally distributed as an add-on to Firefox and adapted to BlueGriffon) for quick drawing jobs.

BlueGriffon is a very promising open-source and cross-platform web editor. At only version 1.31, it can’t of course compete directly with massive and expensive web development applications such as Adobe Dreamweaver, but this is already a very nice application to create web standard compliant pages without too much effort. It also makes a great tool for educational purposes, such as teaching design students the basics of HTML and CSS. Documentation and online forums need to be improved but, once it gets traction and support from the community, it could quickly become much more popular.