This week's sponsor

Vectornator

Graphic Design for the iPad and iPhone – Reimagined!


Flux 2: Web Design Rebooted. Reviewed.

If you have a Mac and you're a web designer / blogger, it's very likely that you've heard of RapidWeaver: it's one of the most famous WYSIWYG editor around, it has a lot of features and a great support by RealMac Software. While many Mac users still use Apple's iWeb and just feel comfortable with it, RapidWeaver's slowly becoming popular, thanks to its simplicity and great UI.

Anyway, I would like to share my thoughts about Flux, a great alternative to RapidWeaver which I found in my "late night Mac apps discovering" sessions.

Here's my review.

mainsplash

mainsplash

"Flux 2 has the power to be your only web design tool"

Flux 2 aims to give you complete control over the look and feel of your websites.

The first thing you'll notice in Flux is its WYSIWYG editor: at first launch, you'll be asked to choose between and empty project, a "project based on Template" or an existing project. By choosing a template-based project you'll be able to browse a list of nice default themes: for instance, the moleskine boy one is of the coolest built in themes I've ever found so far.


step-1-splash-screen

step-1-splash-screen

step-2-choose-template

step-2-choose-template


Anyway, once you've picked up a Template (you can create custom Templates as well and then put them in /Application Support/Flux/Templates) you'll see Flux main window: the Site Manager.

Site Manager

Featuring a dark grey metal background, the Site Manager window shows your site root in a left sidebar called "Site" with all the HTML pages, images folders and stylesheets. Double clicking on a folder opens up a sub-window linked to the first one by a great looking "wave".

The main concept here is that you add "pages", either HTML, PHP (or anything you like) with every kind of DOCTYPE you want.

picture-37

picture-37

step-3-website-structure

step-3-website-structure

pages

pages

You can even apply some effects to your website images: just select one, click on "Effects" and a beatiful HUD window will open showing some cool options to customize your images. This features is still a little bit buggy sometimes (text alignment issues, maybe it's 10.5.7 problem), hope they will fix it with future updates (which come almost every 3 days, cool!)

effects-2

effects-2

The main difference between folders and files (css, html, images) is that while sub-folders will open in the same window, double clicking on a image will launch Preview.app, while CSS stylesheets will open an additional built-in editor. Last, double clicking on HTML pages will launch a full-featured Page Editor.

Page Editor

Flux 2 has a fantastic page editor, you can create new elements, tables, lists, images, movies, sounds and many other elements without the need of coding. If you want manual control, the built-in syntax highlighting code editor will update the page with every change you make.

The Page Editor is packed with features:

- Page: to edit <meta> tags and various attributes;

page

page

- Code: view the raw code;

code

code

- Layout: change the layout of the page

- Actions & Snippets

actions

actions

snippets

snippets

Here's the "Styles" view in Page Editor:

picture-43

picture-43

And this is the Navigator view:

picture-62

picture-62

Moreover, you can browse through CSS styles and HTML elements thanks to a left sidebar: double clicking on a style opens the Inspector (you can launch Inspector with a toolbar button too) while selecting an HTML element highlights it in the live preview.

inspector

inspector

Preview and Publishing

You can then switch the display mode from classic "Edit" to "Preview" and "Live Preview": Live Preview, for instance, will instantly publish your website on MobileMe or an FTP server to give a quick "real" glimpse of what you've done so far. You can manage as many FTP bookmarks as you wish in the application Preferences.

The publishing process is simple and fast, even more intuitive than the RapidWeaver one, in my opinion.

It supports SFTP as well.

publish

publish

After using Flux for a while I see how it is just perfect for creating and managing small websites with static content for personal info / small companies. If you want to get your hands dirty, you can achieve huge results, but you should have a basic knowledge of HTML and CSS.

Flux fills the gap between too simple, too advanced and unuseful software: a great app, either if you are a novice or a real "pro".

Flux is available at 40£ (65$) which is a great price, considering the amount of features it provides to the end user.

Go download!

Unlock MacStories Extras

Club MacStories offers exclusive access to extra MacStories content, delivered every week; it's also a way to support us directly.

Club MacStories will help you discover the best apps for your devices and get the most out of your iPhone, iPad, and Mac. Plus, it's made in Italy.

Starting at $5/month, with an annual option available. Join the Club.

A Club MacStories membership includes:

  • MacStories Weekly newsletter, delivered every week on Friday with app collections, tips, iOS workflows, and more;
  • Monthly Log newsletter, delivered once every month with behind-the-scenes stories, app notes, personal journals, and more;
  • Access to occasional giveaways, discounts, and free downloads.