Skip to Content
Skip to Table of Contents

← Previous Article Next Article →

ATPM 12.10
October 2006

Columns

Segments

How To

Extras

Reviews

Download ATPM 12.10

Choose a format:

Web Accessibility

by Miraz Jordan, http://mactips.info

Nvu: Impressive and Powerful

Unlike serious Web designers who probably hand-code Web pages or use professional software such as Dreamweaver, most folks are likely to look at software such as Apple’s iWeb, Sandvox, RapidWeaver—or, the subject of this article, Nvu.

Web pages are all about communication, but it’s easy to forget that some visitors may be using screen readers, Braille devices, head switches, or other less common hardware and software to interact with the pages we produce. It’s important that software we use creates good-quality coding that makes our pages accessible for all visitors. The articles in this series look at how some common programs perform in that respect.

This month I look at Nvu (1.0). I set out, as usual, to create a perfectly ordinary one-page document with a little text, some headings, a list, a couple of links, and a photo. This represents a “typical” page that anyone might create.

Nvu

Nvu is open source and covered under the MPL/LGPL/GPL tri-license. On the Mac, OS X 10.1.5 or later is required, but Nvu is available for many platforms, including Linux and Windows.

The Process

I started up Nvu and pasted some prepared text into the Normal tab. Buttons and pop-ups on the default toolbar resembled what you might see in a word processor, including tooltips to help you choose what you needed. It was very easy to apply headings, a list, links, and some emphasis.

To add a photo I clicked the Image icon on the toolbar and chose the photo from my hard drive. By default the Alternate Text radio button was selected, and when I tried to click OK without supplying alternate text, a helpful alert appeared.

nvu-1

I try to exit without entering alternate text.

nvu-2

Nvu’s alert explains the what and why of alternate text.

After dismissing the alert, I was returned to the image selection window where I either had to enter alternate text or deliberately choose “Don’t use alternate text” before I could proceed.

When I saved the page, Nvu asked me for a page title. I also found Page Title and Properties under the Format menu and was later able to edit the title there.

The Results

The results were impressive. When I looked at the Source view to check the coding that had been created, I could see that headings, lists, <strong>, and <em> tags had all been correctly applied. The coding was clean, without any excess.

I attempted to apply a specific font to a few words and Nvu sensibly applied a <span> with an inline style. When I chose the Bold and Italics buttons on the toolbar for formatting text, it applied an inline style, rather than the old-fashioned <b> or <i> tags.

My page was created using an HTML 4 Transitional doctype, and with an ISO-8859-1 character set. Personally, I prefer XHTML and UTF-8, but a visit to the Format ‣ Page Title and the Properties menu allowed me to choose UTF-8 from a list of character sets.

If I had visited the Preferences before starting work I could have specified XHTML and UTF-8 as defaults.

Paragraphs or Breaks?

As with RapidWeaver, I was disappointed to find that my pasted text had been automatically marked up, not as paragraphs with <p> tags, but with line breaks. It would be a sensible default for Nvu to assume that pasted text is paragraphs and to mark it up with <p> tags. See last month’s article on RapidWeaver for an explanation of the difference between a break and a paragraph.

I found that if I pasted text into a new window, selected all, and applied a paragraph style, then Nvu wrapped paragraphs fairly sensibly in <p> tags, although it also included break tags where I’d pressed Return twice between paragraphs. It was fairly easy to use the Find and Replace All commands to get rid of them.

If typing text in from scratch, it seems to work to select a style such as Heading or Paragraph from the pop-up before typing. Set the behavior of the Return key to create a new paragraph when the Return key is pressed and Nvu then uses paragraph tags correctly, instead of break tags.

The Interface

Nvu is quite impressive. It offers four “views” of your page: Normal, HTML Tags, Source, and Preview.

Normal is a plain view, where you see only your text and images. Preview shows how your page will look in a browser. These two views seemed to show me the same thing, perhaps because my page was so simple.

HTML Tags displays small yellow boxes beside every element, showing what HTML tags have been applied to it, such as <h2>, <span>, or <img>, while Source gives you access to the full HTML source code.

Whichever view I was in, I was able to edit my page, although some menu items, such as Format ‣ Page Title and Properties, were not available from the source view.

Validator Tool

Using correct, valid HTML code and CSS stylesheets goes a long way towards creating accessible pages. It’s always a good idea to validate your pages and fix any errors to help ensure your Web site will render correctly in the browser.

Nvu includes a Validate HTML item in the Tools menu. Save your page and choose Validate HTML from the Tools menu. Nvu contacts the W3C validation service, provides your page for checking, and reports the results in an Nvu window. All the break tags created by default caused failures in my test page.

You can then fix the problems and validate again, until you see the “Valid HTML” response.

My Conclusions

Nvu doesn’t give you all the “themes”—the fancy visual layouts—that some other products do, so you’ll have to obtain templates or design your own look and feel for your Web pages. Most sites deliver information through text; the visual design can be added in later using stylesheets such as those available free with the Style Master CSS editor software.

In spite of the <br> versus <p> issue, Nvu is a clear winner. It gives the user real control over using appropriate markup, such as lists and headings. It defaults to requiring alternate text for images. It makes it easy for the user to validate her page and gives full and easy access within all views: Normal, Source, Preview, and the useful HTML Tags view.

It uses familiar toolbar buttons and pop-ups similar to those you find in Microsoft Word or other word processors, and applies appropriate coding when you use them. Most controls are simple, but it’s common to see an Advanced… button giving easy access to Nvu’s more sophisticated features.

