Last month I wrote about iWeb, and how it gets in the way of creating a good website. Over the next few months I want to see if any of the other popular applications does a better job. I set out to create a simple one-page document with a little text, some headings, a list, a couple of links, and a photo. [First published August 2006. Some details may be a bit dated.]
In these articles I assume that the user of the software is creating a couple of fairly straightforward text-based web pages with a few images — appropriate for a ‘brochure’ site for a small business or a community group.
I also assume the user isn’t a professional web designer with deep knowledge of HTML, but I do assume they have a sufficient level understanding about web pages to choose suitable commands from menus or toolbars.
A good website has relevant content, written in plain language, with plenty of headings, useful page titles, clear navigation, alternate text for graphics, and meaningful text links. For maximum benefit the coding meets modern standards and is valid.
If every website were to incorporate these features, the web would be a much friendlier place for most people. These nine targets aren’t hard to hit, but it’s up to the software we use to make it possible, even easy, for us to hit them.
What software can do
The human author needs to select the content, organise the structure and write plainly, but it’s up to the software to make it easy to apply page titles and headings, to add useful alternate text, and to edit link text. The software should automatically apply appropriate coding and offer an easy way to check validity.
It would also be useful if the software were able to provide some on-demand assessments of the clarity of the language, the quality of the link and alternate text and the existence of headings. I don’t know whether any current tool offers these options.
The regular version of Sandvox is US$49, while the Pro version offers extra features for $79. A free demo is available. Mac OS X 10.4.4 is required.
Without reading the manual, I started up the demo version of Sandvox 1.0.3 and chose the first offered theme for my new page. I entered some text on the default page. Then I tried to add a link or two and a photo, and format my text a bit: a few headings, some emphasised text and a list.
It was easy to add links, although it’s a definite no-no these days to open a link (without warning) into a new window. Sandvox gives you a checkbox for opening a link into a new window, right in the Create a link dialog.
The photo was a bit trickier because the media browser showed only iPhoto and my Pictures folder, while the photo I wanted was in a separate folder. I was able to drag the photo in from the Finder and use the Inspector to add alternate text, wrongly called a Description.
Next I set out to do these tasks:
- turn the headings from ordinary text into heading text
- mark up three lines of text as a numbered list
- emphasise a few words.
These common tasks proved to be a problem.
Real headings on a web page aren’t just big and bold text, but are marked up with ‘h’ tags. I looked all over the interface for something that would let me apply a level 3 heading, even referring to the Wiki documentation and the Quickstart PDF. My only options appeared to be to make the text bold and / or to increase the font size. I put this task on hold temporarily.
Next I tried to make three lines of text into a list, with or without numbers. Again, I could see no way at all to do this. Another task on hold.
Sighted visitors looking at a web page see bold and may leap to the conclusion that bold means words are emphasised. Blind visitors and software such as search engines don’t understand bold as emphasis though. The correct markup is to use either the
strong tag or the
Something like a book title could be marked up as bold, because there it’s simply a visual aid — the title could equally well appear in a different font or colour.
I had a few words to emphasise. I selected them and reluctantly chose Bold from the Format menu, since there was no other option available.
The Code View
Having failed in two of my three formatting tasks I went looking to see how Sandvox had marked up my page. For this I used the View > Pro Web View > HTML Source menu item.
Accessibility generally refers to the experience for visitors to a rendered web page, but the tool used to create web pages should itself be accessible. The HTML source of my web page was an undifferentiated mass of tiny black text. Many tools use syntax coloring — they make tags blue, for example, while text may be black and perhaps attributes are red. Sandvox’s HTML source was impossible for me to read. It was also not possible to edit the HTML directly.
Unfortunately I could find no way to enlarge the Source text. The standard
Apple + keyboard command switched me back to the Web View, while commands such as View > Make Text Bigger silently failed. I pasted the text into my trusty text editor and enlarged it there.
The document I created used modern XHTML coding and passed the validation test with no errors. That only proves that validation tests if code is syntactically correct, and not whether a page has been well put together.
Because I had found no way to create headings or lists, those aspects of my page were deficient. The page did not reflect my writing intentions, and did not communicate effectively. I could have marked up the headings as bold, but as I’ve written before bold does not equal heading on a web page.
The text I had wanted to emphasise had indeed been marked up with a ‘b’ tag, rather than the ‘strong’ or ’em’ that were appropriate. The only real use for ‘bold’ as a menu item these days is to create a ‘strong’ tag.
Sandvox is lacking in some of the simplest and most fundamental functions. I should be able to easily apply heading and list formatting to my text, I should be able to choose ‘strong’ rather than ‘bold’.
And that’s just the basics. There are plenty more ‘intermediate’ and ‘advanced’ tasks that Sandvox seems to have no capacity for, such as adding title attributes to links.
Like iWeb, this software may be useful for creating pretty pages for friends and family to view. It’s not up to the task of creating the kind of web pages a small business or community group need.
- Quick Tips to Make Accessible Web Sites, Web Accessibility Initiative.
- W3C Markup Validation Service.
This article was first published in About This Particular Macintosh in August 2006 and may have been modified from the original.