Site Ratings & Reviews - New Site Critique

Author

New Site Critique

Jon L

2004-08-06, 7:16 pm

Please critique this site: http://projectdestiny.net/
I did for a friend of mine. It is my first attempt, so all criticism
and tips would be greatly appreciated. I am just starting out with HTML
and CSS so I do not know all of the tricks to create a complete
tableless layout.

Thanks in Advance,

Jon

Neal

2004-08-06, 7:16 pm

On Fri, 06 Aug 2004 12:44:27 -0400, Jon L <jon@jon.jon> wrote:

> Please critique this site: http://projectdestiny.net/
> I did for a friend of mine. It is my first attempt, so all criticism
> and tips would be greatly appreciated. I am just starting out with HTML
> and CSS so I do not know all of the tricks to create a complete
> tableless layout.
>
> Thanks in Advance,
>
> Jon

For a first time try, not bad at all. I've looked only at the front page,
BTW. Here's a few tips.

1) Serve the images at the size they'll appear. Don't reduce their size in
the HTML. The height and width values in the img element should be
identical to the pixel height and width of the actual image.

2) Your title is important for keywords. Many SEO experts feel the most
important keywords should be in the title. Try to work it in.

3) Is your h6 (the address) really an h6? I think it's not a heading, and
I'd instead use a div to style it.

4) Class and id names should describe the content within the element, not
the rendering. Rather than, say, "left", use "navigation". You're mostly
OK here, a few I'd alter.

5) I think the font (or lack of) for linkwrapper isn't right. And look at
this:

font-family:sans-serif, arial, helvetica;

This is incorrect - sans-serif is a generic and must come last. As it
stands, all browsers have a default sans-serif, so Arial and Helvetica
won't even be seen. Change this to:

font-family: arial, helvetica, sans-serif;

6) Links are differentiated only by color. This is dangerous as some
cannot see the color difference due to eyesight or equipment. Do something
visually obvious to show what are links. Hover state isn't enough - they
need to know to hover over the link.

7) That table - why not float the picture left and simplify your code
substantially?

Not a terribly inspiring design, but it's clear and usable. My ruling - a
work in progress, but you've done more right than wrong so far.

jake

2004-08-06, 7:16 pm

In message <wzOQc.9131$Ns.9089@bignews5.bellsouth.net>, Jon L
<jon@jon.jon> writes
>Please critique this site: http://projectdestiny.net/
>I did for a friend of mine. It is my first attempt, so all criticism
>and tips would be greatly appreciated. I am just starting out with
>HTML and CSS so I do not know all of the tricks to create a complete
>tableless layout.
>
>Thanks in Advance,
>
>Jon

A couple of immediate thoughts:

(a) The logo is rather big; it would be better to have it smaller-- and
perhaps of a higher quality (is it a black-and-white scan?). It might be
better repositioned in the top-left corner.

(b) To expand on two of Neal's points:
(i) "font-family:sans-serif, arial, serif;"
both 'serif' and 'sans-serif' are browser defaults ..... you should
have one or the other -- and at the end of the font list. I'd suggest
"arial, sans-serif"
(ii) Each page should have a different title, reflecting the contents of
that page. e.g.
<title>Destiny Childcare Learning Center -- about us</title>

(And don't use '~' in the text string -- speech output devices will
speak these as 'tilde')

(c) I don't know what 'SBOE' means; it might b better to write it out in
full the first time that you use it.

(d) Provide a link as the very first entry on the page that will allow a
user of 'assistive technology' (screen-reader, et al.) to go straight to
the main content of the page.

(e) The 'contact' link would be better as a link to a separate page
(rather than a 'mailto:') which could include email, address, phone, and
fax details.

Anyway, that's it for the time being. I'm sure lots of other folks will
have things to say.

Actually, it's not bad (if, perhaps, a little bland) -- although I'd be
inclined to experiment with the colour scheme.

It all makes sense -- so that's a bonus ......... except for the FAQ
page. Is it anything like it's final construction? If so, then you
really do have problems with this particular page.

regards.

--
Jake

Jon L

2004-08-06, 7:16 pm

Neal wrote:

> 1) Serve the images at the size they'll appear. Don't reduce their size
> in the HTML. The height and width values in the img element should be
> identical to the pixel height and width of the actual image.

I changed the size of the actual image and the size in the img element.

> 2) Your title is important for keywords. Many SEO experts feel the most
> important keywords should be in the title. Try to work it in.

I re-named all of the page titles to accurately reflect the page.

> 3) Is your h6 (the address) really an h6? I think it's not a heading,
> and I'd instead use a div to style it.

I thought about that when I did it, and saying it as well convinced me
to change it.

> 4) Class and id names should describe the content within the element,
> not the rendering. Rather than, say, "left", use "navigation". You're
> mostly OK here, a few I'd alter.

