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.
- 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