Flux 2: Feature Packed, Visual Web Design

A wide array of different web design software is available for the Mac, offering a range of choice when deciding which app to use for designing, coding and publishing. A market seems to be gradually expanding for software which can “do it all”, integrating your web design workflow from start to finish.

Today I’ll be taking a look at Flux 2, an all-in-one web design app which handles CSS, WYSIWYG, coding, debugging, publishing, and even basic image editing! The review will outline the main features available, along with drawing comparisons to other applications such as Coda, Espresso, and RapidWeaver.

Launching a Project

When opening Flux, you are asked to create a new project or open an existing one. I opted to get started quickly by using one of the in-built templates. These vary in design quality, but offer a simple way to get started quickly on a sample design.

Launching a Project

Launching a Project

If you’d prefer not to be asked for a project upon startup, you can uncheck the box at the bottom of the window.

The Site Manager

After opening a project, you’re presented with the site manager. This window shows all the pages, images and files associated with the particular site in question. I’m not a huge fan of the way in which files are displayed, as I can imagine the interface becoming very cluttered with a complex site structure.

Site Manager

Site Manager

One interesting feature in this section is the ability to quickly add a “Package” to the site. These include various JavaScript libraries (moo.fx, jQuery, Prototype), gallery systems (Gallery, HoverBox, LightBox), or even Flotr, a plotting library. This is an excellent time-saver.

After clicking an image file, you can select “Effects” in the toolbar to access the basic image editing tools in Flux. This allows you to quickly add a border or shadow, resize an image, alter opacity, rotate, or apply any of the 30 filters available. It certainly won’t replace your graphics application, but offers a useful tool for quick alterations.

The Page Editor

Double clicking a file will take you into the page editor, a full-featured visual editing tool. At first, the fairly complicated display may seem somewhat intimidating – a number of different editing functions are packed into the page. After experimenting with the software for a while, however, all will become clear:

Page Editor

Page Editor

The page is broadly separated into two columns. The left toggles between a CSS editor or a tool for drilling down into the page source code. The right offers a visual editing space, and can toggle between adjusting the layout or altering text. Clicking “Code” in the toolbar allows you to edit source code directly.

Also worth noting are the “Page” and “Layout” options in the toolbar. The former provides a decent interface for managing the head elements in a page such as meta tags, the title, and links to external files. The latter allows you to select a particular type of layout for this particular page (2 column, 3 column etc) and manage which CSS files are referenced.

Page Elements

The second toolbar contains a number of “page elements”. These provide a quick, visual way to add pre-defined elements to a page such as forms, tables, headings, and images:

Page Elements

Page Elements

Element Inspector

Once added, selecting a particular element (or CSS style from the left) and clicking “Inspector” will launch a window allowing you to customize every aspect of that particular section:

Inspector

Inspector

This is a comprehensive tool, and covers everything from adding borders and padding through to more advanced CSS properties. Certain visual properties (such as opacity) are only supported in CSS3, and Flux reminds you through a small badge detailing which version of CSS is needed for each setting.

Editing Modes

Three different editing modes are available:

Editing Modes

Editing Modes

  • Edit: Used for altering the layout or content of a page
  • Preview: Offers an in-app browser (Safari)
  • Live Preview: This will upload the site, and show it in a final location

Whilst the preferences pane for Flux asks for other browsers you’d like the ability to preview in (I added Firefox and Camino), I couldn’t find a way to actually do so. Previewing in different browsers would seem to be hidden away deep within the application somewhere!

Debugging

When viewing a site in the ‘Preview’ mode, you’re able to Debug the page through Flux’s in-built tool (this is actually just the Safari web inspector).

Debugging

Debugging

Having this functionality integrated into Flux is certainly useful, but it is also freely available when viewing a site in Safari through the Develop > Show Web Inspector menu item.

Publishing

When your new (beautiful) site is complete, you’ll need a way to publish it to the Internet. Flux makes this fairly simple, through a “Publish Site” icon in the site manager toolbar. By default, two options are available:

  1. Mobile Me – Uploading to your Mobile Me webspace
  2. Home Site – This will publish to the in-built web server in OS X (~/Sites)

You can also enter additional FTP servers as “Bookmarks”, specifying a remote folder to be used. It’s up to you to select which files to upload, though Flux can automatically select those which have changed since the last upload (this isn’t done for you as with Coda or Espresso).

Conclusion

Flux is certainly an interesting competitor in the web design application market. Priced at £40 (around $65), it comes in marginally cheaper than other major development software whilst at the same time offering a greater set of features.

The main area of concern I have is that the software simply isn’t all that easy to use. It seems to fall directly in-between Coda and RapidWeaver as it offers a simple WYSIWYG interface, but also seems to require a reasonable knowledge of the back-end code behind a website. A slight learning curve certainly exists, and you may find various features a little fiddly.

That said, I wouldn’t question that $65 is a fantastic price for the functionality packed into Flux. It may be a little rough around the edges, but the features available make it a worthy competitor in the marketplace. I would certainly recommend giving the trial a try, and discovering the application for yourself.

I’m also pleased to announce that we will be giving away 5 copies of Flux tomorrow – don’t forget to check back and find out how you can win!


  • http://johnathan-barrett.me.uk Johnathan Barrett

    Looks very nice. Downloading the beta now, don’t think it will replace Coda any time soon though.

  • http://www.macstories.net/ MacStories

    Just announcing MacStories Flux contest winners. And discount code as well!

  • http://www.htootayzar.com Htoo Tay Zar

    Well, Nice Interface, I’ll give it a try…

  • Evan Riley

    The app looks great, maybe helpful, may not. Although I don’t think it will replace my love of Coda or TextMate (With ExpanDrive) or even Espresso for that reason (Hardly use it though).

    • http://www.webkarnage.net WebKarnage

      Interesting, I find Flux has a much better Preview than Espresso. Espresso fails to preview properly in many instances where Flux is fine. I bought Flux already owning Espresso due to my frustrations with it!

      • Evan Riley

        Espresso previews finely for me. But as for my recent post, I may take back what I said about not replacing many previous applications, Flux seems to have such a great simple interface that is also very powerful

  • http://www.webkarnage.net WebKarnage

    The developers for this are very responsive people, and are working hard. There are some things when building from scratch (creating navigation for example) that take a bit more work than you feel they should, but editing sites I find very enjoyable.

    Documentation is just underway (initial features having been decided upon), and plugins are appearing (Gallery, Blog) that will help mature this product with time into something quite exceptional even if it’s not quite that yet.

  • http://www.simpleleap.com/cram/mac.htm PatrickC

    It looks nice. I’ll download and give it a try. I’ve been using Espresso mainly, but we’ll see.

  • http://pressgrid.com/ PressGrid

    Looks interesting … Gonna try the beta and see if it meets coda standards

  • Pingback: The Mega-Giveaway: Forklift & Flux « AppStorm

  • http://alexcoomans.com Alex Coomand

    In the last paragraph of the Publishing section, I use Coda on a daily basis and it allows me to only upload the changed files….

  • Pingback: The Mac Sale Launches – Mac.AppStorm

  • Pingback: Design City » Blog Archive » The Mac Sale Launches

  • Janice

    Espresso here for the most part but, I agree it looks like they are putting a lot of work into it. I will give it the benefit of the doubt and install it and try it out too probably.

    Janice Simmons
    moisture meter

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow