Review: Flux 4 web design platform

The ultimate web design editor is the one that not yet exists. Flux 4 is a good attempt, but to be honest so is Espresso 2 or Coda. Flux 4 has one advantage over the others, though: you don’t have to know much about code to work with it and create a decent looking web site.

Flux is a web design platform; it’s not just a template based design app like RapidWeaver or Sandvox, but it resembles Dreamweaver more. But where Dreamweaver is difficult to master, Flux 4 is more intuitive, faster to learn, and at least just as powerful.

Flux 4′s new features are:

  • An embedded Inspector
  • FreeCode, which allows you to code the way you want, but still allows you to make changes visually
  • A completely rewritten FTP and SFTP engine
  • Graphical CSS gradient editor
  • Full support for MAP and AREA tags
  • AutoComplete

Flux 4 AutoComplete is the best auto completion feature in any web design app.

FreeCode is the single most important feature of this release according to The Escapers, but I disagree. I think FreeCode is the most important feature for developers, but if you’re a beginning web site designer, or an “amateur”, you’ll like the CSS gradient, image map, and AutoComplete features better.

IT Enquirer rating

9.5/10
URL: flux.com

Pros
  • autocomplete
  • CSS 3 gradients
  • image maps
  • FTP mirroring
Cons
  • none so far
Price (approx.): €112.00

In fact, AutoComplete is my personal favourite new feature in Flux 4, and publishing is second. In version 4, the old publishing system has been replaced with a brand new system, based on a ‘mirroring’ model. With the new system, you can mirror to an FTP or SFTP site. It still isn’t the equal of editing files right there, on the server, via FTP, but it’s perhaps better as it safer — the accidental removal of files doesn’t have to be a disaster.

AutoComplete is my personal favourite. It’s old technology — BBEdit has it for ten or so years and Coda and Espresso excel at it. But Flux 4 excels at it even better; something I didn’t imagine would be possible. In every other application, autocomplete means the app has a built-in dictionary of attributes that are listed whenever it’s relevant. For example, when I type “‹p ” in Espresso 2, it will pop up a list where “class” and “div” are possible options for me to select.

When I have selected “class”, for example, even when a Cascading StyleSheet (CSS) already exists, Espresso 2 and its colleagues stay mute. There is no list of existing class definitions in my CSS that will magically pop up to help me quickly find the right one. There is in Flux 4.

Flux 4 will even list the available images to choose from when I type “‹img src=” and that’s unseen. There’s a infinitely small delay while Flux 4 grabs together all possible list items that are context-relevant, but it saves me the trouble of a trip to the image folder or CSS file in order to find the right one.

FreeCode

“When you need absolute control over your HTML and CSS code, use FreeCode. Previous to FreeCode, Flux would generate your code for you, and not allow 100% flexibility.” That’s what The Escapers have to say about this new feature. With FreeCode, Flux still generates code for you, but will only make the changes you request, and even if your code is invalid, Flux will not change it.

That is good news for experienced coders. FreeCode is a deliberate choice, made from the Edit menu. Even with FreeCode activated, you’re still not entirely on your own. It’s not like Coda or Espresso, where you must write code or nothing happens.

Even with FreeCode, the WYSIWYG capability still exists, so if you drag an object to a new location, or stretch out its padding, Flux will still change the code for you, but only that element, the rest of your code will remain unchanged, even if that means the design will be broken or bad things will happen to your page.

The same applies to CSS — if you make a change on the page or using the Inspector, the CSS will be changed, but only that section.

FreeCode has its limitations, though. WYSIWYYG text editing is not supported in FreeCode because an on-screen stylistic representation cannot adequately show the hierarchical structure of a web page.

If you switch a normal page to FreeCode mode, the page appears to stay the same, but the file metadata is now tagged as being a FreeCode page. Any future changes made to the page will be done using FreeCode.

If you switch a FreeCode page (back) to non-FreeCode, destructive changes could be made, and your code formatting will almost certainly change. Any code that Flux doesn’t understand could be lost.

FreeCode is in my opinion, the best of both worlds. It gives you the chance to work in “lazy mode” as well as in “charged mode”, when you feel like it. However, if you write code that is invalid, broken or corrupt, Flux won’t find the section of code that it needs to change and nothing will happen.

FreeCode can also make changes to external CSS, just like it can with HTML. However, all HTML pages that use the CSS file must all use FreeCode. If they don’t and you edit a non-FreeCode page, destructive changes could be made to the CSS file.

The bottom line is that you better not use FreeCode unless you know what you’re doing.

Image Maps and gradients

Image maps have existed since the early days of HTML. They’ve become popular again after having been more or less forgotten for some time. They were out of fashion when CSS allowed us to manipulate the “looks” of almost any element on a page. Recently, image maps have gained in respect again, because it’s an easy to make your page slimmer while still offering irregularly shaped link areas.

Image maps made easy...

Flux 4 supports image maps in a big way. There’s a specific order of doing things, but if you respect that order, I can’t see who creating an image map could be easier. The actual areas are created as if you would be working with Adobe Illustrator CS4 and higher. In fact, you can even create polygons that you let follow the shapes of glyphs so that only every letter of a word is clickable — just an example that I saw in the Help file.

CSS gradients are a CSS3 attribute, and Flux 4 caters for them, but not as a separate attribute, as I first thought. It’s also not available under the “background-color” attribute, but under the “background-image” attribute. Mildly confusing in my opinion, but the most important is that again it works much like in Illustrator CS4 and higher.

Flux 4 lets you even save background gradients as images, so perhaps the listing under the attribute “background-image” isn’t strange at all. You can save your gradients to a library too.

CSS 3 gradients support in Flux 4

There are more improvements and new features in Flux 4 that I haven’t mentioned. For example, there is a broader support for Coda plug-ins. One of those makes Flux 4 a much better environment for designing WordPress themes. There’s support for Google Webfonts, for image editing right in Flux 4 itself, etc.

Flux 4 does require a bit of getting used to in the beginning, but it’s worth reading the Help file and trying out the app; I’m very sure most of you are going to love it.

Comments

  1. Erik Vlietinck says

    I was referring to Coda PHP & Web Toolkit. That one makes for a better environment to create WP sites in my opinion. There’s also the WordPress mode plug-in, but I can’t say if that one is compatible. Some are, some aren’t.

    (I never said there are specific plug-ins for WP themes.)

  2. says

    Nice write-up, Erik. I’ve been a web developer for nearly 20 years, and while I still prefer hand-coding with anything made by Bare Bones Software, Flux 4 is a really great product.

    I tried all the available WYSIWYG editors for Mac, and like you said, a couple of them were nice, but have to be tossed out as they’re not really editors…they’re template site builders. I was actually using Kompozer until I tried/bought Flux 4, and I tried Dreamweaver CS6 which seems to me would take the next two months to learn (and I’m a pretty quick study).

    Flux 4 also has a nice code cleaner that, unlike the ones in a couple of other well known editors, actually works! I may be getting lazy, but Flux 4 just allows me to hand code, then immediately see what I’ve done, correct mistakes, or highlight a page element and instantly see it in the editor (that alone is a huge time-saver).

    I certainly recommend it for intermediate and advanced developers…it’s a great app and the two brothers who developed it at TheEscapers.com are real people…they don’t hide behind a corporate curtain. They answer email, and they’re quick to do so…something else the others don’t do. I had a question about Coda 2 when I was evaluating it and sent them an email. That was several days ago and I’m still waiting for a reply. Coda 2 just went into the AppCleaner bucket! If you’re not going to support an app…then why bother even developing it.

Trackbacks