This Week's Sponsor:

Kolide

Ensures that if a device isn’t secure it can’t access your apps.  It’s Device Trust for Okta.


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!

Unlock More with Club MacStories

Founded in 2015, Club MacStories has delivered exclusive content every week for over six years.

In that time, members have enjoyed nearly 400 weekly and monthly newsletters packed with more of your favorite MacStories writing as well as Club-only podcasts, eBooks, discounts on apps, icons, and services. Join today, and you’ll get everything new that we publish every week, plus access to our entire archive of back issues and downloadable perks.

The Club expanded in 2021 with Club MacStories+ and Club Premier. Club MacStories+ members enjoy even more exclusive stories, a vibrant Discord community, a rotating roster of app discounts, and more. And, with Club Premier, you get everything we offer at every Club level plus an extended, ad-free version of our podcast AppStories that is delivered early each week in high-bitrate audio.

Choose the Club plan that’s right for you:

  • Club MacStories: Weekly and monthly newsletters via email and the web that are brimming with app collections, tips, automation workflows, longform writing, a Club-only podcast, periodic giveaways, and more;
  • Club MacStories+: Everything that Club MacStories offers, plus exclusive content like Federico’s Automation Academy and John’s Macintosh Desktop Experience, a powerful web app for searching and exploring over 6 years of content and creating custom RSS feeds of Club content, an active Discord community, and a rotating collection of discounts, and more;
  • Club Premier: Everything in from our other plans and AppStories+, an extended version of our flagship podcast that’s delivered early, ad-free, and in high-bitrate audio.