BlueGriffon: A Multi-Platform WYSIWYG HTML Editor

bluegriffon   BlueGriffon: A Multi Platform 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.

01a BlueGriffon main   BlueGriffon: A Multi Platform 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.

01a new wizard   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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.

01e wizard 4 background   BlueGriffon: A Multi Platform 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.

02a tools   BlueGriffon: A Multi Platform 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.

02b add audio 2   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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

04a wysiwyg   BlueGriffon: A Multi Platform WYSIWYG HTML 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   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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.

05a save   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

Choose the name that you want for the webpage and…

05b page title   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

Save it in the location that you want.

05c location   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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

03d add on menu   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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

03e install extension   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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

03h installed FTP   BlueGriffon: A Multi Platform WYSIWYG HTML Editor

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

03i FireFTP 2   BlueGriffon: A Multi Platform 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.

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

16 Comments -

Richard

“But as the only up to date free option available today, BlueGriffon has the potential…”

The only up to date FREE option??? What about Komposer?

Alakazarm Megopian

Kompozer is hardly up-to-date. The last release is now almost a year and a half old, based on an old version of Gecko/Xulrunner, does not offer UI for HTML5 or CSS3, does not offer support for prefixed CSS properties other than -moz-*, etc.

Cell Travis

I used to use desktop web development software like Dreamweaver around 7-8 years ago. Since then, I’ve moved on to CMS-based systems like WordPress and Joomla simply because they are flexible and powerful. Personally, I don’t see much use for a ‘static’ desktop web builder specially when you’ve got such feature-rich (and easy-to-use) online environments like Weebly, Blogger, tumblr and Yola. Any of these can help a beginner set up a basic website without the fuss with HTML or CSS.

ms-studio

CellTravis: it’s true that within the dynamic CMS dominated web, a HTML editor is not that useful as it used to be. But still, I find it important for the FLOSS eco-system that such an editor exists and gets maintained.

From my perspective, I see two perfect use cases for BlueGriffon:
* Education: it’s great to have a free editor to teach design students the basics of HTML/CSS, without tying them into proprietary software from the beginning.
* Designing HTML newsletter templates, which mostly require the oldschool table-based approach.

Anonymous

Or to create a simple personal landing page like Flavors.me or About.me where over complex environment would be overkill.

Daniel Glazman

Thanks for the kind words, really appreciated!
Just one minor correction, BlueGriffon is not “at version 1.0″. Version 1.1.1 was released the 10th of june and 1.2 is pending.

Daniel Glazman, BlueGriffon’s author

Tina

Thanks for the correction, Daniel!

Anonymous

Hi Daniel,

I’ve just checked the version installed in my machine and it’s 1.1.1. Thanks for the correction. Looking forward for the update.

BTW, one of our readers, Scott, asked about changing the font size on his comment below. Maybe you could provide better solution.

OHLover

I’m not all that experienced with web editors but I have used a few, including some on-line versions in the past. I recently took over maintenance on a website for the Otterhound Club of America site hosted by the AKC. the site has been up for a long time and was completely HAND CODED in HTML by the original author. It’s pretty basic with no bells and whistles as one would expect.  It does the job nicely though.

When I took over these maintenance duties, I went looking for a new editor. I had Kompozer but was not happy with it. Too clunky for me. I discovered BlueGriffon and have been very happy with it so far after minimal use.

The next step for me is to attempt to build a site from scratch for one of my businesses. That should be an interesting and educational process. Hopefully, BlueGriffon will make it easier.

Tina

Thanks a lot for sharing your experience! Please do let us know how you manage with BlueGriffon.

OHLover

Hi Tina,
The site building is on my “task list” but not a high priority atm.  I currently have three published sites up for my businesses but really only have ftp access to my main hosting site. The  other two are hosted by others. One is Jumla based and I can do some fairly extensive editing on-line but there are limits and no ftp.
The other is a Microsoft OfficeLive site hosted by M$ and is pretty stock template based. Not much to do there but it works for my purposes and pulls traffic.

Scott.

I’ve used Komposer on & off for years, so I decided to give this one a shot. So far, the only complaint I have is that I can’t figure out how to change font sizes of lines of text. I see the ‘zoom’ function, but that’s not what I mean – I’m looking to enlarge one line of text, for example. I checked their Google Groups pages, but found no answer.

Other than that, so far it’s pretty good.

Anonymous

Hi Scott,

You mean like the one in word processor? I couldn’t figure out how to do that either. The best trick that I could suggest is to make use the “H” tag, but that is not really the solution.

Since we have the software author here, I took the liberty to ask him directly. Hopefully he has the answer (or can add the feature in the future release).

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!

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.

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.