Critique my company's revised web site.

http://www.avagio.co.uk

Our web site has just been re-coded to conform to the W3C WAI guidelines.

Let me know what you think of the quality of workmanship.

Rob

john henry bonham <with (AT) he (DOT) ld> wrote:

http://www.avagio.co.uk

Our web site has just been re-coded to conform to the W3C WAI guidelines.

Let me know what you think of the quality of workmanship.

Bad:
1) JS browser sniffing
2) Div soup
3) <h2 class="welcome" title="Welcome."><b>Welcome</b></h2>
What on earth are the title and <b> for?
4) The above content is not a header, loose it
5) "Welcome, and thank you for taking the time to visit our site."
Get rid of this nonsense
6) <h3 class="none">&nbsp;</h3>
Get rid of this junk
7) Incorrect header descendence
8) <p style="margin : 0 0 0 0;text-align : center;">
Loose the inline styles
9) List of links not marked up as such
10) Incorrect usage of <strong> throughout
11) Incorrect usage of <b> throughout
12) JS menus, loose them
13) Microfonts
14) Bobby and Valid XHTML buttons: don't mention the mechanics
15) XHTML: fad

--
Spartanicus

Spartanicus wrote:

Bad:
1) JS browser sniffing

I have to use some CSS tweaks for different browsers. Is there a way
around this?

2) Div soup

?

3) <h2 class="welcome" title="Welcome."><b>Welcome</b></h2
What on earth are the title and <b> for?
4) The above content is not a header, loose it

The title attribute is a requirement according to the W3C WAI
guidelines. The <b> is set to display:none; and therefore the welcome
text will only appear if the user disables css (as opposed to the
image). <strong> performs the same job as <b> and is also emphisised by
screen readers. That is my reasoning for using <strong> throughout and
"reserving" <b> for users who choose to disable CSS.

5) "Welcome, and thank you for taking the time to visit our site."
Get rid of this nonsense

My boss' choice

6) <h3 class="none">&nbsp;</h3
Get rid of this junk

To conform to the W3C WAI guidelines, there has to be a structured
heading hierarchy. If there is no H3 section on a page, I simply hide it
like that.

7) Incorrect header descendence

? All pages have <h1>, <h2>, <h3>, <h4>, <h5>, <h6> in order... ?

8) <p style="margin : 0 0 0 0;text-align : center;"
Loose the inline styles

OK, good point.

9) List of links not marked up as such

?

10) Incorrect usage of <strong> throughout

See above, although the only use I know of for strong is to emphasise a
word... no?

11) Incorrect usage of <b> throughout

See above.

12) JS menus, loose them

To be fair, I have provided a non-JS version of every menu item.

13) Microfonts

Yes, but only in the menu I suppose I can fix that

14) Bobby and Valid XHTML buttons: don't mention the mechanics

It looks good, and every page checks out ... I'm proud of that

15) XHTML: fad

It's a *standard*.

Thanks for taking the time to critique this website.

On Wed, 15 Sep 2004 15:00:19 +0100, john henry bonham <with (AT) he (DOT) ld>
wrote:

http://www.avagio.co.uk

Our web site has just been re-coded to conform to the W3C WAI guidelines.

Let me know what you think of the quality of workmanship.

Why on earth do you produce an unstyled page for a reader without
Javascript? (I suspect someone is still thinking Netscape 4). CSS,
images, and Javascript are three different things: it is entirely
possible for someone to have CSS and images but no Javascript. (I
normally do).

Tiny letters: leave the main text of each page at the default size
(100%). If *you* like tiny letters than adjust your own browser.


--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

On Wed, 15 Sep 2004 16:11:47 +0100, john henry bonham <with (AT) he (DOT) ld> wrote:

Spartanicus wrote:

Bad:

I do agree. I'll help answer some of the questions...

1) JS browser sniffing

I have to use some CSS tweaks for different browsers. Is there a way
around this?

Many. Likely though, the problems you have come from overcomplexity.

