This Week's Sponsor:

Winterfest 2024

The Festival of Artisanal Software


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“Flux 2 has the power to be your only web design tool”

mainsplash

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!

Access Extra Content and Perks

Founded in 2015, Club MacStories has delivered exclusive content every week for nearly a decade.

What started with weekly and monthly email newsletters has blossomed into a family of memberships designed every MacStories fan.

Learn more here and from our Club FAQs.

Club MacStories: Weekly and monthly newsletters via email and the web that are brimming with apps, tips, automation workflows, longform writing, early access to the MacStories Unwind podcast, periodic giveaways, and more;

Club MacStories+: Everything that Club MacStories offers, plus an active Discord community, advanced search and custom RSS features for exploring the Club’s entire back catalog, bonus columns, and dozens of app discounts;

Club Premier: All of the above and AppStories+, an extended version of our flagship podcast that’s delivered early, ad-free, and in high-bitrate audio.