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.
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.
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:
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.
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:
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:
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.
Three different editing modes are available:
- 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!
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).
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.
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:
- Mobile Me – Uploading to your Mobile Me webspace
- 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).
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!