After trying out several other applications whose focus was all on appearance and damn the coding, I was ready for a disaster when I opened Nvu. Instead, I’m impressed.

What’s more, Nvu is useful for both ordinary folks wanting to make simple Web pages, and, I’d venture to say, for HTML professionals. I haven’t given it a full workout with a complex site—in fact, my testing was limited to a single page with one image and a few headings, but it is worth a serious look for the Web professional.

Useful Links

  • Stylemaster software for creating cascading style sheets.
  • WebXACT automated accessibility checker.

Related Articles

appleCopyright © 2006 Miraz Jordan, http://mactips.info. Miraz lives in Wellington, New Zealand. Her book, WordPress 2: Visual Quickstart Guide, has just been published.

Also in This Series

Reader Comments (10)

michael mckee · October 2, 2006 - 01:03 EST #1
Nvu is a nice program for the person wanting a simple site. Coding is adequate but not great. I used it for a couple of years as the teaching tool for my web design students. It served that purpose well.

However, you shouldn't venture to say this program is useful for pros. The lack of templating ability alone rules it out. Its awkward CSS tools are not only limited but not terribly stable. I'll stop there but could go on for paragraphs.

For the webmaster wanting to maintain a small personal or organization site it's my first recommendation. The price is terrific. However, the difference between Nvu an Dreamweaver is as great as the difference between a WalMart 1/4 inch electric drill and a 1/2 inch model for contractor use. Each is appropriate for its intended audience but unsuited for the other.
Miraz Jordan · October 2, 2006 - 01:54 EST #2
Thanks for the additional perspective, Michael. That's useful to know.
David Zatz · October 3, 2006 - 10:09 EST #3
I tried this program but was very disappointed in it after a while. The main problem is that once it hit version1.0, and I believe that was over a year ago - maybe longer - development completely stopped. I can live with small bugs - and there are more and more of them the further you go - and I can live with interface quirks to a point, but not if there's no hope of seeing them fixed. I also found that frequently used features or options tended to be several clicks away, while rarely used options were presented front and center; and nVu when used regularly proved to be far buggier than I expected.

When it came right down to it, it was worth paying the larcenous and excessive price of Dreamweaver. I am glad nVu is there, but I sure wish someone would pick up development. The sponsor, Linspire, seems to have just wanted to fill in a check-box on their feature comparison chart.
Miraz Jordan · October 3, 2006 - 15:35 EST #4
That's disappointing indeed. Out of the various programs I've looked at so far, this one certainly seemed to have the most promise.

I used it only for a short time, to make a single page so didn't notice the quirks you mention.
David Zatz · October 3, 2006 - 15:46 EST #5
I am equally disappointed and for the same reasons; especially since I used to use Netscape Composer. I appreciate your understanding.

I don't see why making a web design program is so hard - one would think it would be easier than making a word processor since the number of things it has to do is really smaller... especially with Webkit.
Tony Sturges · October 9, 2006 - 18:20 EST #6
one odd problem I found with Nvu on the Mac 10.4.7 is that if you close the page (with the red upper-left button) but do not kill the program from the main "title" name in the bar at the top, the program essentially hangs. There's no point in closing merely that page; you actually are better off closing the entire program. And then it does not remember your last file that it opened. It does work decently but is has lots of simple problems.
John Rachmat · July 23, 2007 - 04:43 EST #7
I presume with the passage of time, Nvu becomes even more obsolote.

So the question is, what open source programme shall we use (for WYSIWYG HTML Editing) .. ? Dreamweaver is a fantastic program but its price tag is the very reason why we are searching for an alternative.

Do people have comments about SeaMonkey Composer or Page Breeze ... ?
David Zatz · July 23, 2007 - 09:23 EST #8
I have to say, Nvu doesn't seem to have been maintained or updated AT ALL in the two years since its release; I think it was just Linspire's way of filling out a feature checklist. SeaMonkey Composer is probably a better bet.

PageBreeze is NOT available for the Mac. If it's open source perhaps someone could port it. However, I don't think it is open source.

It sure is time for a company or group to come out with something that has 80% of the functionality of Dreamweaver - but one quarter the price. I still remember what Connectix did to SoftWindows ...
michael mckee · July 23, 2007 - 09:28 EST #9
It might be that if you are looking for an open source solution you would have more luck with a content management system or blog than with an WYSIWYG editor. Nvu and Seamonkey Composer can do the job, though with a lot more effort than Dreamweaver.

My favorite Mac Web creation program is RapidWeaver. It's not free but very reasonably priced, capable enough for small business sites, and doesn't have a steep learning curve. It isn't exactly WYSIWYG, acting more like a CMS than a layout program, but should do the job for most people who want to manage their own sites.
John Rachmat · July 23, 2007 - 23:33 EST #10
I definitely share David's puzzlement below:

"It sure is time for a company or group to come out with something that has 80% of the functionality of Dreamweaver - but one quarter the price. I still remember what Connectix did to SoftWindows ... "

Such clear logic .. why is it so hard to do?

RapidWeaver would be a non-starter, being not exactly WYSIWYG. I have read some commentaries some where that SeaMonkey Composer produces untidy codes which makes later updating very difficult.

Now I came across another editor,KompoZer, which is described as an Unofficial bugfix stopgap for Nvu. Here is an interesting review:

http://www.freesoftwaremagazine.com/blogs/kompozer_unofficial_bugfix_stopgap_for_nvu

I'd would most welcome any comments and suggestions.

Add A Comment





 E-mail me new comments on this article