10 September 2004

Nvu CaScades UI review

I have had a hard time learning how to use Nvu's CSS editor. While I was learning myself, I did write down a few points to remember and over time it has developed into a decent tutorial/manual(although now that I read it again, I think it needs a redo for better flow and structure). It can be found here.

Also, there have been others like me who struggled to find ways to use its functions. Below is a simple review of CaScadeS's UI from a beginner's point of view:

Nvu CSS editor, CaScadeS, is a very easy way to style your webpages. It is capable of using inline style rules, internal style sheets or even external style sheets. You can easily have alternate (multiple) style sheets attached with your webpage when using it. And the final style sheet code produced by the CSS editor is standards compliant.

However, for the new users the CSS editor is something they have to "learn" to use rather than being an "intuitive" interface. Here are a few suggestions on how to improve it:

  1. Saving of the style sheet should be made more obvious. As of now, style sheets can be saved by first creating/editing rules in the editor, closing it and then clicking the "Save" button in Nvu. Untill unless someone tells the new user that he has to follow this procedure to save the style sheet, I don't think he would beable to "discover" it himself.
  2. Buttons like "Link elt." and "Style elt." need to renamed to something more obvious. As Nvu is aimed at a general user and not at web designers, the button's function should be such that it "speaks out" its own function. Even having tooltips for these buttons would be really helpful.
  3. I have read somewhere that the "Down" button is still pending implementation. I wonder how hard it would be to implement it when the "Up" button is already working (though the opposite way!).
  4. The CSS editor window design has some serious bugs. For example, if there is an image linked by a rule and the corresponding image's path is too long, users loose the visibility of "Close" button.
  5. Automatic focus on default style sheet. When one opens the CSS editor, no style sheet is selected and the user just gets a blank right-pane. A style sheet should be automatically selected (may be the default one). This way the right pane won't look plain blank but show basic info about the selected style sheet.
And for those who know the web designing well, it would be really helpful to include a feature to add comments in the style sheets. Every web designer knows that when a style sheet becomes larger, comments are the only tool to make logical sections in the style sheet.

I hope the Nvu developement team considers the suggestions given above and implement atleast some of them to make the css editor a better tool accompanying Nvu.


pixtur said...

Some very good suggestions. Some are already discussed at http://http://forum.nvudev.org/viewtopic.php?t=392

Some more can be found here:

I dream about a working css-editor that will visualice all my changes in realtime. Actually most of the work already has been done. (Waiting for next release of nvu...)


Anonymous said...

Are in development an CSS Editor that previews automaticaly in MSIE or Mozilla. Their name is CSS Spy. Could be available in