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 colors, 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 color or adjust the style of a border but, while the style properties organizes 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 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 color picker which allows web authors to pick a color 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 will not 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 not 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 fundamentals of HTML and CSS. Documentation and online forums need to be improved but, once it gets tract and support from the community, it could quickly become much more popular.

Source by Christophe Marceau

About

I am a Web UI/UX Designer who specializes in user interface design, user experiences and programming languages like HTML, CSS, and Front-End Frameworks like Bootstrap. I enjoy working on and blogging about projects that involve a mix of web user interface (UI) design, user experience (UX) research, mobile design prototyping, eCommerce, content creation and internet marketing.