You have this need to put style in your HTML. If you really want the page
to be accessible, begin with NO style. Pretend it never existed, and all
we have are headings, lists, paragraphs and that kind of thing. No bold,
no italics, no refined sugar, you know the drill.

I'm viewing your page in text mode on Opera, and visually it makes a
little sense, but it'd make MORE sense if you applied a more semantic
approach to your markup.

2) Div soup

?

Too many neutral or unnecessary elements. Simplify.

See the following nested h2 and b for an example. It carries no semantic
meaning on the page. So it's what's more commonly called "tag soup". Use
only the HTML you need to express to the user agent what role each piece
of content plays in the page.

Or look at this:

<p class="left">
To speak to one of our sales representatives, please call:
</p>
<p class="left">
<strong>01249 654 871</strong>
</p>
<p class="centered">
<a class="left" href="website-pricing.php?contact">Or leave us a
message</a>
</p>

Are these really separate paragraphs? Nope. So don't mark them up that
way!!

3) <h2 class="welcome" title="Welcome."><b>Welcome</b></h2
What on earth are the title and <b> for?
4) The above content is not a header, loose it

The title attribute is a requirement according to the W3C WAI
guidelines. The <b> is set to display:none; and therefore the welcome
text will only appear if the user disables css (as opposed to the
image).

What image? Use alt to set what an image should be replaced with.

Oh, you must be using a background image for the Welcome header. Don't.
The hoops you're jumping through are only hurting the usefulness of the
page.

This isn't necessary, you've goe the long way to get there, and you're not
even there.

strong> performs the same job as <b

NO it does NOT. They are distinct.

strong means this word is strongly emphasized in the sentence. You
<strong>must</strong> use semantic markup, for example. Most graphic UAs
boldface it, but a reader will stress the word.

b means that the author means to force boldface on the user with no
recognized semantic purpose. About the only real purpose for b is in
scientific equations where vectors are often bolded. b should rarely be
used, instead either use semantic markup (like a heading or strong) or set
it in CSS. And Lynx won't boldface at all, so what happens there?

You're assuming a lot about presentation in your markup. Please get out of
that old style of thinking!

and is also emphisised by screen readers.

Damn straight. WHAT IF I TYPED MY WHOLE SENTENCE LIKE THIS?? That's
similar to the effect a sentence of strong has on a reader.

That is my reasoning for using <strong> throughout and "reserving" <b
for users who choose to disable CSS.

If they choose to disable CSS, then don't use b, they don't want the damn
boldface!

Set it in CSS if you like it bold. If the page can survive something not
in the HTML, definitely strip it out.

5) "Welcome, and thank you for taking the time to visit our site."
Get rid of this nonsense

My boss' choice

Sorry. It is lame.

6) <h3 class="none">&nbsp;</h3
Get rid of this junk

To conform to the W3C WAI guidelines, there has to be a structured
heading hierarchy. If there is no H3 section on a page, I simply hide it
like that.

Cheating. Find a better way.

Do you want to satisfy a list of criteria, or do you truly want the site
to be accessible? They are different things. If you want just the former,
we can't really be much help, because you can train a monkey to follow a
list of rules.

7) Incorrect header descendence

? All pages have <h1>, <h2>, <h3>, <h4>, <h5>, <h6> in order... ?

Generally, h1 is the primary header, h2's are sectional headers, h3's are
sub-sectional headers, etc. This is not a hard rule but it is accepted
style for this type of document.

9) List of links not marked up as such

?

<a class="main_menu" href="index.php" id="n0"
title="Homepage.">Home</a><b>|</b><a class="main_menu"
href="website-development.php" id="n1" title="Website Design.">Website
Design</a><b>|</b><a class="main_menu" href="it-services.php" id="n2"
title="IT Services">IT Services</a><b>|</b><a class="main_menu"
href="contact-us.php" id="n3" title="Contact Us">Contact Us</a>

