This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Site Ratings & Reviews > September 2004 > Critique my company's revised web site.
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Critique my company's revised web site.
|
|
| john henry bonham 2004-09-15, 12:17 pm |
| 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
| |
| Spartanicus 2004-09-15, 12:17 pm |
| john henry bonham <with@he.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"> </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
| |
| john henry bonham 2004-09-15, 12:17 pm |
| 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 :o
> 6) <h3 class="none"> </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 :o
> 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.
| |
| Stephen Poley 2004-09-15, 12:17 pm |
| On Wed, 15 Sep 2004 15:00:19 +0100, john henry bonham <with@he.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@he.ld> wrote:
> Spartanicus wrote:
>
I do agree. I'll help answer some of the questions...
[color=darkred]
>
> 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.
>
> ?
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!!
>
> 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.
>
> My boss' choice :o
Sorry. It is lame.
>
> 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.
>
> ? 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.
>
> ?
<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.
>
> 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.
>
> 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.
>
> To be fair, I have provided a non-JS version of every menu item.
Then why bother with the Js?
>
> Yes, but only in the menu I suppose I can fix that :o
Mmm-hmm... they all say that...
>
> It looks good, and every page checks out ... I'm proud of that :)
>
>
> It's a *standard*.
Whose standard? Sure ain't mine!
| |
|
| In message <41485bb3$0$94914$5a6aecb4@news.aaisp.net.uk>, john henry
bonham <with@he.ld> writes
>Spartanicus wrote:
>
[snip]
>
>
>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]
>
>
>? 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
| |
| Spartanicus 2004-09-15, 7:17 pm |
| john henry bonham <with@he.ld> wrote:
>
>? 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.
>
>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
| |
| Ben Measures 2004-09-15, 7:18 pm |
| 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.
| |
| The Doormouse 2004-09-15, 11:53 pm |
| john henry bonham <with@he.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.
| |
| The Doormouse 2004-09-15, 11:53 pm |
| john henry bonham <with@he.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.
| |
| The Doormouse 2004-09-15, 11:53 pm |
| Neal <neal413@yahoo.com> wrote:
> If you really want the page
> to be accessible, begin with NO style.
That's a great tip, IMO.
The Doormouse
--
The Doormouse cannot be reached by e-mail without her permission.
| |
| The Doormouse 2004-09-15, 11:53 pm |
| Ben Measures <saint_abroadremove@removehotmail.com> wrote:
> It's more than a fad. Its strictness is conducive to smaller, less
> complex parsers.
It is also more XML-friendly than HTML.
The Doormouse
--
The Doormouse cannot be reached by e-mail without her permission.
| |
| kchayka 2004-09-15, 11:53 pm |
| john henry bonham wrote:
> Spartanicus wrote:
>
>
> Yes, but only in the menu I suppose I can fix that :o
It is not only in the menu. In tag.css:
p {font-size : 69%;}
I guess you don't really expect people to read the text easily, do you?
Unless I ignore all author font sizes, it's stoopidly small in IE even
at the Largest text size, and completely unreadable for me at any other
setting. At least mozilla lets me make it as big as I need.
Don't make the mistake of thinking that accessibility is only about
accomodating screen readers. It is much more than that.
BTW, it appears that you didn't test much with enlarged text sizes,
either. In my browser of choice at my larger-than-average size, stuff
overlaps all over the page top and sidebars. It is not attractive, let
alone readable. And why do you have so many stylesheets? The pages
aren't that complicated, you could do well with a fraction of what
you've got now.
>
> It looks good, and every page checks out ... I'm proud of that :)
What looks good - the buttons or the page itself?
I hate to burst your bubble, but Bobby is nothing to get excited about.
It more often than not gives the author a false positive on passing
accessiblity checkpoints.
For example, it cannot check whether any specified image alt text is
appropriate, it can only check that it exists. It cannot determine
whether any other markup is appropriate or not, either. It also tends to
recommend techniques that are actually counterproductive, like using
tabindex for forms and links. Bobby is generally Not A Good Thing.
If you use Bobby for anything more than a cursory check for blatant
errors, you are misusing it. I would even bet money your pages don't
truly deserve that AAA rating you're advertising. You should remove that
claim until someone has manually verified it.
You should also remove the claim on the quality.php page:
"Avagio are able to deliver a website viewable by 100% of the global
web-browsing population."
Where have you proven this?
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
|
|
| kchayka 2004-09-15, 11:53 pm |
| rf wrote:
> john henry bonham wrote:
>
>
> Others have mentioned the small font. This is what happens when it is made
> bigger:
>
> http://users.bigpond.net.au/rf/avigo.jpg
>
> Note the brown box
IE's broken overflow handling causes the box to expand to fit the
content, and the brown background image repeats. In mozilla, the content
just spills out and overlaps the other elements. Both are ugly.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
|
|
| Spartanicus 2004-09-16, 10:27 am |
| Crossposted and follow up set to alt.html
Ben Measures <saint_abroadremove@removehotmail.com> wrote:
>
>It's more than a fad.
Serving XHTML as HTML as the OP is doing serves no purpose at all.
>Its strictness is conducive to smaller, less
>complex parsers.
It requires an equally "complex" parser because:
1) It's served and thus rendered as HTML.
2) For practical purposes XHTML 1.0 Strict is as "strict" as HTML 4.01
Strict.
>Some devices cannot afford to have a fully blown quirks-mode parser.
>This is an important point, especially if talking about accessibility.
Irrelevant, again: it's served and parsed as HTML.
--
Spartanicus
| |
| kchayka 2004-09-16, 10:27 am |
| john henry bonham wrote:
> Do you think that this testpage would address most, if not all, of the
> issues raised above?
>
> http://www.avagio.co.uk/new/test.html
Some, perhaps. The page organization is questionable (look at it with
stylesheets disabled), your heading levels don't really make sense, and
you are still apparently depending on a particular font and/or window
size to get a desired layout. You should test more with enlarged text
sizes, in various window sizes, in browsers other than WinIE.
<URL:http://www.allmyfaqs.com/faq.pl?AnySizeDesign>
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
| Ben Measures 2004-09-16, 10:27 am |
| Spartanicus wrote:
> Crossposted and follow up set to alt.html
> Ben Measures <saint_abroadremove@removehotmail.com> wrote:
>
>
> Serving XHTML as HTML as the OP is doing serves no purpose at all.
Perhaps that's what you should've pointed that out to the OP, rather
than declaring XHTML as a 'fad'.
--
Ben M.
| |
| J. Newark 2004-09-30, 5:07 am |
| Typos in Contacts Page Form under Telephone
"Enter you company here"
^^^
"Enter your telehpone number here."
^^^^^^^^
"kchayka" <usenet@c-net.us> wrote in message
news:2qteldF13hebfU1@uni-berlin.de...
> john henry bonham wrote:
>
>
> Some, perhaps. The page organization is questionable (look at it with
> stylesheets disabled), your heading levels don't really make sense, and
> you are still apparently depending on a particular font and/or window
> size to get a desired layout. You should test more with enlarged text
> sizes, in various window sizes, in browsers other than WinIE.
>
> <URL:http://www.allmyfaqs.com/faq.pl?AnySizeDesign>
>
> --
> Reply email address is a bottomless spam bucket.
> Please reply to the group so everyone can share.
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|