Flux: A New look at WYSIWYG

FluxI am a big fan of the WYSIWYG (What You See Is What You Get) concept. Applications like RapidWeaver, and Sandvox make it easy to create a website with pre-designed templates, and edit them to your hearts content. Over the past few months I have been learing as much as I can about web development, to the point where these applications have begun to become limiting.

One application that is relatively new to the WYSIWYG scene is Flux, from The Escapers. This app aims to give you complete control over the look and feel of your websites, while not limiting you to only being able to adjust a few parameters of pre-installed themes.

Create

When you first open up Flux, you can either start a new website from scratch, or from one of the included templates. If you decide to go from scratch, Flux can automatically create an index.html file, and CSS file to get you started. Once that is done, you can add additional pages/CSS files to your hearts content.

Site Manager

Double clicking an HTML file will open up Flux's main window. This window is where the bulk of your web development will take place. Double clicking on a CSS file will greet you with the alert: “CSS files are created and modified by Flux, they should not be edited externally. If you still want to open the file, press ‘Open’, which in my eyes is a big downfall of Flux. There are some things that are easier to edit in say TextMate or CSSEdit, so it would be nice if there was a way to edit CSS files externally, and have the changes reflect in Flux. When asking the developer about this, I received this response:

Right now, you *could* edit CSS in other editors, but it’s really not something we recommend, basically because Flux supports CSS fairly well, but it does not support some of the more esoteric features, and also there is some CSS “shorthand” we don’t support yet, this means that someone could type in valid CSS which Flux might take a dislike to. Similarly, Flux supports new CSS features like@fontface rules, which other editors may not, and then they might end up messing up Flux’s valid CSS. It’s something we are thinking about and will probably try to support sometime in the future.

This might be something we see in the future of Flux’s development.

With external editing aside, lets move on to Flux's main window. The main window of Flux is organized into three panes. Your CSS styles are in the left pane, you build the website in the middle pane, and the right pane is where you will edit your CSS styles. There is also an option to have the pane where you edit your CSS display under the styles in the left pane.

Main Win

The first thing that I always do when creating a website is add the metadata. To do this in Flux, you can click on the “Page Attributes button in the toolbar at the top of the page. You can add in your page title, keywords description and author. The other tabs are where you can add custom code/attributes, javascript files, and CSS files. make sure before you start building your website that there is a CSS file in the CSS tab. If not, drag the one you created earlier into the pane from the site manager.

To begin building a website, you have to add an element. For this review, I'll begin by adding a div in the middle of the page, and call it “contentcontainer. To do this, click “New Element in the top left corner, and click “Div. You can resize the div to whatever you please by dragging its handles. To add a CSS style to this div, right-click and select “Create style with… or use the keyboard shortcut Control-Command-S. This will open a dialogue window that lets you name your style. Once you have created your style, you can begin to edit your div in the right-hand pane.

Selecting the div in the middle pane, or the style in the left pane, will open the CSS Editor. You can edit all things you would expect in the editor, like position, Size, Fonts, Decoration, Shadow, Padding etc., and you can add in your own attributes if you would like. Clicking a checkbox beside an attribute drops down its options. For example, if I select “Fonts I can choose the fonts that I want displayed in that div. This makes creating the CSS for your site easy, as most of the values for that attribute are right there in the editor.

Css Editor

One of the really neat feature of Flux is its built-in image effects. If you add an image right into the site manager, you can apply many different image effects, from adjusting the color, to adding scrapbook tape to it (like you see in the screenshot further below). The window is a little buggy, you have to resize the window in order to see all of the options for some effects, though I have notified the developers of this problem, and hopefully it will be fixed soon. If you add an image from the site manager to your site and then add effects to it, the changes are not reflected in the Edit view, but they are in the Preview view (which I will touch on in a second). Maybe we will see this in a future update.

Image Editro

Flux has 3 main views. The Edit view, which we have been working in the length of this review, the Preview view which lets you preview your webpage using WebKit, and Live Preview which allows you to publish your page to a server, to preview it online. When you are ready to publish your website to the world, you can publish it by clicking “Publish in the File menu, or upload the files in the folder Flux created in your documents folder to wherever you like.

Flux's abilities extend far beyond what I have demonstrated here thus far. It supports adding JavaScript actions, embedding PHP, Flash, Java and even support for Ruby on Rails. I am not going to talk about all that today, but I thought I should let you know that it is all there. Flux lets you design and build websites without having to conform to a pre-designed theme, or having to code everything by hand. If you want, you can still use Flux's built-in templates, which are very customizable.

Simple Site

Besides the few bugs I mentioned above, I have had quite a bit of trouble with the Undo/Redo in Flux. For example, I added an image into Flux and then deleted it. I then entered some text and deselected everything. Clicking Edit>Undo got rid of the image, but overlooked the fact that I had even just entered in some text. Just like with the other bugs, I have notified the devs of this abnormality, and it will hopefully be fixed in a future update.

Flux is $69 from The Escapers.

Comments

