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 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.
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.
I try to exit without entering alternate text.
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 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.
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.
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.
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.
- Stylemaster software for creating cascading style sheets.
- WebXACT automated accessibility checker.
- Web Accessibility: RapidWeaver: A Useful Tool in Need of Sharpening, ATPM 12.09, September 2006.
- Web Accessibility: Sandvox: Sand in the Eyes, ATPM 12.08, August 2006.
- Web Accessibility: The Clayton’s Web, ATPM 12.07, July 2006.
- Web Accessibility, ATPM 10.01, January 2004.
Also in This Series
- What Browsers Can Do, Part 2 · May 2007
- What Browsers Can Do · April 2007
- The Flip Side of the Coin · March 2007
- SeaMonkey 1.0.6 · December 2006
- PageSpinner 4.6.3: Quirky and Erratic · November 2006
- Nvu: Impressive and Powerful · October 2006
- RapidWeaver: A Useful Tool in Need of Sharpening · September 2006
- Sandvox: Sand in the Eyes · August 2006
- The Clayton’s Web · July 2006
- Complete Archive
Reader Comments (10)
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.
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.
I used it only for a short time, to make a single page so didn't notice the quirks you mention.
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.
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 ... ?
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 ...
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.
"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:
I'd would most welcome any comments and suggestions.
Add A Comment