[thelist] Site check [createvillas.co.uk]

[Ian Anderson]

Simon Perry wrote:
> Just putting the finishing touches to http://www.createvillas.co.uk and
> I would really appreciate some feedback - be it: good, bad, ugly or
> indifferent. Particular areas are browser display issues and general
> usability and features.

1. The site has an undesigned feel, in my opinion.

a. different sans serif fonts are used for the nav labels, the panel 
headers and the body text. It's a mishmash, I'm afraid. The worst bit is 
the different lower case a in the panel headers.

b. Things that ought to line up, don't - e.g. in the hot locations 
panel, there should be a consistent inset to the left edge for the 
headings, pics, body text and rules.

c. The relationships between the text sizes don't work particularly 
harmoniously, resulting in a jumbled feel to the page.

d. the form field labels in th equick search box are all over the place. 
This needs a fixed central line, with the labels range right to it and 
the form elements range left. You can do this with a table easily, or 
with CSS with extraordinary care  - there is an example on Real World 
Style - http://realworldstyle.com/forms.html. Or coinsider putting all 
the labels above the fields as you have with Resort. Also, consider 
using CSS width:100% on the form fields, which will prevent the select 
menu busting out of the panel if someone puts in a really long resort 
title. It also helps to make textareas and textfields line up nicely in 
other situations.

e. The footer text is presented as content, because you have a content 
panel with the footer text in it, which gives it unwonted prominence. 
This is more usually presented in the same style as your other more 
conventional footer element - outside the main content box, and in a 
less visible style.

2. Accessibility:

a. There are links reading "more" which will give screen reader users a 
hard time when they tab through the page and hear them out of context. 
More what? Link text should indicate what it is a link to; a good rule 
of thumb is to make the link text the same as or similar to the page 
title and the h1 of the page being linked to. This is good Google mojo 
also. You'll also find automated access checkers complaining because the 
same link text links to different resources, which is not directly 
relevant here, but who needs the aggro if the client runs it through one?

b. You also misuse this punctuation entity - » - for its 
coincidental visual similarity to an arrow. This will be read as 
something entirely unfathomable in a screen reader, and I would suggest 
not doing this. An ellipsis (...) is perfectly adequate, and is read in 
a much more sensible fashion.

c. The subnav links do not appear when the first level of tabs are 
tabbed to using the keyboard. You can use onfocus as well as onmouseover 
to make this happen, though you need to explore the consequences of this 
fairly thoroughly. At least there are equivalent links to the missing 
subnav in the corresponding second level pages, so the practical impact 
of this is not hugely significant for keyboard users.

d. In the copy for the help page, it refers to links "above" but these 
are actually below the text in the source order, so as you tab through 
the page you come to them last. You should try to avoid two-dimensional 
references (e.g. up, down, left, right) to page elements, as they often 
fall flat when screen readers are in use.

3. Usability

The two levels of tabbed navigation are  a terrible idea - you should 
really explore a different metaphor for the subnav links - usual 
practice is to separate them with "|" if nothing better springs to mind. 
This two level tabs stuff confuses users wherever it's used, most 
notably in some MS Word dialogue panels. The worst thing about this is 
that in Word, the two rows are siblings, but here you have used the same 
metaphor (2 rows of tabbed panels) for parent and children links. The 
minor colour change is not sufficient to rescue this problem.

Hope this helps

Cheers

Ian

-- 
_________________________________________________
zStudio - Web development and accessibility
http://zStudio.co.uk

Snippetz.net BETA - Online code library
File, manage and re-use your code snippets online
http://snippetz.net