24 Responses to “Flux: A New look at WYSIWYG”

  1. Peter Craddock on June 3rd, 2008 9:51 am

    So does it support FTP?

    Sounds like a great app though.

  2. Dan on June 3rd, 2008 11:42 am

    I tried this app a few weeks ago and the problem I had with it is that they use the term WYSIWYG liberally at best. This is NOT a WYSIWYG editor, in my opinion. For a real WYSIWYG site management tool, look at NetObjects Fusion (unfortunately it is a Windows only app these days). That is an app where you can just drag and drop items around the screen easily and publish to a web site. That is what I would like to see on the Mac.

  3. Stretch on June 3rd, 2008 12:32 pm

    How easy would it be to create or edit a wordpress theme with this?

  4. Blake on June 3rd, 2008 12:33 pm

    I’m personally still going to stick with hand-coding in Notepad2 if I ever get back into web development. A WYSIWYG editor definitely helps at least to check things I’m not sure about, or figure out new tags I can do with menus but not my bare fingers, but I like the feeling to hand-coding something from scratch to work the way I want it to. Nice app though, I do like the image effects you mentioned.

  5. Terry on June 3rd, 2008 12:36 pm

    Freeway is a true WYSIWYG website building application. The page design process is very desktop publishing like. You can create “master” pages with content that is common to several pages. The list of features is too long to list here. Freeway comes in an Express and Pro version. Take a look at http://www.softpress.com/

  6. Anthony on June 4th, 2008 11:22 am

    I have tried to use this app twice. Both times, I found the interface unintuitive in the creation of a website. IMHO, I think that Panic’s Coda tool is much more robust. I will try to use it again in a few months and see if things are any better.

  7. Greg Healy on June 4th, 2008 4:28 pm

    @Anthony: You are correct in saying that Coda is much more robust, which is because Flux is aimed at a totally different userbase. Coda is more for if you are going to be hand-coding your sites, where as FLux is for those that want more “drag-and-drop” ease, and not have to know HTML or CSS.

    I use Coda for projects that require more continuous editing or when it is just easier to hand-code it, and have used Flux to get a site mockup out of Photoshop and onto the web.

  8. Max Goedjen on June 4th, 2008 8:00 pm

    @Anthony
    I love Coda, I’ve had a license from day one, but Greg is correct in saying that they are completely different apps. I could see this being useful for rapid prototyping, or for those who don’t know how to/don’t want to hand code site, but Coda, as it’s price tag indicates, is really aimed more at the professional market.

  9. does rapidweaver work with php on June 7th, 2008 3:01 am

    [...] it easy to create a website with pre-designed templates, and edit them to your hearts content. …http://macapper.com/2008/06/03/flux-a-new-look-at-wysiwyg/61 found on googlegoogle adwise electric google map union delet searches in google girls making out [...]

  10. Emperor on June 8th, 2008 1:03 am

    The Flux isn’t fully operational.

  11. Flux Giveaway | MacApper on June 9th, 2008 7:00 am

    [...] few weeks ago I reviewed Flux for MacApper. Flux is a website creation tool that is based on the WYSIWYG (What you see is what [...]

  12. Joe Workman on June 9th, 2008 9:50 am

    I have been waiting for an RoR editor forever!!!!!!!! Its downloading now!!!

  13. Daniel on June 11th, 2008 2:18 am

    Awesome! This is such helpful tool for beginner designers that are more visual, but is not fluent in hand coding css or html.

  14. RapidWeaver 4: Overhauled for Leopard | MacApper on June 29th, 2008 6:00 am

    [...] you may remember me saying at the beginning of my review of Flux, I am a big fan of the WYSIWYG concept (What You See Is What You Get). It was RapidWeaver that [...]

  15. Flux Giveaway Winners | MacApper on June 29th, 2008 7:00 am

    [...] few weeks ago I reviewed an application called Flux, which is a website creation tool using the WYSIWYG (What You See Is [...]

  16. RapidWeaver 4: Overhauled for Leopard | Numerous Ways Of Life on July 24th, 2008 9:31 pm

    [...] you may remember me saying at the beginning of my review of Flux, I am a big fan of the WYSIWYG concept (What You See Is What You Get). It was RapidWeaver that [...]

  17. pulp43 on May 12th, 2009 3:03 pm

    They had this on Maczot a week or so ago. The app is up to version 2 now, and I’m very impressed with it thus far.

  18. mikray on February 10th, 2011 4:47 pm

    Hi Guys, I just found a pretty nice site for iphone unlock / jailbreak/ iphone 3g 3gs and iphone4 jailbreak.

    http://www.anysim.net
    http://www.bmw-eba.de.tl

  19. seo for income on February 21st, 2012 8:25 am

    Hi ! They had this going proceeding Maczot a week otherwise hence ago. The app is up next roughly toward form 2 now, after along by the goal of I’m especially impressed with it along these position far.

  20. 20 year mortgage rates in nj on May 22nd, 2013 5:20 pm

    Wow! Finally I got a web site from where I can in fact get helpful data regarding my study and knowledge.

  21. wildstar gold on July 5th, 2013 10:50 am

    Wonderful beat ! I wish to apprentice at the same time as you amend your website, how can i subscribe for a blog web site? The account helped me a appropriate deal. I had been tiny bit familiar of this your broadcast provided vibrant transparent idea

  22. shock rock band on July 18th, 2013 11:07 pm

    Hi there! I’m at work browsing your blog from my new apple iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the superb work!

  23. premier jewelry games on August 13th, 2013 11:26 pm

    Hello there! This is kind of off topic but I need some help from an established blog.
    Is it very difficult to set up your own blog?
    I’m not very techincal but I can figure things out pretty fast. I’m thinking about
    setting up my own but I’m not sure where to start. Do you have any tips or suggestions? Thank you

    Feel free to surf to my website :: premier jewelry games

  24. Carolina Bost on September 17th, 2013 8:37 pm

    Practically all this discussion on Siri amazes me. How can anybody rightly refer to a fairly uncomplicated voice recognition software program as artificial intelligence?

Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!