site critique

[murmur]

http://www.philadelphiamusicproject.org/mockup/

thank you.

 

[Jerry Perkins]

http://www.philadelphiamusicproject.org/mockup/

thank you.

1) First look impression, very good.
2) Do not like links that open new windows. In fact I really hate
them.
3) For using CSS, your code looks very over done.
4) Your "<meta name="description"" may be a little long.

 

[murmur]

thanks. can you elaborate on the CSS comment?

1) First look impression, very good.
2) Do not like links that open new windows. In fact I really hate
them.
3) For using CSS, your code looks very over done.
4) Your "<meta name="description"" may be a little long.

 

[rf]

thanks. can you elaborate on the CSS comment?

You appear to have constructed a CSS rule, from the ground up, for every
HTML element on the page. I suspect that if you add another element you
might create another rule just for that element

CSS is supposed to simplify things.

Complex: many of the rules specify font-family. If you suddenly want to
change this then you will have to hunt around your entire CSS file to change
is.

Simple:
body {font-family: ...;}
and let every element that lives in the body element inherit from that.

Complex (quoted from your CSS):

..toppagetext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 160%;
color: #993300;
}

..toppagetext a:link {
color: #ff6600;
text-decoration: none;
font-weight: bold;

}
..toppagetext a:visited {
color: #ff6600;
text-decoration: none;
font-weight: bold;

}
..toppagetext a:hover {
color: #FF6600;
text-decoration: underline;
font-weight: bold;

}

Simple:

..toppagetext {color: #930; background-color: white;}

..toppagetext a
{
color: #f60; background-color: inherit;
text-decoration: none;
font-weight: bold;
}

..toppagetext a:hover {text-decoration: underline}

I would however strongly suggest specifying a different colour for hover and
most especially visited.

As well as the CSS you are also using presentational attributes in the HTML
(bgcolor etc). Do all of this with CSS.

There is lots of javascript in there do achieve rollover effects. This could
be done much more neatly using CSS and would actually work for the 15% or so
of people who have javascript turned off (for whatever reason).

You have loads of, for example, <p class-"bodytext">. Don't use the class in
the <p> element, use it in the <div> that contains those <p>'s and have the
style rule select that div.

Same for <tr class="calendartext">. Move calendartext to the enclosing
table. You don't even need a table there. The whole lot could be done with
<p> elements or better yet, a <ul>. Must be a bugger to maintain with all
those tables

Remember, the KISS principle applies.

Cheers
Richard.

 

[Jerry Perkins]

thanks. can you elaborate on the CSS comment?

Very good comments from Richard.
I will add one example. On line 167 you have:
<p class="bodytext"><strong>3/21/03: March 2003 Issue of RE/SOUND
Released</strong><br>
The third issue of PMP’s biannual newsletter, re/sound,
includes a <a href="resound.html">feature
article</a> by <a href="http://www.citypaper.net"
target="_blank">Philadelphia City Paper</a> ... </p>

Suggest two classes for you text, a body and a heading for the
<strong>. Hence
<p class="bodytexthead">3/21/03: March 2003 Issue of
RE/SOUND Released</p>
<p class="bodytext">The third issue of PMP’s biannual
newsletter, re/sound, includes a <a href="resound.html">
feature article</a> by
<a href="http://www.citypaper.net" target="_blank">
Philadelphia City Paper</a> .... </p>

<p class="bodytexthead">3/15/03: 2003 Grant Recipients
Announced</p>
<p class="bodytext">The Philadelphia Music Project awarded
a total of $780,000 in project support ... </p>

Remember that someone has to followup and make changes to your
script.

 

[Jerry Perkins]

http://www.philadelphiamusicproject.org/mockup/

thank you.

This is a comment directed at updating your code. Since you have
a number of items that will change or be updated frequently, you
should think about the ease at reading and changing those items. I
use the indent and space rules to enhance this.
For an example from our church web site at
http://www.oursaviorlcms.org/

</tr><tr>
<td class="special">
<p class="special-head">The Bonhoeffer Film:</p>
<p class="special-body">
Opens October 10 at the ... </p>
<p class="special-body">
What critics are saying: &quot; ... </p>
<p class="special-body">
The new 90 minute documentary that tells ... </p>
</td>
<td class="special">
<p class="special-head">Calendars for Sale:</p>
<p class="special-body">If you would ... </p>
</td>

</tr><tr>
<td class="special">
<p class="special-head">Physical Education:</p>
<p class="special-body">Miss April Fett is getting
our students into ... </p>
</td>
<td class="special">
<p class="special-head">Music:</p>
<p class="special-body">We have ... </p>
</td>

The table has two columns. Each row is divided by a space. Note
the </tr><tr>. Hence copy paste delete actions are easy.
From this I can quickly copy paste another row into the table and
update.

 

[kchayka]

Suggest two classes for you text, a body and a heading for the
<strong>. Hence
<p class="bodytexthead">3/21/03: March 2003 Issue of
RE/SOUND Released</p>
<p class="bodytext">The third issue of PMP’s biannual
.... </p>

If that first line is a heading, then it should have heading markup, not
paragraph markup.