Glutton for punishment: Please critique this site.

I am designing and developing a site for a "client".

http://headsup.jhu.edu:8080/

I'd like comments and criticisms on the design, layout, navigation, etc.
as well as coding (CSS and HTML -- I doubt you will be able to comment on
the PHP back-end because you can't see that part). I have *NOT* yet run
the thing through a validator (CSS or HTML) and I probably never will. (I
have my own reasons to not use validators).

I have tested it in Mozilla 1.x and MSIE 6 and I know it should look
pretty close to the same in both. It may look sucky in in IE 5, however,
and I know it will not look right in any browser that does not support CSS
positioning (4.x and earlier browsers). Assume that the target audience
will be using MSIE6. (And please -- no diatribe on making assumptions and
target audiences and all that.)

I am not strictly speaking a "designer" but more of a "programmer". So
please let me know what you think, you "designers". Pull no punches; I'm
thick skinned. (Not that I figured anyone would.)

Thanks!

--
Jeffrey D. Silverman | jeffreyPANTS (AT) jhu (DOT) edu **
Website | http://www.newtnotes.com

(** Drop "pants" to reply by email)

Quoth the raven Jeffrey Silverman:

I am designing and developing a site for a "client".

We all say that...

http://headsup.jhu.edu:8080/

I'd like comments and criticisms on the design, layout, navigation, etc.
as well as coding (CSS and HTML -- ...

What's this stuff above the DOCTYPE?

<br />
<b>Warning</b>: Invalid argument supplied for foreach() in
<b>/home/headsup/public_html_dev/include/php/wse_website_functions.inc</b>
on line <b>111</b><br />

I doubt you will be able to comment on
the PHP back-end because you can't see that part). I have *NOT* yet run
the thing through a validator (CSS or HTML) and I probably never will. (I
have my own reasons to not use validators).

Ok... but don't complain if others do. <g> You might want to rethink,
though, as the front page generates 171 errors, only a few are
connected with the above "warning" thingy.

I have tested it in Mozilla 1.x and MSIE 6 and I know ...

From Moz 1.7, I think the site looks good. Coding is pretty well
done, although I see some <b>'s in there I would replace with
<strong>'s. The font in the table of Important Dates is a bit small.
If they weren't Important... A couple of the lists on other pages were
a bit too small as well. Otherwise, nice.

--
-bts
-This space intentionally left blank.

On Wed, 01 Sep 2004 13:25:56 -0400, Jeffrey Silverman
<jeffrey (AT) pantsjhu (DOT) edu> wrote:

I am designing and developing a site for a "client".

http://headsup.jhu.edu:8080/

I'd like comments and criticisms on the design, layout, navigation, etc.
as well as coding (CSS and HTML -- I doubt you will be able to comment on
the PHP back-end because you can't see that part). I have *NOT* yet run
the thing through a validator (CSS or HTML) and I probably never will. (I
have my own reasons to not use validators).

I have tested it in Mozilla 1.x and MSIE 6 and I know it should look
pretty close to the same in both. It may look sucky in in IE 5, however,
and I know it will not look right in any browser that does not support
CSS
positioning (4.x and earlier browsers). Assume that the target audience
will be using MSIE6. (And please -- no diatribe on making assumptions and
target audiences and all that.)

I am not strictly speaking a "designer" but more of a "programmer". So
please let me know what you think, you "designers". Pull no punches; I'm
thick skinned. (Not that I figured anyone would.)

HTML isn't really programming, though. We shall take a look... though at
first glance things are not too bad.

<a href="/"><img alt="HeadsUP Logo" src="/images/headsup-logo.gif"
border="0"></a>
<a id="headsup_home_link" href="/">Home</a>

Why two links? Try making these just one. You can use span inside for
styling if that's required, didn't check, and the id will apply to all the
linking content, not just the text link.

alt text should either describe the image for those who cannot load/see
the image, or if it is unessential it should be empty (alt=""). Especially
if these images are links - users need the alt text to know what the link
is for, and some browsers might not even let you click if there's no alt.
This is the most severe problem I see with the page.

As was mentioned, those initial two lines before the doctype should
definitely not be there. It's visible in some browsers. In fact, not
starting with the doctype can throw the browser into quirks mode even
though you've used the strict doctype.

Check title - ADvanced.

You've used h2 and h3 but not h1. Is there no main heading for the page?
Perhaps there should be. Whether you like the typical rendering or not,
you can alter that in the CSS. THe page "should" have one h1 and each
section an h2. Subsections get an h3, seems these are fine.

& (when it does not begin an entity) should be replaced to ensure
cross-browser success.

Overall layout is nice.

On Wed, 01 Sep 2004 17:38:59 GMT, Beauregard T. Shagnasty
<a.nony.mous (AT) example (DOT) invalid> wrote:

although I see some <b>'s in there I would replace with <strong>'s.

Not many. I did see

<b>G</b>et

as being a bit silly. It's not exactly semantic markup, but it isn't
terrible.

All the other <b>'s are in that rogue bit at top, which should be
eliminated from the rendering. Some of them are arguably <strong> but are
better gone.

Jeffrey Silverman <jeffrey (AT) pantsjhu (DOT) edu> wrote:

http://headsup.jhu.edu:8080/

It makes me dizzy.

The coding does not validate, the graphics are fuzzy and the whole makes me
dizzy. Not good.

The Doormouse

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

On Wed, 01 Sep 2004 18:12:17 +0000, The Doormouse wrote:

Jeffrey Silverman <jeffrey (AT) pantsjhu (DOT) edu> wrote:

http://headsup.jhu.edu:8080/

It makes me dizzy.

The coding does not validate, the graphics are fuzzy and the whole makes
me dizzy. Not good.

The Doormouse

"Dizzy???"

I'm sorry, but
a) dizziness is in the eye of the beholder
and
b) "dizzy" is not exactly a constructive criticism
and
c) I implied that it would not validate in the OP. And also that I was not
concerned with that aspect.

