BlueGriffon: A Multi-Platform WYSIWYG HTML Editor

Ads by Google

wysiwyg html editorThere are several reasons why people hardly use desktop web builders – there are only a few of them available, the good ones are too expensive, and the process of web building itself is not a walk in the park. That’s why it’s sad to hear the news that Apple has decided to discontinue the development of iWeb – the application which can help ordinary people build beautiful websites in a fun and easy way.

With iWeb out of the picture, finding a free and good web builder becomes even more difficult. But it is not dead, yet. There’s a new web editing application called BlueGriffon, a free multi-platform WYSIWYG HTML editor which is easy enough for beginners but also powerful enough for more advanced users.

Rise From The Fire

BlueGriffon is powered by Gecko, the rendering engine of Firefox. Just like Firefox, this web builder supports the use of extensions, so you can add more features according to your needs. It also supports the latest and greatest of web technologies like HTML5 and CSS3. The app is available for Windows, Mac and Linux.

wysiwyg html editor

As a WYSIWYG HTML editor, BlueGriffon allows users to easily add, remove, drag, drop, and arrange elements of the webpage. But the easiest way to start is to use the “New wizard” under the “File” menu.

free wysiwyg html editor

Ads by Google

The wizard will guide users to set up their canvas, starting with choosing the document type, filling in data for the property, picking the colors, adding a background image, and deciding on the page layouts.

free wysiwyg html editor

But the real web building process will start after the wizard. To help you during the construction process, BlueGriffon provides you with all the tools that you need on the toolbar.

free wysiwyg html editor

For example, you can add an audio file to your page by clicking on the “Insert or edit audio file” icon, browse to locate the audio file, and click “OK“. Then the file will appear in the editing area.

wysiwyg web editor

The editing area itself consists of two different layers. The first one is the “WYSIWYG” area where you can arrange objects visually.

wysiwyg web editor

The second one is the “Source” area where you can manipulate the web by editing the HTML code. You can switch between these two by clicking one of the two tabs below the editing area.

04b source

Saving Your Work & Uploading It To The Web

There’s just too many elements involved in a web building process so it’s impossible to discuss all of them here. Please do your own exploration to familiarize yourself with the app.

The next step is publishing your creation. But before you can put the page online, you have to save the document that you are working on locally.

wysiwyg web editor

Choose the name that you want for the webpage and…

05b page title

Save it in the location that you want.

05c location

To publish the webpage so that it’s accessible by anybody from all over the world, you need to have a web hosting account and a domain name. Your web host will tell you the location of your account and you’ll need to upload the document there using a file transfer protocol (FTP) client.

03a get add on

There are many good FTP clients available, but why would you use an external client if you can add one to BlueGriffon? You can find the “FireFTP” extension on the “Add-ons” page on the BlueGriffon site.

03c download add on

After downloading the extension, you can install it by going to “Tools – Add-ons” menu, and…

03d add on menu

Click the “Install Add-on From File” sub menu under the “Extensions” section of the “Add-ons Manager“.

03e install extension

After restarting the application, you can find FireFTP available under the “Tools” menu.

03h installed FTP

After logging into your hosting account, you can transfer files from your local folder to a remote folder (and vice versa).

wysiwyg html editor

You can add other extensions to BlueGriffon using the same method. At present, there aren’t many extensions available, but I’m sure the choices will grow over time.

At version 1.0, the software is still far from challenging veteran commercial web builders like DreamWeaver. But as the only up to date free option available today, BlueGriffon has the potential to grow fast and catch up to the big boys.

Have you tried BlueGriffon? What do you think about the application? Do you think that we still need desktop web builders? Share your opinions using the comments below.

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Windows Hacks & Customization
Windows Hacks & Customization
97 Members
Windows_10
Windows_10
87 Members
Windows Troubleshooting
Windows Troubleshooting
59 Members
Best Windows Software
Best Windows Software
59 Members
Master the Linux Command Line
Master the Linux Command Line
38 Members
Best Linux Apps
Best Linux Apps
35 Members
Linux for New Switchers
Linux for New Switchers
34 Members
Graphic Design
Graphic Design
31 Members
Linux Distros Talk
Linux Distros Talk
29 Members
Mac Troubleshooting
Mac Troubleshooting
21 Members
Ads by Google
Comments (18)
  • Ion-Christopher DiMeglio

    MORE: I’ll give you the upshot to this … a person like me has a time-critical workflow for which KompoZer fits as a production-ready vehicle. BlueGriffon will be a POSSIBLE substitute or 2nd step in the process … – or I may skip BG and use something else. Maybe not WYSIWYG for the adept code handling. But more and more having multiple tools is a fact of life.

    CASE IN POINT, the Blue Griffon website is largely done in XHTML 1.0 Strict. All the features in BlueGriffon for this, and some that AREN’T IN BLUEGRIFFON are in KompoZer. So, in spite of what Glassman says – WHO EATS THE DOGFOOD?

  • Ion-Christopher DiMeglio

    Hi there. I’m the dutch uncle in the crowd. And you had better listen to what I am telling you.

    For the kind of use we need – KompoZer is the answer. It is complete with all the bells and whistles – totally free – stable up to the last beta.

    MOST IMPORTANTLY DOZENS of really savvy high end tech experts use it – and there are at least 5 or so really good FREE VIDEO TUTORIAL SOURCES (and dozens of videos) SOME covering everything succinctly in like 20 minutes. You do not need any better education than this, in beginner HTML and CSS.

    Though KompoZer not up to the latest HTML 5 / CSS3. DOES NOT MATTER – it produces quality sites and maintains them without issues and with plenty of suave’. IT IS NOT OBSOLETE, and fits very well into the flexible workflow.

    BLUEGRIFFON is NOT FREE. There are no competent NONE tutes or documentation. If you want to buy the manual – PDF – it’s 7 EUROS ($10+) Fully equipped like KOMPOZER – it’s 91 EUROS. And frankly there are MORE IMPORTANT THINGS TO DO WITH THAT KIND OF MONEY for most people who are reading this.

  • DJA

    I’m a long-time use of Kompozer but that does seem to be dead-ended. I tried BG but kept getting blank screens when making content changes; the app seemed unstable. BG looks promising, but I’d rather have something old and stable vs. new and frustrating.

  • Weindeb

    I was really committed to Kompozer, finding it by and large user-friendly, etc., especially compared to the monster Adobe created when it bought out Dreameaver! Then I installed Mac Lion, which Kompozer, sadly, is not quite up to, although a number of its aspects do work with this newest Apple feline. I’ve now switched, or am trying to switch, to BlueGriffon, but, oh, how I wish there were some sort of user’s guide. As a truly amateur builder of some websites, I am finding that Blue Griffon does seem to have possibilities, but frankly much of how you accomplish this or that eludes me, even including something as embarrassingly simple as changing font size.

  • Merlefyshwick

    I’m just starting out, but if you go to ‘Set CSS Styles’ (the blue stealth bomber-shaped logo), you can change the font size there. Maybe this is not what you meant, but thought I’d mention it anyway!

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.