It's a list. Use list markup and CSS to do this more logically and simply.

Again, stop obsessing over the rendering and focus on the semantic meaning
in HTML. That goes farther toward making a page accessible than Bobby ever
can.

10) Incorrect usage of <strong> throughout

See above, although the only use I know of for strong is to emphasise a
word... no?

<strong>Welcome, and thank you for taking the time to visit our
site.</strong>

A whole sentence? No no no. This will sound like you're yelling at me.

Use CSS to add this type of typographic style.

11) Incorrect usage of <b> throughout

See above.

<h2 class="welcome" title="Welcome."><b>Welcome</b></h2>

b is used when content must be boldfaced according to style. No reason to
use it within heading markup, which will already carry that rendering in
any browser that supports it.

Use CSS to modify any element's rendering.

12) JS menus, loose them

To be fair, I have provided a non-JS version of every menu item.

Then why bother with the Js?

13) Microfonts

Yes, but only in the menu I suppose I can fix that

Mmm-hmm... they all say that...

14) Bobby and Valid XHTML buttons: don't mention the mechanics

It looks good, and every page checks out ... I'm proud of that

15) XHTML: fad


It's a *standard*.

Whose standard? Sure ain't mine!

In message <41485bb3$0$94914$5a6aecb4 (AT) news (DOT) aaisp.net.uk>, john henry
bonham <with (AT) he (DOT) ld> writes

Spartanicus wrote:

[snip]

3) <h2 class="welcome" title="Welcome."><b>Welcome</b></h2
What on earth are the title and <b> for?
4) The above content is not a header, loose it

The title attribute is a requirement according to the W3C WAI
guidelines.

Which guideline?

The <b> is set to display:none; and therefore the welcome text will
only appear if the user disables css (as opposed to the image).
strong> performs the same job as <b> and is also emphisised by screen
readers. That is my reasoning for using <strong> throughout and
"reserving" <b> for users who choose to disable CSS.

Setting <b> to 'display:none' means that the heading is invisible to

most screen readers, talking browsers, etc.

So, the first headings are effectively absent.

Example: on http://www.avagio.co.uk/development-skills.php

Website Design Bristol Bath Chippenham Swindon. Avagio IT Services
and
Development Skills.
are not heard.


[snip]

7) Incorrect header descendence

? All pages have <h1>, <h2>, <h3>, <h4>, <h5>, <h6> in order... ?

Not if you hide headers.

[snip]

the content of <title></title> should reflect the page content.

regards.
--
Jake

john henry bonham <with (AT) he (DOT) ld> wrote:

7) Incorrect header descendence

? All pages have <h1>, <h2>, <h3>, <h4>, <h5>, <h6> in order... ?

Headers should markup structure, it's a mistake to assume that headers
should be sequential.

Rule of thumb: be suspicious when using h5 and h6, as these are rarely
needed, it's likely that you are using headers incorrectly.

13) Microfonts

Yes, but only in the menu

You'd wish: http://www.spartanicus.utvinternet.ie/test/avagio.png (70kB)

I refer to Neal's and Jake's follow ups for your other questions.

--
Spartanicus

Spartanicus wrote:

15) XHTML: fad

It's more than a fad. Its strictness is conducive to smaller, less
complex parsers.

Some devices cannot afford to have a fully blown quirks-mode parser.
This is an important point, especially if talking about accessibility.

--
Ben M.

john henry bonham <with (AT) he (DOT) ld> wrote:

http://www.avagio.co.uk

The coding meets XHTML 1. Your website has been made carefully with quality
and future needs in mind (generally).

The other posters have higher standards than mine - you might want to
review their recommendations carefully.

The Doormouse

--
The Doormouse cannot be reached by e-mail without her permission.

john henry bonham <with (AT) he (DOT) ld> wrote:

It looks good, and every page checks out ... I'm proud of that

You should be. Most of the sites that come here are very broken.

The Doormouse

--
The Doormouse cannot be reached by e-mail without her permission.