Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Ask for reviews of new site

Status
Not open for further replies.

merrys1

Technical User
Jul 30, 2006
20
AU
Hi everyone.

I have recently developed the new Disability Toolkit and was wondering if people could please review it and submit comments. I still need to convert it to XHTML and clean up the tags, etc. It is based on the template from the stress toolkit. The link is below. Thanks!

Disability toolkit -

Stress Toolkit -

Merry :)
 
Firstly, I personally think your text is far too small for the type of site it is. You mention Visual Impairment but have a site designed totally against anyone even slightly visually impaired.

The links on the right had side of certain pages are too hard to read, such as:


Again related to the text size, you have fixed the text size so my browser won't resize it, yet for the template you have there is no reason to do so. You could easily allow me to resize the text without affecting the layout in any way.

Hope this helps

Wullie

YetiHost - Quality Coldfusion 7/Windows Hosting

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
Thanks Wullie

I will change the text size although how do you un fix the text size so others can resize it in thier browser?

Merry :)
 
There is quite low contrast between the text and the background in the body text (light on white), and also on the 'Links' link (dark on dark)

There seems to be no logic in the choice of 'tool' images over the 'Why', 'What', 'Who' and 'Links'. I also expected them to be clickable (don't know why [smile])

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
how do you un fix the text size so others can resize it in thier browser?
For users of IE to be able to resize text, it needs to be sized using a relative unit rather than an absolute one. So where you have
Code:
font-size: 11px;
IE will size that text at 11px come what may. Using a relative unit like % or em will size text relative to its default size. There's also the named font sizes - x-small, small, medium, etc... This venerable article is still useful when using them:
Otherwise it looks pretty enough, though I endorse what the others have said about text size and contrast. You're also using too many images-as-text for my liking, though you are at least putting the right [tt]alt[/tt] attributes in there.

Under the hood it's a bit of a horror. For example, what looks like, and should be, a normal <ul> on is actually marked up like this:
Code:
<ul>
<li> 
<div class="sidelink"><a href="what.htm#pd"><font color="#006666">Physical Disability</font></a></div>
</li>
</ul>
<ul>
<li> 
<div class="sidelink"><a href="what.htm#li"><font color="#006666">Learning and Intellectual Disability</font></a></div>
</li>
</ul>
What's that all about? A seperate <ul> for each item, then a nested <div>, then a freakin' <font> tag? Just give the <ul> a class...
Code:
<ul class="sidelinks">
  <li><a href="what.htm#pd">Physical Disability</a></li>
  <li><a href="what.htm#li">Learning and Intellectual Disability</a></li>
</ul>
... and do the rest (such as it is) with CSS ...
Code:
ul.sidelinks a {
   color: #066;
}
Maybe fixing this is what you mean by
I still need to convert it to XHTML and clean up the tags, etc.
but I don't understand why you'd develop a whole site cluttered up with extra tags and then come back at the end of the process to remove them. By the way, I wouldn't bother to convert to XHTML unless you've got some enormouly pressing reason to do so.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Regarding alt attributes, you are using some spacer graphics with an alt attribute of "spacer", this is, in my opinion, quite poor considering the subject matter.

I echo Chris' statment about using more descriptive alt attributes - again considering the subject of your site you should already know this.

There is no indication that something is a link (except for the hand cursor) and I think it would be better if there was some mouse over effect on the links and images. For example, underline links and reverse image colours.

Ahh, I now see that you are doing a mouseover on the "Why", "What", "Who" and "Links" links. Three things to say about this...
1. The difference between normal and over states is too slight. There isn't enough difference. Ideally you should make a physical change as well as a colour change (with more contrast).
2. The effect is done with javascript and is slow.
3. It's not applied to every link, just the main 4.

In fact, there is a general lack of consistency as to how the links are displayed and handled. This is a major accessibility no-no.

The text is quite small, although I don't think it's too small. However this is still an issue as the text cannot be easily resized as described in earlier replies. I think if you fix the resizing then you don't need to worry about the font size being too small.

That's the homepage, let's proceed inside.

I wont' look under the hood yet as Chris already did that and I get the feeling it will be a bit messy. Anyway, you said you are going to revisit that (would make more sense to me to do it as you go along though - do it close to right first time rather than do it wrong, then redo it the right way - too much work for my liking!)

There is a lack of consistency here too. The first page under "Why" is a list of links. When I click one, the list jumps to the right. Generally I don't have any accessibilty problems other than squeezing through small gaps but this threw me for a moment. A moment is all it takes to lose confidence in your'e message.

Good presentation of links in here. Perhaps the contrast between link and non-link text could be a little greater but the underline is good. I would add a hover state to these links though. This will prove it's worth if you have multiple links in close proximity to each other - the user will easily see which link they are activating.

You also seem to have greater contrast on the main menu links too. I don't really like them from a visual perspective, but from an accessibility viewpoint they are much better than the homepage. Javascript and speed issues still apply.

Moving on to the "What" page.

Wow, the sub navigation style has changed again.
Consitency is key - why are the links different colours here to on the "Why" page? You've also got a "Home" link that is styled differently again.

The same points apply to the other pages of the site.

I don't like the way you are handling the navigation. It seems over complex. The first page of each section seems superfluous to me. Since each "section" is, in actuallity, a single page using internal anchors then why not go straight to that page and skip the intermediate list of links?

Take the search out. Put the link in when the search is done and tested.

OK.. I said I wasn't going to look under the hood, but I couldn't resist.... but I have confined myself to the sitemap page.

Basically you are using classes inappropriately. Instead of creating classes for "bodytext", "title" and "sideLink" why not style suitable HTML tags? For instance, use <hn> tags for headings, use <p> tags for "normal" body text, style <a> tags instead of nesting them in <divs>.

This kind of approach, using the right tag for the job, is called "semantic" or "meaningful markup". It's using HTML as it was intended to be used and, in my opinion, is really a core priniciple of creating accessible sites.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Thanks heaps everyone for your input. I am fixing up the text size thing now and will continue with the rest.

Basically the reason I didn't do the tags properly when I created it was because I hadn't had training with CSS at the time and had limited time to create it. I just used the CSS that was linked to the stress toolkit and cut and pasted the html as this toolkit has the same template. Now that I have been trained in CSS I now have the joy of fixing all tags, etc in all the toolkits. I am redesigning the main site - at the moment so don't need to fix the old tags.

If anyone one has anymore comments please let me know

Thanks

Merry
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top