Aesthetic and Technical Review of
by jim barchuk
27 September 1996 3:00pm
Pages tested under:
-Very- good first impressions: loads fast, excellent content, perfectly navigable in text mode. Graphics are large, attractive, and appropriate yet at relatively low bandwidth cost.
The surf background sound is a very good idea, but it is more respectful to 'offer' it to the reader, to ask them if they want to hear it, rather than just sending it to them. Forced web page sounds often intrude on other music the reader has playing. Also, the sound file essentially doubles the initial load time of the first page; a user who doesn't have a sound card shouldn't have to pay for a file he can't use.
The LINK and VLINK values are set to the same color. This is generally not a very good idea, mainly because the average user is used to seeing visited links in a different color from unvisited links. Given a list of links to follow, the user first looks into the ones that most interest them, then may look at others, but with the visited links the same color as the unvisited links the user is easily confused as to which links he has already visited.
Multiple instances of <BR> is often 'wasted effort' in an attempt to force spacing. Many browsers condense all multiple elements into just one, Spry Mosaic for instance. The official spec is that the behavior of repetitive elements is 'undefined'.
At the top and bottom of each page should be links to each other 'main' page available at marinas.com, something along the lines of:
Notice that the Home item is -not- hotlinked, this set of links is meant for the home page. On the About page the menu would appear as:
There are two purposes for these sets of links. First, the common appearance lends a visual and navigational continuity throughout the site. Second, it allows each page to 'stand on it's own'. Individual pages within a web site are
'Click on' and 'press here' type hotlinks are usually frowned upon as redundant and 'wordy'. The user can see by the browser underline or highlight that certain text is a link. The highlighted text should 'flow' with the content. For instance...
...should be more appropriately implemented as...
Note that I removed the size, bold and italic tags. The link stands on it's own merits, it needs no emphasis.
The NN and MSIE promo logos are at best unnecessary and at worst distracting. Especially for the first page, the only topic visible should be 'marinas'. The logos are unnecessary in that these pages look just fine under all browsers. 'Extras' such as audio and scrolling marquee are completely invisible without the appropriate browser; it is considered rude and intrusive to 'accuse' the user of having the 'wrong' browser. For various reasons some users are simply and literally incapable of changing browser, these logos can cause the user to feel 'left out' through no fault of their own. These logos do not necessarily lend any special credibility to the site; given the leading popularity of MSIE and NN the average user expects marinas.com to be at a minimum MSIE and NN compatible, and with a extra attention compatible with less common browsers.
The only major disappointment at marinas.com is the appearance of the main page in text format, with graphics disabled. The first two things that appear are an ALT="Welcome to Marinas.com" and references to MSIE and NN compatibility, have to page down to find any further info. Disregarding me previous recommendation about these logos, what should immediately follow the initial welcome is a short paragraph explaining 'what is' marinas.com. The user should not have to page down and 'guess' what the hotlinks might mean to determine the 'purpose' of marinas.com.
The order for the deeper site pages should be:
Visit a marina
The reason for this is that topics should be listed in the order that the majority of users could make best use of. The most common user is the average boater who wants further individual marina information. The second most common user is the marina owner who may be interested in applying for a listing at marinas.com. The third link is common to all. The last link should be the one that invites the user to leave marinas.com. After all the work it took to attract the user here, the last thing they should encounter is encouragement to go someplace else.
Visit A Marina
This is the most important part of marinas.com and deserves the most detailed attention. These observations and suggestions are not meant to be the last word on the topic. For a time, this particular area should undergo continuous subtle changes based on the reactions of users.
For some reason under NN 3.0 but no other browser I have, the first item of each list such as 'Northeast' and 'Maine', are improperly a larger font size than the rest of the list. [later] Found it, there is a <font size="+2"> that has no closing tag. The impression I get is that NN interprets that to mean 'end the font at the next <P> tag' whereas other browsers ignore it completely because it has no closing tag. More about these technical aspects later.
Spry Mosaic displays the hewitts.htm very differently than NN. Suggest a few strategic <BR>s to force text to new screen line.
Suggest regmap.gif be reduced to 16 colors to save more than half of the bandwidth.
In addition to the geographical breakdowns there should be a full alphabetical listing, one line per marina. If a user is looking for a particular marina by name it would be faster to find that way. As the list grows it will be necessary to split it into sub-alphabetical groups.
If the marina listings get rather large then a search engine to aid finding marinas would be very nice. Searches could be based on name, location or facilities.
Region, state and town names should be mixed case, not all caps.
Individual marina listings
The order of information for each marina should be name plus picture first, followed by descriptive paragraph. This is to 'hook' the user. The facilities chart and navigation information should follow.
There is one major and one minor aesthetic problem with the marina facilities chart.
The minor problem is the smaller text. This information is the most important information is all of marinas.com. There is no valid reason to make this text smaller and harder to see. Small text is for less important information.
The major problem is the 'runon' appearance of the information. Data should be laid out in easy to see rows and columns. Data should appear in the same place on the screen for each marina. This way the user doesn't have to 'hunt' for the information he needs, the information should be easy to see and find.
The forced line breaks in the facilities information lead me to believe that it was laid out in fairly small type and/or at fairly high resolution. Viewing the page at lower resolution or with larger font size causes line breaks at very 'odd' and intrusive points. A table format for this information would solve this problem.
The 'Return to state listings' link is appropriate text but the font is way to big.
The 'NOAA Chart#' text, light green on white, is very difficult to read. For continuity purposes, all hotlinks on all pages within marinas.com should be the same color.
Marina application form
This is the second most important page within marinas.com. Yes, it is almost equally important as the individual marina information pages, but those pages need to hook the user so they come back again and again, this page needs to hook the marina owner only once.
My gut feeling is that the average marina owner will be coming to this page because he already at least half intends to sign up, that there is really a lot less selling needed here, but the final hook must be set, easily but firmly.
In my opinion the text here is very good, but there is one navigation problem. For the marina owner that comes to this page and wants to sign up immediately/now there is no easy and obvious link to the signup form. In fact after reading the full text the link is not obvious. The only link in all of marinas.com to the marina signup form is the ambiguous phrase simple and inexpensive. There should be links to this form in the main page, and at the top and bottom of this page. Make ie easy for the marina owner to find the form.
The 'header' graphics for all the other marinas.com pages are very good, very sharp and nautical. But the graphic for this page does not follow in the continuity of the other pages.
Some browsers are capable of displaying the text portion of a page before images are fully downloaded. This effect gives the 'appearance' that the page is downloading 'faster'. To facilitate this the browser must know how much space to allocate for each image, I very strongly suggest adding HEIGHT and WIDTH attributes to each image.
There are various methods used by search engines to index web pages. To cover all the bases, each method should be known about and attended to. <META> tags are one method, the marinas.com pages contain no meta tags. 'First 250 words' is another method. Index.html doesn't even contain 250 words. Technically as well as aesthetically these first words of marinas.com/index.html are the most important words in the entire site. (This comment is with reference to my previous suggestion of an opening paragraph explaining marinas.com.)
Technical conformance to HTML spec is often a very difficult topic to discuss. Many people are of the opinion that 'if it looks good under [this] browser then it ought to look good under anything'. After talking with you, Bob, I realize (thankfully) that you do not follow this foolish line of reasoning, that there are many browsers out there that must be considered. Marinas.com does look very good under all the browsers I have, with exceptions noted in previous discussion.
There is another aspect of technical conformance that is generally 'invisible', errors that cannot be 'seen' at the browser level. For this reason these errors are also often dismissed as 'irrelevant'. Unfortunately these errors often make themselves known in very unfortunate and embarrassing ways, such as phone calls or email from marina owners that come out of the blue with 'My page is blank' or something similar. The reason that can happen is that HTML errors that today's browser doesn't choke on might display differently under or even potentially crash tomorrow's browser.
Here's an example. An HTML comment is text within <!-- and --> tags. I have seen quite a few pages where the closing comment tag is missing, and browsers react differently to this. NN assumes that it's a 'mistake' and displays the page beginning at some point after the opening comment tag. Other browsers display absolutely nothing after the point of the opening comment tag. If the comment tag is located near the top of the page and the rest of the page is not displayed, including email references, a thoughtful reader is incapable of even trying to contact the page owner to let him know that something is wrong, the owner may go for months without finding out about the problem.
Another example: <IMG> embedded in HTML will crash NN 2.x. I haven't bothered to test this under 3.0. I do know that the page I found this on I had to load MSIE to find out what the problem was.
Marinas.com suffers from nothing as severe as these examples, but there are errors. I fact there are, at a guess, somewhere between one and several hundred errors as reported by NSGMLS, an HTML validator, validating to HTML 3.2. This is ignoring the extension tag errors, this is 'basic' HTML. Offhand, none of the errors seem to be serious or critical, but they are definitely there. Most of them, the vast majority, are missing closing tags, such as </I> and </FONT>.
Index.html contains two instance of <HEAD>...</HEAD>, the second of which is contained within <BODY></BODY>. There's know way to guess how a particular browser might react to this situation.
All values that contain non alphanumeric characters such as % should be enclosed in "quotes".
My extreme compliments to the owners, designers and coders of marinas.com. The site looks great, works great, has the potential to be a huge success. All the above observations and suggestions are 'icing on the cake'. Marinas.com is adequate as it stands, these suggestions are meant to raise marinas.com above the average level of the vast number of sites out there to a higher level of excellence.