thank you, though.

--
Jeffrey Silverman
jeffreyPANTS (AT) jhu (DOT) edu
** Drop "PANTS" to reply by email

On Wed, 01 Sep 2004 17:38:59 +0000, Beauregard T. Shagnasty wrote:

What's this stuff above the DOCTYPE?

br /
b>Warning</b>: Invalid argument supplied for foreach() in
b>/home/headsup/public_html_dev/include/php/wse_website_functions.inc</b
on line <b>111</b><br /

Ooops!! Thanks.

I'll get that tomorrow.

I doubt you will be able to comment on the PHP back-end because you
can't see that part). I have *NOT* yet run the thing through a validator
(CSS or HTML) and I probably never will. (I have my own reasons to not
use validators).

Ok... but don't complain if others do. <g> You might want to rethink,
though, as the front page generates 171 errors, only a few are connected
with the above "warning" thingy.

Well, the problem with validators is that web browsers do not conform to
W3C specifications, whereas the validators purport to do so. So trying to
produce cross-browser code that is also 100% "validator compliant" is like
<insert colloquial expression meaning "hard to do" here>.

--
Jeffrey Silverman
jeffreyPANTS (AT) jhu (DOT) edu
** Drop "PANTS" to reply by email

On Wed, 01 Sep 2004 14:49:02 -0400, Jeffrey Silverman
<jeffreyPANTS (AT) jhu (DOT) edu> wrote:

Well, the problem with validators is that web browsers do not conform to
W3C specifications, whereas the validators purport to do so. So trying to
produce cross-browser code that is also 100% "validator compliant" is
like
insert colloquial expression meaning "hard to do" here>.

That's not so much a problem with the validator as it is a problem with
the UA. Just because many browsers fail to implement strictly according to
the standards is not an argument against using validation as a tool.

Valid code serves as a baseline. There are certainly many things picked up
by a validator which do affect actual usability. Sure, many things which
are technically errors are corrected by many browsers. But perfectly valid
code is well on its way to being cross-browser AND future-proof.

Validation is no silver bullet. It's simply a tool which helps eliminate
errors the human eye cannot easily discern. From a programming standpoint,
I see your issue, but HTML is not programming. SGML validation serves a
different end IMO.

On Wed, 01 Sep 2004 14:56:30 -0400, Neal wrote:

I see your issue, but HTML is not programming.

I'm not sure why you think I might think that it is.
--
Jeffrey Silverman
jeffreyPANTS (AT) jhu (DOT) edu
** Drop "PANTS" to reply by email

Quoth the raven Jeffrey Silverman:

On Wed, 01 Sep 2004 17:38:59 +0000, Beauregard T. Shagnasty wrote:

Jeffrey wrote:
I doubt you will be able to comment on the PHP back-end because
you can't see that part). I have *NOT* yet run the thing
through a validator (CSS or HTML) and I probably never will. (I
have my own reasons to not use validators).

Ok... but don't complain if others do. <g> You might want to
rethink, though, as the front page generates 171 errors, only a
few are connected with the above "warning" thingy.

Well, the problem with validators is that web browsers do not
conform to W3C specifications, whereas the validators purport to do
so. So trying to produce cross-browser code that is also 100%
"validator compliant" is like <insert colloquial expression meaning
"hard to do" here>.

Hmm. Code that validates stands a much better chance to render
correctly in all browsers. Another quick glance at the source and I
don't see anything in there that is browser-specific. So why not try
to validate (no errors), and be sure that you have done the best you
(we) know how to be "cross-browser" compatible.

Validated code == cross-browser code <g>

Your css is good, too. I see only one error: cursor: hand;
I'd recommend changing the body font-size from 1em to 100% because of
the IE bug that screws up rendering when visitor changes size.

--
-bts
-This space intentionally left blank.