I think most of these are clearer now. I think I changed about 5-6.

> 5) I think the font (or lack of) for linkwrapper isn't right. And look
> at this:
>
> font-family:sans-serif, arial, helvetica;
>
> This is incorrect - sans-serif is a generic and must come last. As it
> stands, all browsers have a default sans-serif, so Arial and Helvetica
> won't even be seen. Change this to:
>
> font-family: arial, helvetica, sans-serif;
>
> 6) Links are differentiated only by color. This is dangerous as some
> cannot see the color difference due to eyesight or equipment. Do
> something visually obvious to show what are links. Hover state isn't
> enough - they need to know to hover over the link.

I changed all of the font's to the above mentioned. I thought I saw it
like that somewhere and was trying to remember the way it was done.
Guess I should have looked at the W3 site first. I have re-styled the
links more than any other part of the page. I now have a different
color background with an underline as well. Do you think this is visual
enough?

> 7) That table - why not float the picture left and simplify your code
> substantially?

Thank you for the tip. I was trying to accomplish something like that
using only margins and was not able to do so. I removed the table as
you suggested and I think it is a cleaner look.

> Not a terribly inspiring design, but it's clear and usable. My ruling -
> a work in progress, but you've done more right than wrong so far.

Definitely a work in progress. I created this page two days ago, and
continue to tinker with ideas about improving the look while not
sacrificing standards in the process. Here is the link again if you
care to take another look.

http://projectdestiny.net/

Jon

Jon L

2004-08-06, 7:16 pm

jake wrote:

>
> A couple of immediate thoughts:
>
> (a) The logo is rather big; it would be better to have it smaller-- and
> perhaps of a higher quality (is it a black-and-white scan?). It might be
> better repositioned in the top-left corner.
>
> (b) To expand on two of Neal's points:
> (i) "font-family:sans-serif, arial, serif;"
> both 'serif' and 'sans-serif' are browser defaults ..... you should
> have one or the other -- and at the end of the font list. I'd suggest
> "arial, sans-serif"
> (ii) Each page should have a different title, reflecting the contents of
> that page. e.g.
> <title>Destiny Childcare Learning Center -- about us</title>
>
> (And don't use '~' in the text string -- speech output devices will
> speak these as 'tilde')

I changed all of the above, as you mentioned, Neal also brought up the
same points and I corrected them.

> (c) I don't know what 'SBOE' means; it might b better to write it out in
> full the first time that you use it.

I should have that about that before including it with the rest of the text.

> (d) Provide a link as the very first entry on the page that will allow a
> user of 'assistive technology' (screen-reader, et al.) to go straight to
> the main content of the page.

I am not sure I understand exactly what you mean? Could you elaborate
please.

> (e) The 'contact' link would be better as a link to a separate page
> (rather than a 'mailto:') which could include email, address, phone, and
> fax details.
>
> Anyway, that's it for the time being. I'm sure lots of other folks will
> have things to say.
>
> Actually, it's not bad (if, perhaps, a little bland) -- although I'd be
> inclined to experiment with the colour scheme.
>
> It all makes sense -- so that's a bonus ......... except for the FAQ
> page. Is it anything like it's final construction? If so, then you
> really do have problems with this particular page.

I created a page for the contact info and removed the 'mailto:' in the
linkbar. I have re-worked the FAQ page I think it is much easier to
read now.

http://projectdestiny.net/

Jon

Paul

2004-08-06, 7:16 pm

Neal wrote:
<snip>

>
> 3) Is your h6 (the address) really an h6? I think it's not a heading,
> and I'd instead use a div to style it.
>

or the <address> element

Frogleg

2004-08-06, 11:15 pm

jake

2004-08-07, 7:15 am

In message <N3TQc.2669$923.1260@bignews1.bellsouth.net>, Jon L
<jon@jon.jon> writes
>jake wrote:
>
[snip]

>
>
>I am not sure I understand exactly what you mean? Could you elaborate
>please.

OK. Here's the transcript of your first page as produced by a standard
talking browser:

------------------------------------------------------------------------
[Destiny Childcare Learning Center~~210-274-4316.]
Destiny Childcare Learning Center
7923 Donore Place San Antonio, Texas 78229
Mission
About Us
Pricing
FAQ
Contact Us
Students in our school will enjoy a safe, healthy, nurturing and joyful
environment where children have the opportunity to grow and develop to
their fullest potential.
[Kids have a good time at Destiny Childcare Learning Center.]
Legal All contents Copyright © 2004 Project Destiny.net All rights
reserved. Privacy Policy.
-------------------------------------------------------------------------

Now. You have a nice, consistent page layout -- which is a good thing.

However, every time a user of a screen-reader, or a talking browser goes
to any of your pages they are going to have to sit around while the
browser reads the heading, address, and menu.

It's a helpful thing, therefore, to provide a link as the very first
thing on the page that bypasses the intro and takes the user to the
start of the page's main content.

It seems to be a convention that this link is kept 'invisible', as some
people think that this detracts from the 'design' ( -- many other
people would argue about this).

There are a number of ways of doing this
(a) The old tried-and-tested 'single-pixel .gif' approach where you use
a single pixel image as the link (the image too small to be seen)
(b) And there seem to be a number of CSS approaches (CSS 'hacks',
really) such as:

at the start of the page:
----------------------------
<a class="hideit" href="#mainc">Skip to main content.</a>

at the start of the main content:
---------------------------------------
<some_tag_or_other id="mainc">

in the CSS:
------------

..hideit {
height : 0;
width ; 0;
overflow : hidden;
position : absolute;
}

or, perhaps:

..hideit {
position : absolute;
left : -1000px;
width : 990px;
}

.... and I'm sure other posters in this NG will come up with other
solutions.

>
[snip]

>
>Jon
>
regards.

ps. It's also a Section 508 requirement to be able to skip repetitive
navigation links.
--
Jake

jake

2004-08-07, 7:15 am

In message <N3TQc.2669$923.1260@bignews1.bellsouth.net>, Jon L
<jon@jon.jon> writes
[snip]

>
>I created a page for the contact info and removed the 'mailto:' in the
>linkbar. I have re-worked the FAQ page I think it is much easier to
>read now.
>
>http://projectdestiny.net/
>
>Jon
>
The FAQ page is much better now.

However, there is still one more change to that page which is quite
important (and, again, we're talking about AT users).

One of the main ways that an AT user can navigate a page is by skipping
from heading to heading.

It would make sense, therefore, to change each question to a <h2></h2>
so that a reader can quickly move from heading to heading, ignoring the
ones that aren't of interest in their search.

Use CSS to style <h2> to make it look as you want it.

(Note that some 'accessibility' advocates recommend placing a list of
links to the FAQ topics at the top of the page.)

Anyway, it all looks OK now -- but I'd make two further suggestions:

(a) Remove the '~' (tilde) from the alternative text on the logo. A
colon (:) would be much better.

(b) In Internet Explorer the site suffers from the 'flash of unstyled
content' phenomena. This means that for a fraction of a second, each
page is seen -- initially -- without any CSS styling. This is caused by
hiding the CSS from older browsers with the @import approach.

To overcome this, you need to insert this:

<link rel="stylesheet" href="./newbase.css" type="text/css"
media="screen">

in the header just before:

<style type="text/css">

</style>

where newbase (or whatever) can be a dummy file, or can be a file
containing some minimal basic styling for old browsers

regards.
--
Jake

jake

2004-08-08, 7:15 pm

In message <kTxPIKC99JFBFwid@gododdin.demon.co.uk>, jake
<jake@gododdin.demon.co.uk> writes
>In message <N3TQc.2669$923.1260@bignews1.bellsouth.net>, Jon L
><jon@jon.jon> writes
>[snip]
>
>The FAQ page is much better now.
>
>However, there is still one more change to that page which is quite
>important (and, again, we're talking about AT users).
>
>One of the main ways that an AT user can navigate a page is by skipping
>from heading to heading.
>
>It would make sense, therefore, to change each question to a <h2></h2>
>so that a reader can quickly move from heading to heading, ignoring the
>ones that aren't of interest in their search.
>
>Use CSS to style <h2> to make it look as you want it.
>
>(Note that some 'accessibility' advocates recommend placing a list of
>links to the FAQ topics at the top of the page.)
>
>Anyway, it all looks OK now -- but I'd make two further suggestions:
>
>(a) Remove the '~' (tilde) from the alternative text on the logo. A
>colon (:) would be much better.
>
>(b) In Internet Explorer the site suffers from the 'flash of unstyled
>content' phenomena. This means that for a fraction of a second, each
>page is seen -- initially -- without any CSS styling. This is caused by
>hiding the CSS from older browsers with the @import approach.
>
>To overcome this, you need to insert this:
>
><link rel="stylesheet" href="./newbase.css" type="text/css"
>media="screen">
>
>
>in the header just before:
>
><style type="text/css">
>
> </style>
>
>where newbase (or whatever) can be a dummy file, or can be a file
>containing some minimal basic styling for old browsers
>
>
>regards.

Yes, that's better.

(a) The 'flash of unstyled content' has now disappeared.

(b) I see you removed some of the '~' (tilde) -- just a few more to go
;-)

(c) A small problem. You have correctly (on the FAQ) page set up each
question as a <h2></h2>.
But you've also got the answer set up as a <h2></h2>.

It's just the *question* that needs to be a <h2></h2> ...... the answer
stays as a <p></p>.

Yes. Looking much better.

regards.
--
Jake